Are you tired of accessing free websites just to format your json content? Me too. Besides the "data protection" issue sometimes we just want to have it formatted to move on.
According to ThoughtWorks in the tech radar 27 (item 76 under Tools) developers should hold the practice of formatting or sharing information in formatting tools that are not complying with data jurisdiction.
The full documentation lives at marabesi.github.io/json-tool/docs.
Its source is in the docs/ folder and it is built with
VitePress:
pnpm docs:dev # start the docs dev server
pnpm docs:build # build the docs into public/docsThe screenshots in the user manual are generated automatically with
Playwright and saved to docs/public/screenshots/:
pnpm docs:screenshots # regenerate the manual screenshots- Web Workers to the Rescue – How to Work with JSON Strings without Blocking User Interactions
- Announcing the JSON tool - A companion for formatting json content, focused in privacy
json-tool allows you to quick format json content with a click of a button, and much more:
- JSON content validation, it shows an error message warning invalid json
- Buttons to allow easy interaction with the clipboard (paste and copy to the clipboard)
- Search through the json string (offered by the code mirror editor)
- Upload a json file
- Resizable editors on the home, table and shape views, drag the divider (or use the left/right arrow keys) to change the width of each editor. The editor menus show icons only, hover over an icon to see what it does
Switch between views using the tabs in the header. The divider between the editors can be dragged (or moved with the left/right arrow keys) to resize them, and its position is kept while you switch views.
- Paste or type JSON in the left editor; the right editor shows the formatted result as you type.
- Turn on sync scroll in the header to keep both editors on the same relative line while scrolling.
- Toggle validate json in the header to show an error when the content is not valid JSON.
- Left toolbar (hover an icon to see its name): search in the JSON, paste from clipboard, upload a JSON file and delete all.
- Right toolbar: search in the result, space tabulation (indentation, 2 spaces by default), clean spaces, clean new lines, clean new lines and spaces and copy json.
The table view renders the JSON as a table:
- an array of objects becomes one row per element, with a column for every property found in the array;
- an array of simple values (strings, numbers, booleans) becomes a single
valuecolumn; - a single object becomes a list of key/value rows;
- nested objects and arrays are shown as smaller tables inside the cell.
Searching in the table — type in the search box to filter the rows. The match is case-insensitive and checks every column, including nested values. Search a specific column with column:value (for example index:0 keeps the rows where the index column matches 0); the column name is matched case-insensitively and can be abbreviated. Matching is fuzzy by default: the characters only need to appear in order, so mse matches Mouse, and this applies to both the column name and the value. Turn on Exact match to require the value to be exactly the term (ignoring case) instead of fuzzy matching — for example index:0 with exact match keeps only the rows where the index is 0, not 10. Only the rows that match stay visible, and No matching data is shown when nothing matches. The counter next to the search box shows how many rows are currently displayed (for example 2 rows) and updates while you type. Use full screen to expand the table and exit full screen to go back.
The shape view shows the JSON statistics: total objects, arrays, distinct properties, values, filled and empty values, the average number of properties per object and a breakdown by type. Every nested object and array gets the same statistics, with expand all / collapse all.
make before-push BUIL_APP=true START_APP=true RUN_E2E=true