Code Editor

Installation#

npx shadcn@latest add https://ds.formance.com/r/code-editor.json

npm install shiki monaco-editor @shikijs/monaco lucide-react

Usage#

import { CodeEditor } from '@/components/code/code-editor';

const [value, setValue] = useState('{"key": "value"}');

<CodeEditor value={value} language="json" onChange={setValue} />;

Numscript Language#

The code editor ships with a custom TextMate grammar for Numscript — Formance's DSL for describing financial transactions. Set language="numscript" to enable syntax highlighting for keywords (send, source, destination), monetary literals ([USD/2 100]), account addresses (@world), variables ($amount), and more.

The grammar file is bundled with the code-themes dependency and registered automatically when the editor initializes.

Numscript Validator#

The numscript-validator companion package validates Numscript code against the Numscript playground API and surfaces errors as inline diagnostics in the editor.

npx shadcn@latest add https://ds.formance.com/r/numscript-validator.json

import {
  CodeEditor,
  type TDiagnosticsConfig,
} from '@/components/code/code-editor';
import { createNumscriptValidator } from '@/components/code/numscript-validator';

const diagnostics: TDiagnosticsConfig = {
  validate: createNumscriptValidator({
    balances: { 'orders:1234': { 'USD/2': 50000 } },
    variables: {},
    metadata: {},
  }),
};

<CodeEditor
  value={script}
  language="numscript"
  onChange={setScript}
  diagnostics={diagnostics}
/>;

The createNumscriptValidator accepts an optional context with balances, variables, and metadata to validate against — the same inputs the Numscript playground uses.

Validator Demo#

The example below starts with a syntax error (sendd instead of send). The error marker appears inline after a 500ms debounce. Fix the typo to see it clear.

Navigator#

The withNavigator prop adds a breadcrumb toolbar above the editor that parses JSON or YAML content into a navigation tree. Users can drill into nested sections and jump to the corresponding line in the editor.

<CodeEditor value={yamlContent} language="yaml" isReadonly withNavigator />

Examples#

Numscript#

Readonly#

Ledger Schema Validator#

diagnostics.validate is editor-agnostic — it can wrap anything that returns markers, including a JSON Schema validator. This example validates a ledger schema (YAML) against the canonical ledger schema hosted by this design system: it fetches the schema, compiles it with Ajv, and maps each error to a diagnostic. The .description on the client account is accepted, while the invalid resource on CLIENT_BALANCE (it must be one of transactions, accounts, logs, volumes) is flagged.

This is the same pattern Studio uses to lint ledger schemas — point the validator at the hosted URL instead of a bundled file, and the editor stays in sync with the published contract.