Components / Data & content

JSON

Component + manager

Manages json data for viewing and (optionally) editing, with features like expanding/collapsing nested objects and uploading/importing data.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentJson

Managercreate_json_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Json, create_json_manager } from "sveltekit-ui"

  const manager = create_json_manager({
    label: "Project settings",
    val: { name: "Website", published: false, tags: ["svelte", "ui"] },
    is_edit_mode: true,
    is_show_buttons: true,
  })
</script>

<Json {manager} />
<pre>{JSON.stringify(manager.val, null, 2)}</pre>

API reference

Configure the manager, call its methods, and read its reactive state.

7 entries in configuration

Property	Type	Default	Description
`val`	`any`	`null`	the initial json object/array/value to display or edit
`is_popover`	`boolean`	`false`	if true, the json viewer/editor is placed in a popover
`is_edit_mode`	`boolean`	`false`	if true, displays editing controls (upload, full-edit popover, etc.)
`is_show_buttons`	`boolean`	`false`	if true, shows collapse, expand, copy, etc. buttons in the interface
`label`	`string`	`null`	optional label text to show above the json viewer
`indentation`	`number`	`1`	indentation or nesting offset for the displayed structure
`on_finish`	`function`	`null`	called when the user taps the 'finish' button in the popover, receives the final json value