In this sectionAround the app
Across the tools
Around the app
The command palette, the keys, Settings, the theme, the phone layout, what is kept between visits, and why none of it leaves your browser.
Find any command
2 guidesMake it yours
2 guidesWork anywhere
3 guidesOn a phone
One pane at a time, a switch between them, and the menus folded into one. On this pageYour work is kept, per tab and across reloads
Which tool keeps what, for how long, and the two things that are never kept. On this pageIt all runs in your browser
No upload, no account, and exactly what happens when the network goes away. On this page
Find any command
The command palette
Input
{"service":"orders-api","replicas":3,"regions":["eu-west-1","us-east-1"]}Do
- Open Settings and set Indent to 2 spaces.
- Paste the document into the left pane.
- Press ⌘K on a Mac, or Ctrl+K on Windows and Linux, to open the palette.
- Type
indent.
Result
Indent with 3 spaces Settings
Indent with 4 spaces Settings
Indent with a tab Settings
Format Document ⌘⇧F / Ctrl+Shift+F
Settings… Settings
View one document WorkspaceThe palette is the editor’s: it opens on the editor and on the viewer and validator pages built on it, over whichever pane you used last, and the hint beside the box says which one. With nothing typed it lists every command under a heading for its group. Type, and the list becomes a ranking, with the group written beside each row instead.
A word at the start of a label ranks highest, then one inside it, then the extra words a row is known by — indent is one of Format’s. Last come labels that merely hold the letters in order, which is why View one document trails the list. The indent you already use has no row, since choosing it would change nothing. A command the page would refuse stays listed, with its reason in place of the group. The arrow keys move, Enter runs the row, and Esc closes it.
Keyboard shortcuts, and Mac or Windows · Linux
Input
The editor open on a laptop, and no memory of which key does what.
Do
- Click outside the document, then press
?— or press Keyboard shortcuts in the header. - At the top of the sheet, press Mac or Windows · Linux.
Result
A sheet of every key the page answers to, in groups from Everywhere to Split, drawn for the keyboard you picked: ⌘⇧F for Format on a Mac, Ctrl+Shift+F on the other.
Each page lists only the keys it honours. In the editor they are the palette, ⌘K; Find, ⌘F; saving the pane, ⌘S; opening a file, ⌘O; and Format, ⌘⇧F, followed by the keys of the Code, Tree and Table views and the divider. Convert and Generate keep ⌘O for opening a source, give ⌘S to downloading the result, and copy it with ⌘⇧Enter.
On Windows and Linux every ⌘ is Ctrl, so Find is Ctrl+F. The switch at the top of the sheet only changes how the keys are drawn, and the page remembers it; both modifiers work whichever one it shows. The question mark cannot open the sheet while you are typing into the document, where it is just a character, so click outside first, or use the header button.
Make it yours
Settings ⚙
Input
A team that indents with four spaces, and code that reads small on a large screen.
Do
- Press Settings in the header, or find it in the Menu on a phone.
- Under Indent, press 4.
- Beside Code text size, press + twice.
Result
Format and Sort keys now write four spaces a level, code is drawn at 16 px, and both choices are still there tomorrow, in every tab.
Settings holds three choices, each applied the moment you press it, with Reset to defaults underneath. Indent is two, three or four spaces or a tab. Code text size runs from 12 to 20 px. Wrap long lines folds a long line onto the next rather than scrolling sideways. In the editor two more rows choose the views each pane opens in, for a new tab and after New.
The choices belong to the browser rather than to one page: the indent also shapes what Convert writes and how the decoder lays out a token’s header. A new indent does not rewrite a document already open, though; Format does that, as Format, Minify and Sort keys shows. Indent, the text size and wrapping each have rows in the editor’s palette as well, for a change made without the mouse.
Dark and light
Input
An evening session, and a page that is too bright.
Do
- Press the sun at the right-hand end of the header.
Result
Every surface turns dark, the sun becomes a moon, and the site opens dark from now on until you press the moon.
There are two themes, and light is where everyone starts. The site does not follow your operating system’s dark mode, on purpose: a third, automatic state proved more puzzling than useful, so the button simply swaps one for the other, and its icon shows the theme you are in.
Your choice is kept in the browser and applied before the page first paints, so a dark page never flashes white on its way in. It covers every page, the Guide included, and the editor’s palette has a row for it, Switch to dark theme, which reads the other way round once you have switched.
Work anywhere
On a phone
Input
The editor on a phone, held upright.
Do
- Open the site at its usual address; there is nothing to install.
- Press Left or Right in the bar above the pane to change which one you see.
Result
One pane fills the screen at a time, with the mode above it and the rest of the band under More; the header keeps the tools and the theme and puts everything else in a menu.
Below tablet width the editor keeps both panes but shows one. The bar over it names each by its side and by the view it is in, so the right pane reads as Tree until you change it, and New moves to the end of that bar. Mode fills its own row, and More beside it holds Repair, Find and Generate code.
In the header the tool switch and the theme stay, and the rest — the JWT decoder, the features list, the Guide, the key sheet, feedback and Settings — folds into the Menu. Convert, Generate and the decoder need no switching: their cards stack in one column, source first, in the order you use them.
Your work is kept, per tab and across reloads
Input
Two browser tabs on the editor, a different document in each.
Do
- Reload both tabs.
Result
Each tab comes back holding its own document, its mode and its views, and neither has taken the other’s.
The editor gives each tab its own workspace, saved as you type in this browser’s storage: both documents, the mode, the views and the split. Reload and it is all back. Close the tab and it is still kept, for the five most recently used tabs, and the next time you open the editor you get the one you used last.
Convert and Generate keep their source, its name and the Path for the tab, and Generate its Root name too; a reload keeps them, and closing the tab lets them go. The choices you make in Options, Settings, the theme and the key sheet’s platform are remembered across visits. Two things are never kept anywhere: a token and a key pasted into the decoder. Clearing this site’s data in your browser forgets the rest.
It all runs in your browser
Input
A file of customer records that must not leave your machine.
Do
- Open the editor, then disconnect from the network.
- Paste the file in, repair it, search it and generate its types.
Result
All of it works, and none of it sends a byte of the file anywhere. A page you have not opened yet is the one thing that needs the network.
There is no server behind any tool. Parsing, repairing, searching, converting, generating code and checking a signature are all done by code the page brought with it, so there is no account, no upload limit and nothing to trust but your own browser. The fonts are served by the site itself, so even they make no call elsewhere.
Offline has one limit worth knowing. Each page downloads everything it can do when it loads, so the one in front of you keeps working with the connection gone. There is no offline copy of the rest of the site: a page you have never opened needs the network to arrive, and one you have may or may not come back from your browser’s cache, so open the tools you will need before you go. The only requests your data can cause are ones you ask for: From URL… fetches the address you type, and a web image in a document is shown only after you allow it.
About these guides
The other sections of the Guide each follow one tool. This one follows you between them. The header you see on the editor is the header on Convert, Generate and the JWT decoder; Settings changed on one page are changed on all four; and the answer to “where does my data go?” is the same wherever you ask it. Rather than repeat those things in every section, they are collected here.
The first job is finding a command you know exists but cannot see. The second is making the tools comfortable: the indent your team uses, a text size your eyes like, a dark page for the evening. The third is working wherever you happen to be, on a phone or a train, and knowing what will still be there when you come back.
Where next
Each tool has its own section, arranged by the job you came to do: the editor, Convert, Generate and the JWT decoder. Or skip the reading and Open the editor; the palette is one key away.