Sveltekit-UI

Json Showcase

Example

{
id
: 1
name
: "test_object"
is_active
: true
details
: {
count
: 42
description
: "a nested object with various types"
tags
: [
"sample"
"test"
"json"
]
meta
: {
created_at
: "2024-08-29T12:34:56Z"
updated_at
: "2024-08-29T15:20:30Z"
stats
: {
views
: 1234
likes
: 567
shares
: 89
}
}
}
items
: [
{
id
: 101
type
: "fruit"
name
: "apple"
quantity
: 10
price
: 1.25
in_stock
: true
}
{
id
: 102
type
: "vegetable"
name
: "carrot"
quantity
: 25
price
: 0.75
in_stock
: false
}
]
numbers
: [
10
20
30
40
50
]
test_null
: null
config
: {
max_limit
: 100
min_limit
: 10
settings
: {
theme
: "dark"
notifications
: {
email
: true
sms
: false
}
}
}
}

Json Edit Mode

{
id
:

Edit Key

1

Edit Item
name
:

Edit Key

"test_object"

Edit Item
is_active
:

Edit Key

true

Edit Item
details
:

Edit Key

{
count
:

Edit Key

42

Edit Item
description
:

Edit Key

"a nested object with various types"

Edit Item
tags
:

Edit Key

[
"sample"

Edit Item

"test"

Edit Item

"json"

Edit Item

]

Edit Item
meta
:

Edit Key

{
created_at
:

Edit Key

"2024-08-29T12:34:56Z"

Edit Item
updated_at
:

Edit Key

"2024-08-29T15:20:30Z"

Edit Item
stats
:

Edit Key

{
views
:

Edit Key

1234

Edit Item
likes
:

Edit Key

567

Edit Item
shares
:

Edit Key

89

Edit Item
}
}
}
items
:

Edit Key

[
{
id
:

Edit Key

101

Edit Item
type
:

Edit Key

"fruit"

Edit Item
name
:

Edit Key

"apple"

Edit Item
quantity
:

Edit Key

10

Edit Item
price
:

Edit Key

1.25

Edit Item
in_stock
:

Edit Key

true

Edit Item
}
{
id
:

Edit Key

102

Edit Item
type
:

Edit Key

"vegetable"

Edit Item
name
:

Edit Key

"carrot"

Edit Item
quantity
:

Edit Key

25

Edit Item
price
:

Edit Key

0.75

Edit Item
in_stock
:

Edit Key

false

Edit Item
}
]

Edit Item
numbers
:

Edit Key

[
10

Edit Item

20

Edit Item

30

Edit Item

40

Edit Item

50

Edit Item

]

Edit Item
test_null
:

Edit Key

null

Edit Item
config
:

Edit Key

{
max_limit
:

Edit Key

100

Edit Item
min_limit
:

Edit Key

10

Edit Item
settings
:

Edit Key

{
theme
:

Edit Key

"dark"

Edit Item
notifications
:

Edit Key

{
email
:

Edit Key

true

Edit Item
sms
:

Edit Key

false

Edit Item
}
}
}
}

Json Edit Mode Popover

Edit JSON

Data Upload

{
id
:

Edit Key

1

Edit Item
name
:

Edit Key

"test_object"

Edit Item
is_active
:

Edit Key

true

Edit Item
details
:

Edit Key

{
count
:

Edit Key

42

Edit Item
description
:

Edit Key

"a nested object with various types"

Edit Item
tags
:

Edit Key

[
"sample"

Edit Item

"test"

Edit Item

"json"

Edit Item

]

Edit Item
meta
:

Edit Key

{
created_at
:

Edit Key

"2024-08-29T12:34:56Z"

Edit Item
updated_at
:

Edit Key

"2024-08-29T15:20:30Z"

Edit Item
stats
:

Edit Key

{
views
:

Edit Key

1234

Edit Item
likes
:

Edit Key

567

Edit Item
shares
:

Edit Key

89

Edit Item
}
}
}
items
:

Edit Key

[
{
id
:

Edit Key

101

Edit Item
type
:

Edit Key

"fruit"

Edit Item
name
:

Edit Key

"apple"

Edit Item
quantity
:

Edit Key

10

Edit Item
price
:

Edit Key

1.25

Edit Item
in_stock
:

Edit Key

true

Edit Item
}
{
id
:

Edit Key

102

Edit Item
type
:

Edit Key

"vegetable"

Edit Item
name
:

Edit Key

"carrot"

Edit Item
quantity
:

Edit Key

25

Edit Item
price
:

Edit Key

0.75

Edit Item
in_stock
:

Edit Key

false

Edit Item
}
]

Edit Item
numbers
:

Edit Key

[
10

Edit Item

20

Edit Item

30

Edit Item

40

Edit Item

50

Edit Item

]

Edit Item
test_null
:

Edit Key

null

Edit Item
config
:

Edit Key

{
max_limit
:

Edit Key

100

Edit Item
min_limit
:

Edit Key

10

Edit Item
settings
:

Edit Key

{
theme
:

Edit Key

"dark"

Edit Item
notifications
:

Edit Key

{
email
:

Edit Key

true

Edit Item
sms
:

Edit Key

false

Edit Item
}
}
}
}

Component Documentation

Component Name

Json

Builder Function Name

create_json_manager

Description

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

Use like example

Config

PropertyTypeDefaultDescription
valany

the initial json object/array/value to display or edit

is_popoverboolean

false

if true, the json viewer/editor is placed in a popover

is_edit_modeboolean

false

if true, displays editing controls (upload, full-edit popover, etc.)

is_show_buttonsboolean

false

if true, shows collapse, expand, copy, etc. buttons in the interface

labelstring

optional label text to show above the json viewer

indentationnumber

1

indentation or nesting offset for the displayed structure

on_finishfunction

called when the user taps the 'finish' button in the popover, receives the final json value

Methods

MethodDescriptionParametersReturns
set_val

replaces the json with a new object/array/value, reprocessing into nested form

input: any

void
init

initializes the manager, sets up popovers, buttons, file inputs, etc.

config: object

void

Returned Properties

PropertyTypeDescription
idstring

unique id for this json manager instance

valany

the fully processed json value representing the user's final object/array or primitive

labelstring

optional label for the json viewer/editor

popover_managerobject

manages the main popover if is_popover is true

popover_toggle_button_managerobject

button manager to open/close the popover if is_popover is true

is_popoverboolean

if true, the json editor is displayed in a popover

json_preppedobject

internal nested representation of the json data structure

file_input_managerobject

manages file input for uploading JSON or CSV

data_upload_popover_managerobject

popover manager for the 'edit full json' text area

edit_json_button_managerobject

button manager opening the data_upload_popover_manager

data_text_input_managerobject

text input manager for the raw json text/csv content

collapse_all_button_managerobject

button manager that collapses all nested objects/arrays

expand_all_button_managerobject

button manager that expands all nested objects/arrays

copy_json_button_managerobject

button manager that copies the final json to clipboard

is_show_buttonsboolean

if true, shows the top row of collapse/expand/copy/etc. controls

is_edit_modeboolean

if true, user can directly edit nested items or the entire json

finish_data_upload_button_managerobject

button manager that finalizes the raw text input from the data_upload_popover

finish_button_managerobject

button manager that calls on_finish and closes the main popover

icon
Sponsored byContibase