

  
    
    {
    { ... 14 }
  
  "name": "json-in-details",
"version": "0.17.0",
"license": "MIT",

  
    "repository":
    {
    { ... 2 },
  
  "type": "git",
"url": "https://github.com/diogenesofweb/json-in-details.git"
  },

"description": "Simple JSON viewer",

  
    "keywords":
    [
    [ ... 4 ],
  
  "json",
"json-display",
"json-view",
"json-viewer"
  ],

"homepage": "https://github.com/diogenesofweb/json-in-details",

  
    "scripts":
    {
    { ... 11 },
  
  "dev": "vite dev",
"build": "vite build",
"preview": "vite preview",
"package": "svelte-kit sync && svelte-package && publint",
"prepublishOnly": "npm run package",
"prepub": "npm version minor && npm run package",
"pub": "npm publish && git push && git push --tags",
"check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check .",
"format": "prettier --plugin-search-dir . --write ."
  },



  
    "exports":
    {
    { ... 2 },
  
  

  
    ".":
    {
    { ... 2 },
  
  "types": "./dist/index.d.ts",
"default": "./dist/index.js"
  },

"./styles.css": "./dist/styles.css"
  },



  
    "files":
    [
    [ ... 3 ],
  
  "dist",
"!dist/**/*.test.*",
"!dist/**/*.spec.*"
  ],



  
    "devDependencies":
    {
    { ... 18 },
  
  "@kazkadien/svelte": "^0.32.0",
"@sveltejs/adapter-auto": "^3.2.2",
"@sveltejs/adapter-cloudflare": "^4.7.0",
"@sveltejs/kit": "^2.5.18",
"@sveltejs/package": "^2.3.2",
"@sveltejs/vite-plugin-svelte": "^3.1.1",
"genson-js": "^0.0.8",
"html-to-image": "^1.11.11",
"idb": "^8.0.0",
"json-to-ts": "^2.1.0",
"prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.6",
"publint": "^0.2.9",
"svelte": "^4.2.18",
"svelte-check": "^3.8.4",
"tslib": "^2.6.3",
"typescript": "^5.5.4",
"vite": "^5.3.4"
  },

"types": "./dist/index.d.ts",
"main": "./dist/index.js",
"type": "module"
  }

JSON-in-details

Free online JSON viewer, formatter and converter

Better JSON search

Press COLLAPSE icon .
Press Ctrl+F.
Browser will auto expand matched nodes.

Keymaps (Vim inspired)

h | ArrowLeft - Move focus to the parent node.
j | ArrowDown - Move focus to the next sibling node.
k | ArrowUp - Move focus to the previous sibling node.
l | ArrowRight - Move focus to the child node.
c - Fold all child nodes.
e - Unfold all child nodes.
y - Copy node content.
p - Copy node path.

Convert JSON

Converting JSON to JSON Schema is done with genson-js.
Converting JSON to Typescript interfaces is done with json-to-ts.
Converting JSON to Golang structs is done with json-to-go.

Why to use this app?

Elegant UI:

Foldable and filterable and focusable nodes.
Show node path on focus and hover.
Configurable clickable links.
Light and dark theme.

Functionality:

Filter nodes.
Collapse all nodes.
Expand all nodes.
Save JSON.
Copy JSON.
Copy node.
Copy node path.
Switch between formatted and raw data.
Sticky panels.
Converting JSON.
(Shift-)Tab navigation.
Keymaps (Vim inspired).
History.
New JSON entry via file upload, fetch URL or insert JSON string.
JSON screenshot (JSON to image .jpeg).

What is JSON ?

JSON (JavaScript Object Notation) is a lightweight data-interchange format that is easy for humans to read and write, and easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language Standard and is completely language independent. JSON is built on two structures: a collection of name/value pairs and an ordered list of values. It can be used with various programming languages and supports objects, arrays, strings, numbers, true/false, and null values. JSON is widely supported and can be used for data interchange between different programming languages.