JSON Input

Textarea for JSON with live validation (message includes line/column), Format and Minify actions.

Import

import { JsonInput } from '@marbleui/ui'

Props

<JsonInput>

Prop	Type	Default
className	`string`	`—`
defaultValue	`string`	`''`
label	`string`	`'JSON'`
onValid	`(value: unknown) => void`	`—`
rows	`number`	`8`

Usage notes

Textarea for pasting or editing JSON, such as a webhook payload or a config blob, with live validation and Format/Minify buttons. To show JSON read-only use CodeBlock.

<JsonInput label="Webhook payload" defaultValue={JSON.stringify(samplePayload, null, 2)} onValid={handlePayload} rows={12} />

Uncontrolled: defaultValue seeds the text and onValid receives the parsed value whenever the text parses. There’s no callback for invalid text and no name, so it doesn’t submit with a form by itself.
onValid runs in an effect after the text changes (including for the initial defaultValue), so it’s safe to set state from it; an inline function is fine.
Parse errors show under the field and mark it invalid; line and column are added when the browser’s error message includes a position or line/column (Chromium and Firefox; Safari’s messages carry neither).
Format (2-space indent) and Minify are disabled while the text is empty or invalid.

Example source · show

import { JsonInput } from './json-input'

export const styles = {
  Default: () => <JsonInput className="w-[28rem]" defaultValue={'{"name":"marbleui","version":"2.4.0","private":true,"tags":["react","aria"]}'} />,
  Invalid: () => <JsonInput className="w-[28rem]" label="Webhook payload" defaultValue={'{\n  "event": "deal.won",\n  "amount": 48000,\n}'} />,
}

Source: packages/ui/src/json-input/json-input.tsx

Catalog