Forms

JsonEditor

Controlled free-form JSON text editor with native textarea fallback, parse feedback, and accessible field wiring.

import { JsonEditor } from '@lostgradient/cinder/json-editor';
formjsoneditor
01

Overview

Controlled free-form JSON text editing with a native textarea, parse feedback, and accessible field wiring.

Usage

svelte 
<script lang="ts">
  import JsonEditor from '@lostgradient/cinder/json-editor';

  let value = $state('{}');
</script>

<JsonEditor id="payload" label="Payload" {value} onValueChange={(next) => (value = next)} />
Live preview
02

When to use

Use when
  • Editing arbitrary JSON source while preserving the exact string in parent-owned state.
  • A lightweight native editor is preferable to shipping a code-editor runtime.
Avoid when
03

Examples

Controlled JSON editor

A controlled JSON text field with optional lazy syntax highlighting and parse feedback.

04

Props

Props for json-editor
NameTypeDefaultDescription
id required text Unique identifier used for the label and feedback relationships.
value required text Controlled JSON source text.
label required text Visible label associated with the native textarea.
description text Supporting text announced with the editor.
error text External validation error. Takes precedence over JSON parse feedback.
rows number 8 Number of visible text rows. Defaults to 8.
validFeedbackVisible boolean true Whether valid JSON should render an announced success message. Defaults to true.
highlight boolean false Enables a lazy syntax-highlighted view with inline parse-error annotation. Defaults to false.
onValueChange (value: string) => void Called with the proposed JSON source whenever the user edits the textarea.
autofocus boolean false
wrap 'hard''soft''off'undefinednull
onscroll UIEventHandler<T> | undefined | null
05

Accessibility

Tab
Moves focus out of the editor without trapping the keyboard.
Uses a native textarea with a programmatic label and announced parse feedback.