JSONLab is a modern, feature-rich web-based JSON editor designed for developers who work with JSON.
It provides a editing experience with powerful tools for viewing, editing, formatting, validating, repairing, querying, and comparing JSON.
JSONLab is intentionally built with zero frameworks using 100% Vanilla JavaScript, CSS, and HTML5.
- JSONLab
- Monaco Editor: Powered by Monaco (the engine behind VS Code).
- Multiple Views: Text, Tree, Table
- Multiple Layout: View, edit, compare, query
- Formatting & Validating
Open the app and start typing JSON directly in the editor. The Monaco editor provides real-time syntax highlighting and error indicators. Use the editor toolbar to switch between Text, Tree, and Table views.
- Click Format to prettify your JSON.
- Click Compact to minify it.
- Click Validate to check for syntax errors. Errors are shown inline with the line number.
- Click Repair to automatically fix common issues like trailing commas or single-quoted strings.
Switch to Split Mode from the header. Use the → button on the left panel to copy content to the right, or the ← button on the right panel to copy left. Drag the center splitter to resize the panels.
Switch to Compare Mode. The left and right editor contents are loaded into a Monaco Diff Editor. A change summary panel below the diff view lists all additions, deletions, and modifications.
Switch to Query Mode. The current active editor content is loaded into the input panel. Choose your query engine (JMESPath, JSONPath Plus, or JSONQuery) and type your expression — results update automatically as you type, and the transformation is applied to the main editor live.
Each editor panel has its own Import button. You can load:
.jsonfiles — loaded and auto-formatted..csvfiles — a dialog prompts for the delimiter, then converts to a JSON array.- Remote JSON via the URL button.
Click Export in the editor toolbar to download the current content as data.json.
| Shortcut | Action |
|---|---|
Ctrl/Cmd + Shift + F |
Format JSON |
Ctrl/Cmd + D |
Toggle dark/light theme |
Ctrl/Cmd + Z |
Undo |
Ctrl/Cmd + Shift + Z or Ctrl/Cmd + Y |
Redo |
Standard Monaco editor shortcuts (find, replace, multi-cursor, etc.) are also available in Text mode.
Install dependencies and start the local development server:
npm install
npm run devGenerate an optimized production build in the dist/ folder:
npm run buildYou can preview the production build locally:
npm run preview- Editor: Monaco Editor
- Icons: Lucide
- JSON Repair: jsonrepair
- JMESPath: jmespath
- JSONPath Plus: jsonpath-plus
- JSONQuery: jsonquerylang
- Fork the repository and create a feature branch.
- Make your changes and ensure
npm run lintpasses with no errors. - Run
npm run buildto verify the production build succeeds. - Open a pull request with a clear description of your changes.
Do not introduce frontend frameworks or runtime npm dependencies. JSONLab's architecture is intentionally framework-free. New features should follow the same patterns already established in the codebase:
- New UI components → plain JavaScript class or object literal that creates its own DOM nodes.
- New operations → pure functions added to the relevant
utils/module. - New editor behaviors → methods on
JsonEditoror the appropriateeditor/module. - Styling → CSS variables and rules in
styles.css, not inline styles or a utility framework.
If a feature genuinely cannot be built without a library, open a discussion issue first before adding any dependency.
For code style, the project uses Prettier with automatic import organization — running npm run lint:fix will format your code to match the project conventions.