Fluxo UIFluxo UIv0.4.1

JSON Editor

An interactive tree-view editor for JSON data with inline editing, type detection, URL handling, and full CRUD operations on nested objects and arrays.

Basic

Basic JSON Editor

Edit simple key-value pairs with automatic type detection

{5
name:"John Doe"
age:30
email:"john@example.com"
active:true
role:null
add property
}
import { JsonEditor } from 'fluxo-ui';

const [data, setData] = useState({
  name: 'John Doe',
  age: 30,
  email: 'john@example.com',
  active: true,
  role: null,
});

<JsonEditor value={data} onChange={setData} />

Nested Objects

Nested Objects

Deep object hierarchies with collapsible tree view

{2
user:{3
id:1
add property
}
metadata:{2
createdAt:"2024-01-15T10:30:00Z"
version:"2.1.0"
add property
}
add property
}
import { JsonEditor } from 'fluxo-ui';

const data = {
  user: {
    id: 1,
    profile: { firstName: 'Jane', lastName: 'Smith' },
    settings: { theme: 'dark', notifications: true },
  },
};

<JsonEditor value={data} onChange={setData} expandDepth={2} />

Arrays

Arrays & Nested Arrays

Full array editing with add, remove, and insert operations

{3
fruits:[4
0:"Apple"
1:"Banana"
2:"Cherry"
3:"Date"
add item
]
matrix:[3
add item
]
users:[3
add item
]
add property
}
import { JsonEditor } from 'fluxo-ui';

const data = {
  fruits: ['Apple', 'Banana', 'Cherry'],
  users: [
    { name: 'Alice', role: 'admin' },
    { name: 'Bob', role: 'user' },
  ],
};

<JsonEditor value={data} onChange={setData} expandDepth={2} />

Data Types

Data Types & Type Badges

All supported data types with type badges and type changing

Object{12
string:"Hello, World!"string
number:42number
float:3.14159number
boolTrue:trueboolean
boolFalse:falseboolean
nullValue:nullnull
emptyString:""string
url:"https://github.com"➚string
negativeNumber:-273.15number
largeNumber:9007199254740991number
add property
}
import { JsonEditor } from 'fluxo-ui';

<JsonEditor
  value={data}
  onChange={setData}
  showDataTypes
  allowTypeChange
/>

Complex Data

Complex Nested Data

Real-world configuration with mixed nested objects, arrays, URLs, and null values

{7
apiEndpoint:"https://api.example.com/v2"➚
database:{5
host:"localhost"
port:5432
name:"myapp_db"
add property
}
features:{4
darkMode:true
beta:false
maxUploadSize:10485760
add property
}
tags:[3
0:"production"
1:"v2"
2:"stable"
add item
]
readme:"https://github.com/example/project#readme"➚
deprecated:null
debug:undefined
add property
}

Read-Only

Read-Only Viewer

Display JSON data without edit capabilities

{3
server:{4
hostname:"prod-web-01"
ip:"192.168.1.100"
os:"Ubuntu 22.04 LTS"
uptime:"45 days"
}
resources:{3
cpu:"4 cores"
memory:"16 GB"
disk:"500 GB SSD"
}
services:[4
0:"nginx"
1:"node"
2:"postgresql"
3:"redis"
]
}
import { JsonEditor } from 'fluxo-ui';

<JsonEditor value={data} readOnly />

Permissions

Permission Controls

Fine-grained control over edit, add, and remove operations

Values only (no key editing, no add/remove)

{4
project:"FluxoUI"
version:"1.0.0"
settings:{2
debug:false
maxRetries:3
}
tags:[2
0:"react"
1:"typescript"
]
}

No delete allowed

{4
project:"FluxoUI"
version:"1.0.0"
settings:{2
debug:false
maxRetries:3
add property
}
tags:[2
0:"react"
1:"typescript"
add item
]
add property
}

No add allowed

{4
project:"FluxoUI"
version:"1.0.0"
settings:{2
debug:false
maxRetries:3
}
tags:[2
0:"react"
1:"typescript"
]
}
<JsonEditor
  value={data}
  onChange={setData}
  allowEditKey={false}
  allowRemove={false}
  allowInsert={false}
/>

Sizes

Size Variants

Three size options for different use cases

Small

{4
name:"Example"
count:42
active:true
add property
}

Medium (Default)

{4
name:"Example"
count:42
active:true
add property
}

Large

{4
name:"Example"
count:42
active:true
add property
}

Sorted Keys

Sorted Keys

Automatically sort object keys alphabetically

Default (insertion order)

{5
zebra:"last animal"
apple:"first fruit"
mango:"tropical fruit"
banana:"yellow fruit"
config:{3
zIndex:100
animation:true
border:"1px solid"
add property
}
add property
}

Sorted keys

{5
apple:"first fruit"
banana:"yellow fruit"
config:{3
animation:true
border:"1px solid"
zIndex:100
add property
}
mango:"tropical fruit"
zebra:"last animal"
add property
}
<JsonEditor value={data} onChange={setData} sortKeys />

Import

import { JsonEditor } from 'fluxo-ui';
import type { JsonValue, JsonEditorProps } from 'fluxo-ui';

Props

value
JsonValue"-"

The JSON value to display and edit

onChange
(value: JsonValue) => void"-"

Callback when the value changes

allowEditValue
boolean"true"

Allow editing values

allowEditKey
boolean"true"

Allow editing/renaming keys

allowRemove
boolean"true"

Allow removing properties/items

allowInsert
boolean"true"

Allow adding new properties/items

allowTypeChange
boolean"false"

Show type badges with type changing

allowCopy
boolean"true"

Allow copying values to clipboard

allowSearch
boolean"true"

Show search in toolbar

readOnly
boolean"false"

Disable all editing

expandDepth
number"1"

Initial depth to auto-expand

size
'sm' | 'md' | 'lg'"'md'"

Font and spacing size

maxHeight
string | number"-"

Max height with scroll overflow

showDataTypes
boolean"false"

Show type labels next to values

showItemCount
boolean"true"

Show item count for objects/arrays

showToolbar
boolean"true"

Show the toolbar with search and actions

sortKeys
boolean"false"

Sort object keys alphabetically

className
string"-"

Additional CSS class

id
string"-"

HTML id attribute

ariaLabel
string"-"

Accessible label

Features

Recursive Editing

Edit deeply nested objects and arrays with collapsible tree view and indentation guides

Smart Type Detection

Automatically detects strings, numbers, booleans, null, objects, arrays, and URLs

Inline Editing

Double-click to edit keys and values in place with keyboard shortcuts (Enter to save, Esc to cancel)

CRUD Operations

Add new properties/items, rename keys, edit values, and delete entries with confirmation

Permission Controls

Fine-grained boolean flags to control edit, add, remove, and type change capabilities

URL Detection

Automatically detects URLs and provides clickable launch buttons