logo svelte /json view lite v0.2.5
FIG-001/ THEMING

tailwind tree.

A little polish goes a long way. Rounded rows, vivid values, and a palette that makes structured data feel at home in your app.

Inspired by the rounded rows in svelte-tree-view’s Tailwind example. This version uses JsonView with its public style map, Tailwind utilities, and scoped CSS for the nested rows.

Copy the demo into a Svelte 5 project with Tailwind CSS configured. Keep the utility class names as complete strings so Tailwind can detect them. The palette is local to this viewer and does not change your site theme.

Want animation too? Try the separate Tailwind + Svelte Motion example. This version uses no animation dependency.

Click a field name or chevron to toggle a container. Tab to a chevron and use the arrow keys to navigate. Palette and spacing changes preserve your expanded nodes. Long values wrap; arrays and objects retain their brackets. The source below is the running example.

↩ all examples
style · tailwind + csspalettes · 3 mode · live running source
A DIFFERENT POINT OF VIEW

Your data. Dressed up.

workspace.json
READ ONLY
user:{
    id:12345,
    name:"Ada Lovelace",
    email:"ada@example.com",
    verified:true,
    profile:{
      role:"Creative developer",
      bio:"Building thoughtful interfaces, one small detail at a time.",
    }
}
workspace:{
    name:"The good stuff",
    plan:"pro",
    members:8,
    tags:[
      "design",
      "engineering",
      "a little bit of magic"
    ],
    usage:{
      projects:24,
      storageGB:3.8,
      unlimited:false
    }
}
delivery:{
    endpoint:"https://api.example.com/v1/workspaces/creative-studio/events",
    retries:3,
    lastError:null,
    enabled:true
}
Aa string # number ◐ boolean { } container
Tab to a chevron · ↑ ↓ ← → to explore
category · theming
sheet · sheet 01 / 01
⟳ to re-run

Tailwind Tree