JsonEditor

A code field for JSON that points to the line with the mistake.

SourcePackage @weft-js/warp

Preview

tsx

import { JsonEditor } from '@weft-js/warp'export function Basic() {  return (    <JsonEditor label="weft.json" defaultValue={CONFIG} rows={7} />  )}const CONFIG = `{  "region": "eu-west",  "copies": 3,  "healthCheck": "/health"}`

Installation

npm install @weft-js/warp

Usage

tsx

import { JsonEditor } from '@weft-js/warp'<JsonEditor label="weft.json" defaultValue={CONFIG} rows={7} />

A parse error

Delete the trailing comma and the error goes.

tsx

import { JsonEditor } from '@weft-js/warp'export function Broken() {  return (    <JsonEditor label="weft.json" defaultValue={'{\n  "region": "eu-west",\n  "copies": 3,\n}'} rows={5} />  )}

Your own check

schema gets the parsed value and returns a message. Change the value to 3.

tsx

import { JsonEditor } from '@weft-js/warp'export function Schema() {  return (    <JsonEditor label="weft.json" defaultValue={BAD_CONFIG} rows={7} schema={checkConfig} />  )}const CONFIG = `{  "region": "eu-west",  "copies": 3,  "healthCheck": "/health"}`const BAD_CONFIG = CONFIG.replace('3', '"three"')const checkConfig = (v: unknown) => (typeof v === 'object' && v !== null && 'copies' in v && typeof v.copies === 'number' && v.copies > 0 ? null : '"copies" must be a number above zero.')

Empty, filled, invalid, disabled and read-only

The line under the field reports on the JSON.

tsx

import { Grid, JsonEditor, Stack, Text } from '@weft-js/warp'export function States() {  return (    <Grid cols={3} gap="group">      <Cell name="Empty"><JsonEditor label="weft.json" rows={3} /></Cell>      <Cell name="Filled"><JsonEditor label="weft.json" rows={3} defaultValue={'{ "copies": 3 }'} /></Cell>      <Cell name="Invalid"><JsonEditor label="weft.json" rows={3} defaultValue={'{ "copies": 0 }'} schema={checkConfig} /></Cell>      <Cell name="Disabled"><JsonEditor label="weft.json" rows={3} defaultValue={'{ "copies": 3 }'} disabled /></Cell>      <Cell name="Read-only"><JsonEditor label="weft.json" rows={3} defaultValue={'{ "copies": 3 }'} readonly /></Cell>    </Grid>  )}const Cell = (p: { name: string; children?: unknown }) => (  <Stack gap="tight">    <Text role="caption" subtle>{p.name}</Text>    {p.children}  </Stack>)const checkConfig = (v: unknown) => (typeof v === 'object' && v !== null && 'copies' in v && typeof v.copies === 'number' && v.copies > 0 ? null : '"copies" must be a number above zero.')

Accessibility

Tab: Indents
EscthenTab: Leaves the field

API Reference

Prop	Type	Default	Description
`label`	`string`	—	The visible name, and what screen readers announce.
`hint`	`unknown`	—	A short line of help under the field.
`error`	`unknown`	—	Replaces the hint and marks the field invalid.
`icon`	`IconRef`	—	Leading icon: it sweeps with the border.
`prefix`	`unknown`	—	Text or an element inside the field before the value, such as `$`.
`suffix`	`unknown`	—	Text or an element inside the field after the value, such as `kg`.
`variant`	`"floating" \| "classic"`	—	floating (default, or the app's `warp({ fields })`) · classic: the label above.
`appearance`	`"line"`	—	`line`: only a bottom line under the value, no box or fill. The boxed field otherwise.
`size`	`"sm" \| "md" \| "lg"`	`'md'`	Control size. `md` by default.
`clearable`	`boolean`	`false`	A clear button (shown once there is a value).
`counter`	`number`	—	Maximum length, shown as a counter.
`id`	`string`	—	The element id. One is made for you if you leave it out.
`disabled`	`boolean`	`false`	Can't be focused or changed.
`readonly`	`boolean`	`false`	Shows the value and lets it be selected and copied, but not changed.
`name`	`string`	—	Posts the value with a form.
`value`	`string \| State<string>`	—	The current value, when you own the state.
`defaultValue`	`string`	—	The starting value, when the component owns the state.
`lineNumbers`	`boolean`	`false`	Numbers each line in a gutter. Default `true`; off while `wrap` is on.
`tabSize`	`2 \| 4`	`2`	2 or 4 spaces, used by Format too.
`wrap`	`boolean`	`false`	Soft-wraps long lines; line numbers then give way, since a number no longer means one row.
`rows`	`number`	—	The height in lines.
`schema`	`((value: unknown) => string \| null \| undefined)`	—	Checks the parsed value. What it returns shows as the error.

Event	Type	Default	Description
`onInput`	`((e: InputEvent & { currentTarget: HTMLInputElement & HTMLTextAreaElemen…`	—	Called on each keystroke.
`onValueChange`	`((v: string, reason: ChangeReason) => void)`	—	Called with each new value, and whether a pointer, a key or code made the change.
`onReset`	`(() => void)`	—	After a form's reset put the value back.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="json-editor"] [data-part="suffix"]

suffix

RelatedCode input Key value editor