JSONMonkey

Turn any JSON file into a polished, tabbed visual editor — no code.

JSONMonkey is a Visual Studio Code custom editor that renders your JSON files as a themed, schema-aware form. Drop a tiny .jmonkey descriptor (also recognized as .jmon or .jmonk) next to your data, double‑click it, and you get pickers, selects, checkboxes, validation, tabs, search and one‑click schema generation — all styled to match your VS Code theme.

Highlights

🎨 Native VS Code look & feel — uses your theme variables, no external UI toolkit.
🗂️ Tabbed layout for large config files; flat layout for small ones.
🧩 Smart widgets — date / time / datetime pickers, selects, checkboxes, textareas, numbers, strings, arrays, nested objects.
✅ Live JSON Schema validation (drafts 2020‑12, 2019‑09 and 7) — Save is disabled while data is invalid.
🪄 Generate Schema — produces a JSON Schema from your existing data with one click.
✏️ Visual editors for everything — edit the data, the .jmonkey descriptor, and the JSON Schema, all without leaving the form view.
🔁 Native dirty / undo / Save All — every edit flows through VS Code's WorkspaceEdit so Ctrl+Z, Ctrl+S, Save All and the modified‑dot all work as you'd expect.
🔒 Strict CSP, no eval — uses a pure-runtime schema validator, no unsafe-eval in the webview.

Your first .jmonkey file (60 seconds)
Opening the visual editor
Generating a JSON Schema
Editing
.jmonkey descriptor reference
Validation
Toolbar reference
Full worked example
Tips & FAQ
Troubleshooting
License

Your first `.jmonkey` file (60 seconds)

Have (or create) a JSON file you want to edit, e.g. config.json:

{
  "general": { "app_name": "Acme",  "enabled": true },
  "schedule": { "start_time": "08:00", "end_time": "17:00" }
}

Create a descriptor next to it called config.jmonkey (the extensions .jmon and .jmonk work too). The minimum it needs is a name and a path pointing at your JSON file:
```
{
  "name": "Acme Config",
  "path": "config.json"
}
```
Open config.jmonkey — VS Code will offer the JSONMonkey editor automatically. Done!

💡 With no tabs, fields or defaults, JSONMonkey renders the whole document on a single page, inferring widgets from the value types. You can grow the descriptor as you need richer UI.

Opening the visual editor

JSONMonkey recognizes three file extensions: .jmonkey, .jmon and .jmonk — pick whichever you prefer; they behave identically.

There are three ways to open a descriptor file:

Double‑click the .jmonkey / .jmon / .jmonk file in the Explorer.
Right‑click the file → Open with… → JSONMonkey.
Run JSONMonkey: Open from the Command Palette.

The editor tab title comes from the descriptor's name field; the tab icon is JSONMonkey's logo.

Generating a JSON Schema

You don't have to hand-write a schema — JSONMonkey can generate one from your existing data.

Open your .jmonkey file in JSONMonkey.
Click Edit Config in the toolbar.
Click Generate schema.

What happens:

JSONMonkey infers a draft 2020‑12 schema from your current data (merging shapes across array items so it accepts every entry you already have).
The schema is written to disk:
- to the path in your existing schema field, or
- if schema is missing, to <descriptor‑name>.schema.json next to your .jmonkey file.
If a file already exists at that path, VS Code asks you to confirm the overwrite.
The schema field of your .jmonkey is updated automatically when it was missing.
The new schema is loaded and live‑validation kicks in immediately.

🧠 The generated schema is intentionally type‑only — no format keywords. This avoids common over‑strictness pitfalls (e.g. "format": "date" rejecting "2024‑01‑01 00:00:00"). The descriptor's datetimepicker / timepicker lists are still used to render the right pickers — they just don't need a matching format in the schema.

Editing

Edit fields in place — the data file becomes dirty (●) immediately.
× button next to a value → clear the value (set to null). Press + to bring the value back.
🗑 button → remove the entry entirely (deletes the key from the parent object, or the item from the array). Required keys (per schema) cannot be removed.
⧉ button on object/array items inside arrays → duplicate the item.
Add buttons appear for objects (with available schema properties) and arrays — for arrays without a schema, JSONMonkey infers the new item's shape from the first existing item so you can keep filling fields, not guess them.
Search at the top of the toolbar filters visible keys by name.
Expand all / Collapse all to walk large documents.
Save writes the file (Ctrl+S also works). Disabled while schema validation is failing.
Edit Config opens the descriptor in the same visual editor.
Edit Schema opens the JSON Schema (when present) in the same visual editor — no need to drop back to raw JSON.

