Editor & Playground

Set up a CodeMirror 6 JSONata editor with autocomplete, hover docs, and live diagnostics

What gets built

A browser-based JSONata editor with:

Syntax highlighting (instant, no WASM)
Context-aware autocomplete
Hover documentation with function signatures
Live diagnostics with JSONata error codes

The WASM module is 380 KB (145 KB gzipped).

Prerequisites

Node.js 18+ and a package manager
A frontend project that can import ES modules

Step 1 — Install

npm install codemirror @gnata-sqlite/codemirror

Step 2 — Syntax highlighting only (no WASM)

<div id="editor"></div>

import { EditorView, basicSetup } from "codemirror"
import { jsonata } from "@gnata-sqlite/codemirror"

new EditorView({
  extensions: [basicSetup, jsonata()],
  parent: document.getElementById("editor")!,
})

Type Account.Order.Product.Price — tokens highlight immediately.

Step 3 — Full setup with WASM LSP

The WASM files are bundled with @gnata-sqlite/react. Copy them into your public directory:

npm install @gnata-sqlite/react
npx @gnata-sqlite/react setup ./public

Use jsonataFull instead of jsonata:

import { EditorView, basicSetup } from "codemirror"
import { jsonataFull, initWasm } from "@gnata-sqlite/codemirror"

await initWasm("/gnata-lsp.wasm", "/lsp-wasm_exec.js")

new EditorView({
  extensions: [basicSetup, jsonataFull({ schema: "" })],
  parent: document.getElementById("editor")!,
})

Invalid expressions now show red underlines. Hover over functions for signatures. Ctrl+Space / Cmd+Space triggers autocomplete.

Step 4 — Schema for field autocomplete

Pass a JSON string describing the data shape:

const schema = JSON.stringify({
  fields: {
    Account: {
      type: "object",
      fields: {
        Name: { type: "string" },
        Order: {
          type: "array",
          fields: {
            Product: {
              type: "object",
              fields: {
                Price: { type: "number" },
                Quantity: { type: "number" },
              },
            },
          },
        },
      },
    },
  },
})

new EditorView({
  extensions: [basicSetup, jsonataFull({ schema })],
  parent: document.getElementById("editor")!,
})

Type Account. → suggests Name, Order. Type Account.Order.Product. → suggests Price, Quantity.

Step 5 — Build WASM from source (optional)

If you need to build from source instead of using the bundled files, install TinyGo and run:

make wasm

See Why TinyGo? for background on the build pipeline.

Try it live

gnata playground — try the editor in the browser now.

Next steps

Editor API reference — full API for @gnata-sqlite/codemirror
Why TinyGo? — build trade-offs

Editor & Playground

On this page