JSON Monkey

The friendliest way to edit JSON in VS Code. Open any .json file as a clean, schema-aware form — pickers, dropdowns, checkboxes, search, validation, tabs, schema generation, code generation for 11 languages (TypeScript, Go, Rust, Java, Kotlin, Swift, Scala, C#, PHP and Python), plus one-click import from XML / CSV and export to XML / YAML / CSV, all without writing a single line of config or code.

Right-click any .json → Edit with JSON Monkey. That's it. Customize later, only if you want to.

Why you'll like it

• 🚀 Zero setup — open any JSON file and start editing in a form.
• 🧩 Smart widgets — strings, numbers, checkboxes, dropdowns, arrays, nested objects, plus date / time / datetime pickers.
• ✅ Live JSON Schema validation — Save is blocked while data is invalid, so bad config never lands on disk.
• 🦄 Generate a JSON Schema from your existing data in one click.
• 🧑‍💻 Generate code — turn JSON into class / type definitions for TypeScript, Go, Rust, Java, Kotlin, Swift, Scala, C# (.NET), PHP, Python (classes), and Python (dataclasses).
• 📤 Export to XML, YAML or CSV — convert the file you’re editing into another format and pick where to save it.
• 📥 Import from XML or CSV — drop existing data into JSON Monkey and start editing in a form. Works on an empty .json file too, so you can start a brand-new JSON file from a spreadsheet or XML dump in seconds.
• 🗂️ Tabs, defaults, custom widgets — opt in per project by saving a small .jmonkey config file. Open any json, click *Edit Config', fill in the required configurations and click 'Save' to generate .jmonkey file
• 🔁 Native VS Code feel — Ctrl+Z, Ctrl+S, Save All and the dirty dot all work as you'd expect.
• 🧷 Key order preserved — your file's existing key order is kept on save, even when you rename keys.

Quick start

Edit any JSON in seconds

1. Right-click a .json file in the Explorer → Edit with JSON Monkey.
2. The file opens in a friendly form view. Edit fields, tick checkboxes, expand arrays.
3. Press Ctrl+S to save.

That's the whole flow. No .jmonkey file is created — JSON Monkey just opens your data and stays out of the way.

Want pickers, tabs, or defaults? Customize once.

The moment you want JSON Monkey to do more than "render this JSON" — say, use a datetime picker for start_date, group fields into tabs, or seed default values — you save a small .jmonkey config file next to your JSON.

1. In the open editor, click Edit Config in the toolbar.
2. Use the friendly form to add tabs, choose widget types per field, add a JSON Schema reference, set default values, etc.
3. Press Ctrl+S. JSON Monkey creates <yourfile>.jmonkey right next to your JSON.

From now on, opening either file gives you your customized editor. You can delete the .jmonkey any time to go back to the zero-config experience.

💡 Already have a .jmonkey file? Just double-click it (or use Open with… → JSON Monkey). Existing descriptors work exactly as before — nothing has changed for power users.

Starting from scratch (no JSON yet)

Don’t have any JSON to begin with? You can start from an empty file and import existing data into it:

1. In VS Code’s Explorer, New File → name it <filename>.json and leave it empty.
2. Right-click the new file → Edit with JSON Monkey. The form opens on an empty document.
3. Click the Import… dropdown in the toolbar → pick XML or CSV → choose your source file. JSON Monkey converts and fills the form.
4. Press Ctrl+S to save the resulting JSON.

Nothing is written to disk until you press Save, so you can review (and edit) the imported data first.

Table of contents

• Quick start
• Opening the editor
• Editing your data
• Customizing with .jmonkey
  • Structured Config editor
  • Settings tab
• Generating a JSON Schema
• Generating code from JSON
• Exporting to XML, YAML or CSV
• Importing from XML or CSV
• .jmonkey descriptor reference
  • tabs — split the form across tabs
  • fields — widgets and per-field defaults
  • Conventions
• Validation
• Toolbar reference
• Full worked example
• Tips & FAQ
• Troubleshooting
• License

Opening the editor

There are three ways in:

The editor tab title comes from the descriptor's name (when present) or the JSON file's name.

🆕 Empty .jmonkey? Opening an empty descriptor jumps straight into Config edit mode with empty General / Tabs / Fields sections, so you can build the descriptor from scratch without typing any JSON by hand.

Editing your data

• Edit fields in place — the file becomes dirty (●) immediately. Ctrl+S saves.
• × button next to a value → clear the value (sets it to null). Press + to bring it back.
• 🗑 button → remove the entry entirely (deletes the key, or the array item). 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, JSON Monkey 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 is disabled while schema validation is failing — you'll see a red banner explaining what's wrong.
• Edit Config opens the descriptor in the structured Config editor (see Customizing).
• Edit Schema opens the JSON Schema (when present) in the same visual editor — no need to drop back to raw JSON.
• Settings (gear icon) opens the JSON Monkey settings tab (e.g. Sort keys automatically).

Customizing with .jmonkey

The .jmonkey (or .jmon / .jmonk) file is a small JSON sidecar that tells JSON Monkey how to render your data: which widget to use for which field, how to group fields into tabs, what defaults to seed, where to find the JSON Schema.

You never have to write one by hand. Click Edit Config in the toolbar while editing a JSON file, fill in the form, and press Ctrl+S — JSON Monkey creates the file for you with the right shape.

When to add a .jmonkey

Structured Config editor

Clicking Edit Config opens a dedicated form with three always‑visible sections:

Each field entry combines what used to be split across the old per‑type fields object and the top‑level defaults array. A card exposes:

• a fields string list — the leaf key names this entry applies to (always an array, even for a single name),
• a type selector — (none), datetimepicker, timepicker, datepicker, select, checkbox, or textarea,
• an options editor (rendered only when type is select),
• a Set default_value checkbox — when on, a recursive value editor lets you author any JSON shape (string | number | boolean | null | list | object) for the default.

When type is omitted, JSON Monkey infers the widget kind from default_value (when present), then from the JSON schema, then from the runtime value.

Select entry — produced with one click:

{
  "fields": ["log_level"],
  "type": "select",
  "options": [
    { "value": "debug", "label": "Debug" },
    { "value": "info",  "label": "Info"  },
    { "value": "warn",  "label": "Warn"  },
    { "value": "error", "label": "Error" }
  ],
  "default_value": "info"
}

Datetimepicker with a shared default — one entry targets multiple field names:

{
  "fields": ["start_date", "end_date"],
  "type": "datetimepicker",
  "default_value": "2024-01-01 00:00:00.000"
}

Default‑only entry (no type) — widget inferred from default_value; useful for nested object/array seeds shared across multiple keys:

// Built entirely from the UI — string list of fields, object default_value
// with a nested list of numbers.
{
  "fields": ["monday", "tuesday", "wednesday", "thursday", "friday"],
  "default_value": {
    "start_time": "08:00",
    "end_time": "17:00",
    "breaks": [30, 60]
  }
}

First save creates the file. If you started by opening a .json directly, the very first time you press Ctrl+S in config mode JSON Monkey writes <yourfile>.jmonkey next to your JSON and re-opens the editor on it. Subsequent saves update that file in place.

Returning to data view. The bottom‑right button in config mode reads:

• Discard Edits while there are unsaved descriptor changes, or
• Back to Data when nothing is dirty and name + path are both filled in.

Settings tab

Click the gear icon in the toolbar to open the JSON Monkey Settings tab:

• Sort keys automatically — when on, object keys are displayed in alphabetical order; when off (default), keys are rendered in the order they appear in your JSON file. Either way, key insertion order is preserved on save, and renaming a key keeps it in its original slot.

Generating a JSON Schema

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

1. Open your file in JSON Monkey (a .json directly, or a .jmonkey).
2. Click Edit Config in the toolbar.
3. Click Generate schema.

What happens:

• JSON Monkey 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 <name>.schema.json next to your file.
• If a file already exists at that path, VS Code asks you to confirm the overwrite.
• The schema field of your descriptor 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.

Generating code from JSON

JSON Monkey can convert your JSON data into ready-to-use class / type definitions in a wide range of languages — perfect for bootstrapping models, DTOs or API clients from a sample payload.

1. Open your file in JSON Monkey (a .json directly, or a .jmonkey).
2. In Data mode, click Generate code in the toolbar.
3. Pick a target language from the dropdown and click Generate.
4. Copy the result into your project.

Supported languages

What you get

• Automatic class consolidation — objects with identical field shapes (e.g. every item in a 10 000-element array) are detected and merged into a single reusable class instead of being repeated.
• Idiomatic root handling — when your JSON's top level is an array, JSON Monkey emits an idiomatic root alias in each language (export type Root = Item[], type Root []Item, pub type Root = Vec<Item>, typealias Root = [Item], …) instead of wrapping it in a useless container class.
• Nullable / mixed types — nulls in sample data widen the corresponding fields to the language's nullable / optional equivalent.
• Big files stay responsive — generation runs after a short defer with a progress spinner, so the editor never feels frozen on multi‑megabyte JSON.

💡 You don't need a .jmonkey for this — code generation works directly from your JSON.

Exporting to XML, YAML or CSV

Need to hand your JSON to a tool that doesn’t speak JSON? JSON Monkey can convert the file you’re currently editing into another format and write it wherever you choose.

1. Open your file in JSON Monkey (a .json directly, or a .jmonkey).
2. In Data mode, pick a format from the Export… dropdown in the toolbar: XML, YAML, or CSV.
3. A Save As dialog appears, pre-filled with <yourfile>.xml / .yaml / .csv next to your source file. Adjust the location and confirm.

Format details

Good to know

• Validation-gated, like Save. The Export dropdown is disabled while schema validation is failing — invalid data can’t be exported, with the same tooltip as the Save button.
• No descriptor required. Export works on plain .json files; you don’t need a .jmonkey for any of the three formats.
• Nothing is overwritten silently. VS Code’s native Save As dialog handles the file choice — cancel anytime and nothing is written.
• One-way conversion. Export writes to a brand-new file; it never modifies the JSON you’re editing.

Importing from XML or CSV

Already have data in XML or CSV and want to edit it as JSON? JSON Monkey can read it in, convert it on the fly, and load it straight into the form view — replacing the current document content.

1. Open a JSON file in JSON Monkey (or create an empty .json and open it — see Starting from scratch).
2. In Data mode, pick a format from the Import… dropdown in the toolbar: XML or CSV.
3. Choose your source file in the Open dialog. JSON Monkey parses it, converts it to JSON, and renders the new data immediately. Press Ctrl+S when you’re ready to write it to disk.

Format details

Good to know

• Replaces existing data. Import overwrites the in-memory document. Press Ctrl+Z to undo and restore the previous content; nothing is written to disk until you press Ctrl+S afterwards.
• Always enabled in Data mode. Unlike Save / Export, Import is not gated by schema validation — you can use it to fix invalid data.
• Parse failures leave your data untouched. Malformed XML or CSV shows an error notification and the editor keeps its current content.
• No YAML import. Only XML and CSV are offered on the way in. (Export still supports YAML.)
• Pairs with Empty .json. You can create a new empty .json file in the Explorer, open it with Edit with JSON Monkey, and Import straight into it.

.jmonkey descriptor reference

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

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 — widgets and per-field defaults

fields is an array of entries. Each entry targets one or more leaf key names and can declare a widget type, supply a default_value, or both. Matching is by leaf key name, so an entry applies wherever that key appears in the tree.

"fields": [
  {
    "fields": ["start_date", "end_date"],
    "type": "datetimepicker",
    "format": "yyyy-MM-dd HH:mm:ss.SSS",
    "default_value": "2024-01-01 00:00:00.000"
  },
  {
    "fields": ["start_time", "end_time"],
    "type": "timepicker"
  },
  {
    "fields": ["birth_date"],
    "type": "datepicker"
  },
  {
    "fields": ["enabled", "is_admin"],
    "type": "checkbox"
  },
  {
    "fields": ["description", "notes"],
    "type": "textarea"
  },
  {
    "fields": ["log_level"],
    "type": "select",
    "options": [
      { "value": "debug", "label": "Debug" },
      { "value": "info",  "label": "Info"  },
      { "value": "warn",  "label": "Warn"  },
      { "value": "error", "label": "Error" }
    ],
    "default_value": "info"
  },
  {
    "fields": ["monday", "tuesday", "wednesday", "thursday", "friday"],
    "default_value": { "start_time": "08:00", "end_time": "17:00" }
  }
]

Datetime format tokens

Numeric, 24-hour, locale-independent. Anything outside a recognised token (and outside a '...' quoted block) is a literal separator. Use '' for a literal apostrophe.

Examples: yyyy-MM-dd HH:mm:ss.SSS, yyyy-MM-dd'T'HH:mm:ss, yyyy-'W'ww-u.

Note: the picker is minute-resolution — ss/SSS are written as zero on every edit because <input type="datetime-local"> doesn't expose sub-minute precision. Hand-edit the JSON for non-zero seconds/millis.

Widget resolution order

1. The first fields[] entry whose fields array contains the leaf key name and whose type (or default_value shape) implies a widget.
2. JSON Schema hints (enum → select, format: date-time → datetimepicker, etc.).
3. The JS runtime type of the current value.

Default value resolution order

1. The first fields[] entry whose fields contains the leaf key name and defines default_value.
2. Schema default, then const, then enum[0].
3. For array items without a schema: the shape of the first existing item, with primitive leaves emptied.
4. The type's zero value ("", 0, false, {}, []).

Conventions

If you don't set schema, JSON Monkey 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 — no descriptor needed.

Validation

When a schema is loaded:

• Every edit is re‑validated live.
• 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 JSON Monkey.

Toolbar reference

Full worked example

Suppose you have example_data.json you want to edit with pickers, tabs and a schema. You can either:

• Build it from the UI — open example_data.json with JSON Monkey, click Edit Config, fill in tabs / fields / pickers, click Generate schema, then Ctrl+S. JSON Monkey creates both example_data.jmonkey and example_data.schema.json for you.
• Hand-write it — drop a file like this next to your data:

example1.jmonkey

{
  "name": "Example 1",
  "version": "2",
  "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": [
    {
      "fields": ["start_date", "end_date"],
      "type": "datetimepicker",
      "format": "yyyy-MM-dd HH:mm:ss.SSS",
      "default_value": "2024-01-01 00:00:00.000"
    },
    {
      "fields": ["start_time", "end_time"],
      "type": "timepicker"
    },
    {
      "fields": ["monday", "tuesday", "wednesday", "thursday", "friday"],
      "default_value": { "start_time": "08:00", "end_time": "17:00" }
    },
    {
      "fields": ["select_field"],
      "type": "select",
      "options": [
        { "value": "option1", "label": "Option 1" },
        { "value": "option2", "label": "Option 2" },
        { "value": "option3", "label": "Option 3" }
      ]
    }
  ]
}

Tips & FAQ

Do I have to create a .jmonkey file? No. Just right-click any .json → Edit with JSON Monkey and you'll get a form view immediately. The .jmonkey only appears if you save customizations from the Edit Config screen.

Can JSON Monkey edit any JSON file? Yes — any valid JSON. Add a .jmonkey later if you want pickers, tabs, defaults or schema-gated validation.

Where does the .jmonkey file go? Right next to your JSON, named <yourfile>.jmonkey. If that name is already taken, JSON Monkey adds a -1, -2, … suffix.

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. The Generate schema button can build one for you.

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 JSON Monkey is open? Yes — external changes are picked up automatically.

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

Troubleshooting

• JSON Monkey editor is blank — open View → Output → JSON Monkey 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.
• "Edit with JSON Monkey" missing on a .json file — use Right-click → Open with… → JSON Monkey, or run JSON Monkey: 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