?
{ { ... 14 }
"name": "json-in-details",
"version": "0.12.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": { { ... 17 },
"@kazkadien/svelte": "^0.31.0",
"@sveltejs/adapter-auto": "^2.1.0",
"@sveltejs/adapter-cloudflare": "^2.3.3",
"@sveltejs/kit": "^1.24.1",
"@sveltejs/package": "^2.2.2",
"genson-js": "^0.0.8",
"html-to-image": "^1.11.11",
"idb": "^7.1.1",
"json-to-ts": "^1.7.0",
"prettier": "^2.8.8",
"prettier-plugin-svelte": "^2.10.1",
"publint": "^0.1.16",
"svelte": "^4.2.0",
"svelte-check": "^3.5.1",
"tslib": "^2.6.2",
"typescript": "^5.2.2",
"vite": "^4.4.9"
},
"types": "./dist/index.d.ts",
"main": "./dist/index.js",
"type": "module"
}
JSON Viewer
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.
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.