JsonEditor

Controlled free-form JSON editing on a lazily loaded CodeMirror 6 editor. It adds line numbers, code folding, bracket matching, schema completion, inline syntax errors, a Format action, and a height that fits the content, and it keeps a native textarea behind it for form posting and as a fallback.

The editor runtime is a separate chunk. It loads through a dynamic import() when the first JsonEditor mounts, so a page without one never downloads it. Until it arrives, on the server, and if it fails to load, the textarea is the editor. The value, onValueChange, id, label, and form posting contract is the same in both modes, and the textarea carries any name or form attribute you pass, so the field posts whichever editor is showing.

Usage

<script lang="ts">
  import { JsonEditor } from '@lostgradient/cinder';

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

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

Empty values

An empty optional field is valid. It shows no error and no lint glyph, announces no "Valid JSON.", and reads "Not set" through its placeholder. Pass required to make an empty value an error again, or pass placeholder to replace the text.

Read-only and disabled

readonly keeps the field focusable and selectable and posts it with its form, but refuses edits and disables Format, in the editor and in the textarea fallback. disabled also removes it from the form post and from the tab order.

Required

required keeps the native constraint on the posted textarea after the editor mounts, so an empty required field blocks form submission. The textarea is hidden and cannot take focus, so the invalid-field focus is sent to the visible editor.

Height

The editor grows with its content, so a short value is not a large empty box. rows is the most lines it shows before it scrolls, and it defaults to 8.

Schema completion

Pass a JSON Schema as schema to complete property names and values. Completion follows properties, items, local $ref pointers, and allOf, anyOf, and oneOf, and it offers enum and const values and true or false for booleans. It never rejects what the user types, and a keyword it does not read is ignored.

import type { JsonEditorSchema } from '@lostgradient/cinder';

export const schema: JsonEditorSchema = {
  type: 'object',
  properties: {
    mode: { type: 'string', enum: ['fast', 'safe'] },
    retries: { type: 'number' },
  },
};

Then pass it to the component with schema={schema}.

Format

The Format button and Shift+Alt+F rewrite the document as JSON indented by two spaces. Both are disabled for empty or invalid JSON. Formatting parses and re-serializes the document, so digits beyond double precision are lost and duplicate keys collapse.