`.jmonkey` descriptor reference

Only path is required. Everything else is optional and can be added gradually.

Field	Type	Purpose
`name`	`string`	Display name — shown as the editor tab title
`path`	`string`	Required. Path to the JSON data file, relative to the `.jmonkey`
`schema`	`string`	Path to a JSON Schema file. Enables validation‑gated Save
`tabs`	`array`	Splits the root object across tabs. Omit for a single flat page
`fields`	`object`	Widget hints (date/time pickers, selects, checkboxes, textareas)
`defaults`	`array`	Default values used when (re)creating keys

`tabs` — split the form across tabs

Each entry maps a top‑level key of your JSON file (field) to a tab labelled name.

"tabs": [
  { "name": "General",  "field": "general"  },
  { "name": "Schedule", "field": "schedule" },
  { "name": "Advanced", "field": "advanced" }
]

Use it when your top‑level object has a few logical groups; skip it for small files.

`fields` — widget hints

Tell JSONMonkey which input to render for a given key. Matching is by leaf key name, so a hint applies wherever that key appears in the tree.

"fields": {
  "datetimepicker": ["start_date", "end_date"],
  "timepicker":     ["start_time", "end_time"],
  "datepicker":     ["birth_date"],
  "checkbox":       ["enabled", "is_admin"],
  "textarea":       ["description", "notes"],
  "select": [
    {
      "field": "log_level",
      "options": [
        { "value": "debug", "label": "Debug" },
        { "value": "info",  "label": "Info"  },
        { "value": "warn",  "label": "Warn"  },
        { "value": "error", "label": "Error" }
      ]
    }
  ]
}

Key	Shape	Renders
`datetimepicker`	`string[]` of field names	date + time picker
`datepicker`	`string[]` of field names	date picker
`timepicker`	`string[]` of field names	time picker
`select`	`[{ field, options: [{ value, label }] }]`	dropdown
`checkbox`	`string[]` of field names	boolean toggle
`textarea`	`string[]` of field names	multi‑line text area

Widget resolution order

fields.* in the descriptor (by leaf key name).
JSON Schema hints (enum → select, format: date‑time → datetimepicker, etc.).
The JS runtime type of the current value.

`defaults` — seed values for new keys

When a key is (re)added or a null is converted back into a value, JSONMonkey needs a starting value. defaults lets you control that per‑key:

"defaults": [
  {
    "fields": ["start_date", "end_date"],
    "value": "2024-01-01 00:00:00"
  },
  {
    "fields": ["monday", "tuesday", "wednesday", "thursday", "friday"],
    "value": { "start_time": "08:00", "end_time": "17:00" }
  }
]

Each entry's value (primitive, object, or array) is used as the seed when one of the listed fields is recreated. You can repeat the same value across multiple field names — handy for weekly schedules, recurring shapes, etc.

Default value resolution order

First match in the descriptor's defaults[*].fields.
Schema default, then const, then enum[0].
For array items without a schema: the shape of the first existing item, with primitive leaves emptied.
The type's zero value ("", 0, false, {}, []).

Conventions

If you don't set schema, JSONMonkey also looks for these siblings of the data file:

<dataFile>_schema.json
<dataFile>.schema.json

So config.json will pick up config_schema.json automatically.

Validation

When a schema is loaded:

