In this sectionEditor
Guide to a workspace
Editor
The workspace at the front of the site: paste a document, read it as code, a tree, a table or a graph, search it, repair it and edit it.
Get a document in and out
8 guidesOpen and save a document
Every way a document gets into a pane — pasted, dropped, opened from a file, fetched from a URL or loaded as a sample — and every way one leaves again.
Read it
6 guidesFour ways to read a JSON document
Four ways to look at one document, what each is good at, and the folding, wrapping and node counts they share.
Fix it
6 guidesRepair broken JSON
One press turns a JavaScript object, a Python dictionary, an answer from a model or a pile of log lines into JSON that parses — and refuses when guessing would be worse.
Search it
9 guidesFind and query JSON
Search a document for text, a pattern or a JSONPath query, then narrow the view to the matches or take them away as a document of their own.
Edit it
7 guidesEdit a document
Change a value, add or delete a key, switch a type, reorder a list — in the text, in the tree, in the table or on the graph, each as one undo.
Compare and check it
6 guidesOne document or two: the editor’s four modes
What the four modes under Mode do, which one to be in for the job you have, and what survives a switch between them.
Make something from it
3 guidesTypes, classes or a schema
The editor’s Generate panel and the Generate page are one engine; the panel works on the pane in front of you. On this pageA CSV, TSV or Markdown table
The Table view’s export writes whichever level you are looking at. On this pageYAML, XML, CSV or SQL
The editor never converts; the Convert link in the header carries the document across. On this page
Make something from it
The editor is for working on a document; turning it into something else happens next door, and each of the three cards below says where. None of the three sends the document anywhere but another page of this site, in the same tab.
Types, classes or a schema
Input
A sample response in the left pane, and a project that needs a type for it.
Do
- Press Generate in the editor band.
- Pick a language along the top, such as TypeScript, or a provider under Structured output.
Result
A panel slides in over the right pane with the code for the left document, rewritten as you edit it, and Copy and Download at its foot.
The panel behind Generate is the same engine as the Generate page, working on the pane the band names instead of on a source of its own. It has the ten languages as tabs, the three providers under Structured output, and a Root name that starts from the name above the pane, so renaming a pasted document first saves renaming the type afterwards.
What the panel cannot do is read YAML, XML or CSV, since the editor holds JSON; its link to the Generate page covers that case. Every option and every target is explained once, with an example each, in the Generate section, so it is not repeated here. With JSON Schema chosen, the panel gains one button the page does not have, Validate with this, which puts the schema in the right pane in Schema mode.
A CSV, TSV or Markdown table
Input
An array of orders in the left pane, wanted in a spreadsheet or a README.
Do
- Switch the right pane to Table.
- Press Export in the pane toolbar, choose CSV, TSV or Markdown, and press Download.
Result
A file of the level the grid is showing, one row per record and a column per key, with a header row on top.
Export belongs to the Table view because a table is what it writes: it takes the level the grid is showing, not the whole document, so drill into a nested array first when that is the part you want. CSV and TSV come with a header row and an optional first column of row labels; Markdown is padded so it reads as a table in plain text too.
The choices are remembered for next time. The Table page works through an export at two levels and shows what each format writes, byte for byte, including a record that is missing a key and a cell holding an object.
YAML, XML, CSV or SQL
Input
A JSON config in the left pane that has to be committed as YAML.
Do
- Press Convert in the header, beside Editor.
- Set To to YAML.
Result
Convert opens with the document as its source, under the same name, and the YAML is written beside it as soon as To changes.
The editor never converts anything, on purpose: it keeps the text you gave it, and Convert is the page with the options a conversion needs. So the way across is the Convert half of the toggle in the header, which takes the document the band is acting on with it. Over YAML, CSV or XML the pane’s format chip offers Open in Convert as well, already on the right pair.
Coming back is one press too: Open JSON in Editor under Convert’s result. Which values come back quoted, how XML decides on arrays and what SQL makes of a nested object are all in the Convert section.
About these guides
The editor is the page at the front of the site, and it is where a document you are working on lives. Paste it in, or open a file, and the left pane holds the text while the right holds a second view of it: a tree you can fold, a table of any array of objects, or a graph of how the parts connect. Everything else — searching, repairing, reformatting, comparing two files, generating types — happens around that pair of panes, without the document ever leaving your browser.
These guides are arranged by what you came to do rather than by which button does it. That is on purpose. A control has one name; a job has several, and the name you would reach for depends on what went wrong. If you have a file that a parser rejected, you are not looking for a page called Repair so much as for a way to make it valid, and the heading above says that instead. Each job leads to a page that opens with a worked example: the exact document to paste, the presses to make, spelled as the editor spells them, and the result you should get, down to the counter and the status line.
Every example on those pages is checked against the engine that runs in the app, not written from memory, so the result printed in a guide is the result you will see. Under each one there is Try it in the editor, which opens the editor with that document already in the left pane, so nothing has to be copied by hand.
What the two panes are for
The editor always shows two panes, and the strip of controls between them and the header — the band — says how they relate. In Mirror, the default, both panes are views of one document: edit the text on the left and the tree on the right follows, and a search marks its matches in both at once. In Compare, each pane holds a document of its own and the differences between them are marked down the gutter. View gives a single document the whole width, which is what you want on a laptop screen with a deep tree, and Schema puts data on the left and a JSON Schema on the right and validates one against the other.
Knowing which of those you are in explains most of what the editor does differently from one moment to the next. Repair acts on the pane you last worked in, and the band names it before you press. Extract needs a second pane to write into, so from Mirror it moves you to Compare first. Format can act on one pane or on both, depending on how the pair is linked. None of that is hidden: the band is showing the mode, and the status bar says what just happened in a full sentence.
Things worth knowing before you start
Nothing you open is uploaded. The parser, the search, the repair and the code generators are all JavaScript running in this page, so a document with customer data or credentials in it is as safe here as it is in a local text editor. The page keeps working with the network disconnected, and the guides are written on the assumption that you might be following them offline.
Your work is kept. Both panes, the mode and the view are saved per tab and come back after a reload, so a stray refresh does not cost you the document you were part-way through. Two tabs keep two separate documents.
Everything is one undo. Repair, Format, Minify, Sort keys, a drag in the tree, an extract into the other pane: each lands as a single change, so ⌘Z on a Mac or Ctrl+Z on Windows and Linux puts the document back as it was. That is what makes it reasonable to press a button and find out what it does, which is how these guides expect to be read.
The keyboard reaches most of it. ⌘K opens the command palette, which is the fastest way to find a command whose button you cannot place; ⌘F opens the Find bar for the pane your caret is in; ⌘O opens a file and ⌘S downloads one. The ⌨ button in the header lists the rest, with a Mac and a Windows · Linux column.
Where a document lives while you work on it
Nothing here is a project or a workspace you have to set up. A document arrives by being pasted, dropped on the page, opened from a file or loaded from a URL, and it stays in the pane until you replace it. There is no save step that matters: what is on screen is the document, and Save writes a copy to your downloads folder when you want one to keep.
The name above each pane is editable, and it is not decoration. It is how the two panes are told apart in Compare, it is the file name a download gets, and the code generators read it to propose a name for the root type they write. Renaming a pasted document before generating types is often quicker than renaming the interface afterwards.
The chip beside the name says which format the text was recognised as. When that is not JSON — a YAML file dropped in, say, or an XML response pasted — it is a link across to Convert rather than a warning: the editor itself never converts anything, so that one trip is the whole story.
Open the editor and paste something in, or start with Open and save a document if you are new to it and Repair broken JSON if what you have does not parse yet.
What the editor shares with the other tools — the palette on ⌘K, the shortcut sheet, Settings and the theme — is explained once, in Around the app.