svelte-json-view

• Purpose: Displays JSON data in a tree-like expandable view for easy visualization and navigation.

• Target Audience: Developers working with JSON data in Svelte or vanilla JavaScript applications.

• Key Features:

  • Supports both Svelte components and vanilla JS usage.
  • Customizable theming via CSS variables (colors, padding, borders, etc.).
  • Configurable initial expansion depth.
  • Responsive hover effects on brackets.
  • Type-specific value coloring (strings, numbers, booleans).

• Svelte Support: Primarily designed as a Svelte component, but can also be used in vanilla JS projects via CDN or bundler imports.

• Theming: Offers extensive customization through CSS variables, including:

  • Colors for keys, values, brackets, and separators.
  • Padding and border styles for depth indication.
  • Hover effects.

• Props:

  • json: The un-stringified object to display.
  • depth: Controls initial expansion depth (defaults to fully expanded).

For a live demo, see [here](https://zerodevx.github.io/json-pretty-print/H4sIAAAAAAAAA7WaXXOkNhaG7_MrtK692FQaAgIE8tU4tmfjxJ7MepykUklqS4Do1g4NHT5sd1L73_foC2g3bXs83krF0wLpICHpOe854tcvEPoL_kfo6N8iPzpGR8SLKWFBESakIJnvJYkfZn4YHS10NVHl_B4qeqa87E27mMShz1InS7PQCUmWOkkUJg4hHityFjCSpoON9iTrxC2Hdl3Tc3M1ZSWrMnnx6O94QXDiJtS22Iis6xt1b9V1m-Ovv96ULOOrusxd0X0d4PsA27psKesFoSnyLT-ty7qRbdOmvqtsvYqtlcHLuqkY-lDWbLi15DBK1aLga1Zyez2r1xtWbeWN9z9c31ycntg7UE2U8noprbXS2Jt