Every edit is re‑validated in the webview using @cfworker/json-schema — pure JavaScript, no eval, no unsafe-eval in the webview CSP.
Supported drafts: 2020‑12, 2019‑09, 7 (selected automatically from the schema's $schema URI).
When validation fails, a red banner lists each issue as <json‑pointer> – <message> and the Save button is disabled until you fix the data (or update the schema).

💡 The Edit Schema toolbar button lets you fix the schema visually without leaving JSONMonkey. The Output channel JSONMonkey also logs validation events for debugging.

Button	When visible	What it does
Save	always	Save the file you're currently editing (data, descriptor, or schema). Disabled while validation fails.
Edit Config	Data mode	Switch to editing the `.jmonkey` descriptor itself, in the same visual editor.
Edit Schema	Data mode, when schema is present	Switch to editing the JSON Schema, in the same visual editor.
Save Config / Save Schema / Discard	Config / Schema mode	Save or discard pending changes to the descriptor / schema.
+ Add schema field	Config mode, when descriptor has no `schema`	Inserts an empty `"schema": ""` field into the descriptor.
Generate schema	Config mode, when descriptor has no resolved schema	Generates a JSON Schema from the current data, writes it to disk, and (if needed) updates the descriptor's `schema` field. Requires both the descriptor and the data JSON to be loaded.

Full worked example

example1.jmonkey

{
  "name": "Example 1",
  "schema": "example_schema.json",
  "path": "test/example_data.json",
  "tabs": [
    { "name": "Tab 1", "field": "demo_tab_1" },
    { "name": "Tab 2", "field": "demo_tab_2" },
    { "name": "Tab 3", "field": "demo_tab_3" }
  ],
  "fields": {
    "datetimepicker": ["start_date", "end_date"],
    "timepicker":     ["start_time", "end_time"],
    "select": [
      {
        "field": "select_field",
        "options": [
          { "value": "option1", "label": "Option 1" },
          { "value": "option2", "label": "Option 2" },
          { "value": "option3", "label": "Option 3" }
        ]
      }
    ]
  },
  "defaults": [
    {
      "fields": ["start_date", "end_date"],
      "value": "2024-01-01 00:00:00"
    },
    {
      "fields": ["monday", "tuesday", "wednesday", "thursday", "friday"],
      "value": { "start_time": "08:00", "end_time": "17:00" }
    }
  ]
}

Try it

Clone the repo or copy the examples/example1 folder into your workspace.
Open example1.jmonkey — three tabs appear, each driving a different section of the data file.
Click Generate schema in Edit Config mode (if you remove the existing schema first) to see the generator in action.
Edit a date — note the validation banner reacts immediately.

Tips & FAQ

Can JSONMonkey edit any JSON file? Yes — it edits whatever your .jmonkey's path points at. The .jmonkey itself is just a small sidecar; your real data file stays a normal JSON file you can edit by hand at any time.

Do I have to write a JSON Schema? No. Without a schema you still get a usable form. Add a schema only when you want validation, better widget inference, or required enforcement.

Where does the generated schema go? By default, <descriptor‑name>.schema.json next to the .jmonkey file (or wherever descriptor.schema already points). VS Code prompts before overwriting.

Can I edit the underlying JSON file by hand while JSONMonkey is open? Yes — external changes are picked up automatically.

Does it work with Workspace Trust? Yes. JSONMonkey only reads/writes files referenced by your descriptor, the same way any custom editor would.

Is there an eval()? No. The webview CSP forbids unsafe-eval. Schema validation uses a pure‑JS validator (@cfworker/json-schema).

Troubleshooting

JSONMonkey editor is blank — open View → Output → JSONMonkey and Developer: Open Webview Developer Tools. Any error from the bundled webview will surface there.
Save button is greyed out — schema validation is failing. Check the red banner at the top.
"Open with…" doesn't list JSONMonkey — the file must end in .jmonkey, .jmon or .jmonk, or run JSONMonkey: Open from the Command Palette.
Validation complains about format: "date" — your data isn't YYYY‑MM‑DD. Either drop the format keyword (recommended; see Generating a JSON Schema) or use date-time with an ISO 8601 value.

License

MIT

JSONMonkey

CyberPunk

JSONMonkey

Highlights

Table of contents

Your first `.jmonkey` file (60 seconds)

Opening the visual editor

Generating a JSON Schema

Editing

`.jmonkey` descriptor reference

`tabs` — split the form across tabs

`fields` — widget hints

`defaults` — seed values for new keys

Conventions

Validation

Full worked example

Tips & FAQ

Troubleshooting

License

JSONMonkey

CyberPunk

JSONMonkey

Highlights

Table of contents

Your first .jmonkey file (60 seconds)

Opening the visual editor

Generating a JSON Schema

Editing

.jmonkey descriptor reference

tabs — split the form across tabs

fields — widget hints

defaults — seed values for new keys

Conventions

Validation

Toolbar reference

Full worked example

Tips & FAQ

Troubleshooting

License

Your first `.jmonkey` file (60 seconds)

`.jmonkey` descriptor reference

`tabs` — split the form across tabs

`fields` — widget hints

`defaults` — seed values for new keys