Forms

Code editor

JSON editing with highlighting, live parse errors and your own validation (e.g. the schema).

import { CodeEditor } from '@jsonresume/ui'Source(opens in a new tab)

Examples

resume.json with a schema check

Valid JSON

Show code

code-editor/resume.tsx

'use client';

import { CodeEditor, type Diagnostic } from '@jsonresume/ui';
import { useState } from 'react';

const initial = `{
  "basics": {
    "name": "Richard Hendriks",
    "label": "Programmer",
    "email": "richard@piedpiper.com"
  },
  "work": []
}`;

// Your own checks run after the JSON parses, e.g. schema validation.
function validate(value: string): Diagnostic[] {
  const doc = JSON.parse(value) as { basics?: { name?: unknown } };
  const at = value.indexOf('"basics"');
  return typeof doc.basics?.name === 'string'
    ? []
    : [
        {
          from: Math.max(at, 0),
          to: Math.max(at, 0) + 8,
          severity: 'error',
          message: 'basics.name must be a string',
        },
      ];
}

export default function CodeEditorResume() {
  const [value, setValue] = useState(initial);
  return (
    <CodeEditor
      label="resume.json"
      value={value}
      onChange={setValue}
      validate={validate}
      height="14rem"
    />
  );
}

Accessibility

The editor is labelled; a status line announces the number of problems.
Tab indents inside the editor; Escape then Tab moves focus out.

Props

Also accepts the attributes of the element CodeEditor renders.
Prop	Type	Default	Description
label required	string	–	Accessible name of the editor.
onChange required	(value: string) => void	–
value required	string	–
height	string	20rem
readOnly	boolean	false
validate	((value: string) => Diagnostic[])	–	Extra checks on valid JSON, e.g. schema validation. Return problems as diagnostics.