+ 
+
## Visualize JSON into interactive graphs
JSON Crack is a tool for visualizing JSON data in a structured, interactive graphs, making it easier to explore, format, and validate JSON. It offers features like converting JSON to other formats (CSV, YAML), generating JSON Schema, executing queries, and exporting visualizations as images. Designed for both readability and usability.
-* **Visualizer**: Instantly convert JSON, YAML, CSV, XML, and TOML into interactive graphs or trees in dark or light mode.
+* **Visualizer**: Instantly convert JSON, YAML, CSV, and XML into interactive graphs or trees in dark or light mode.
* **Convert**: Seamlessly transform data formats, like JSON to CSV or XML to JSON, for easy sharing.
* **Format & Validate**: Beautify and validate JSON, YAML, and CSV for clear and accurate data.
* **Code Generation**: Generate TypeScript interfaces, Golang structs, and JSON Schema.
@@ -55,12 +55,19 @@ JSON Crack is a tool for visualizing JSON data in a structured, interactive grap
-### Built With
+## Integrations
-- [Next.js](https://nextjs.org/?ref=jsoncrack.com)
-- [React.js](https://reactjs.org/?ref=jsoncrack.com)
-- [Reaflow](https://reaflow.dev/?ref=jsoncrack.com)
-- [Monaco Editor](https://github.com/suren-atoyan/monaco-react)
+- [VS Code Extension](https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode)
+- [npm Package (`jsoncrack-react`)](https://www.npmjs.com/package/jsoncrack-react)
+
+## Contributing
+
+- Found a bug or missing feature? Open an issue on [GitHub Issues](https://github.com/AykutSarac/jsoncrack.com/issues).
+- Want to contribute code or docs? Start with our [contribution guide](./CONTRIBUTING.md).
+
+## Sponsors & Support
+
+If you find JSON Crack useful, you can support the project by using [ToDiagram](https://todiagram.com).
## Stay Up-to-Date
@@ -78,8 +85,8 @@ To get a local copy up and running, please follow these simple steps.
Here is what you need to be able to run JSON Crack.
-- Node.js (Version: >=18.x)
-- Pnpm _(recommended)_
+- Node.js (Version: >=24.x)
+- pnpm (Version: >=10)
## Development
@@ -104,20 +111,53 @@ Here is what you need to be able to run JSON Crack.
pnpm install
```
-4. Run the project
+4. Run the web app
```sh
- pnpm dev
+ pnpm dev:www
# Running on http://localhost:3000/
```
+### Useful Commands
+
+From repository root:
+
+```sh
+# Web app
+pnpm dev:www
+pnpm build:www
+
+# VS Code extension
+pnpm dev:vscode
+pnpm build:vscode
+pnpm lint:vscode
+pnpm lint:fix:vscode
+
+# All workspaces
+pnpm dev
+pnpm build
+pnpm lint
+```
+
+`pnpm build:www` is the production build command used in GitHub Actions deployment.
+
+### Debug VS Code Extension
+
+1. Open repository root in VS Code.
+2. Press `F5`.
+3. Select `Run VSCode Extension (apps/vscode)` when prompted.
+4. In the Extension Development Host window, open a `.json` file and run:
+ `JSON Crack: Enable JSON Crack visualization`.
+
### Docker
-🐳 A [`Dockerfile`](Dockerfile) is provided in the root of the repository.
+🐳 Docker assets are in `apps/www`.
If you want to run JSON Crack locally:
```console
+cd apps/www
+
# Build a Docker image with:
docker compose build
@@ -129,7 +169,7 @@ docker compose up
## Configuration
-The supported node limit can be changed by editing the `NEXT_PUBLIC_NODE_LIMIT` value in the `.env` file at the project root.
+The supported node limit can be changed by editing `NEXT_PUBLIC_NODE_LIMIT` in `apps/www/.env`.
diff --git a/apps/vscode/.env b/apps/vscode/.env
new file mode 100644
index 00000000..ed7b099e
--- /dev/null
+++ b/apps/vscode/.env
@@ -0,0 +1 @@
+PUBLIC_URL=./
\ No newline at end of file
diff --git a/apps/vscode/.eslintrc.json b/apps/vscode/.eslintrc.json
new file mode 100644
index 00000000..155ef38a
--- /dev/null
+++ b/apps/vscode/.eslintrc.json
@@ -0,0 +1,42 @@
+{
+ "root": true,
+ "parser": "@typescript-eslint/parser",
+ "parserOptions": {
+ "ecmaVersion": 6,
+ "sourceType": "module"
+ },
+ "plugins": ["@typescript-eslint",
+ "unused-imports",
+ "prettier"
+],
+ "extends": [
+ "eslint:recommended",
+ "prettier",
+ "plugin:@typescript-eslint/recommended"
+ ],
+
+ "rules": {
+ "@typescript-eslint/consistent-type-imports": "error",
+ "unused-imports/no-unused-imports": "error",
+ "@typescript-eslint/no-explicit-any": "off",
+ "prettier/prettier": "error",
+ "space-in-parens": "error",
+ "no-empty": "error",
+ "no-multiple-empty-lines": "error",
+ "no-irregular-whitespace": "error",
+ "strict": ["error", "never"],
+ "linebreak-style": ["error", "unix"],
+ "quotes": ["error", "double", { "avoidEscape": true }],
+ "semi": ["error", "always"],
+ "prefer-const": "error",
+ "space-before-function-paren": [
+ "error",
+ {
+ "anonymous": "always",
+ "named": "never",
+ "asyncArrow": "always"
+ }
+ ]
+ },
+ "ignorePatterns": ["build", "public", "scripts", "node_modules", "webpack.config.js"]
+}
diff --git a/apps/vscode/.gitignore b/apps/vscode/.gitignore
new file mode 100644
index 00000000..b9b6195c
--- /dev/null
+++ b/apps/vscode/.gitignore
@@ -0,0 +1,3 @@
+node_modules/
+build/
+*.vsix
\ No newline at end of file
diff --git a/apps/vscode/.prettierignore b/apps/vscode/.prettierignore
new file mode 100644
index 00000000..e6dc4992
--- /dev/null
+++ b/apps/vscode/.prettierignore
@@ -0,0 +1,9 @@
+.github
+.next
+node_modules/
+out
+public
+*-lock.json
+tsconfig.json
+build
+jsoncrack
\ No newline at end of file
diff --git a/.prettierrc b/apps/vscode/.prettierrc
similarity index 100%
rename from .prettierrc
rename to apps/vscode/.prettierrc
diff --git a/apps/vscode/.vscode/extensions.json b/apps/vscode/.vscode/extensions.json
new file mode 100644
index 00000000..57dbdae4
--- /dev/null
+++ b/apps/vscode/.vscode/extensions.json
@@ -0,0 +1,5 @@
+{
+ // See http://go.microsoft.com/fwlink/?LinkId=827846
+ // for the documentation about the extensions.json format
+ "recommendations": ["dbaeumer.vscode-eslint", "amodio.tsl-problem-matcher"]
+}
diff --git a/apps/vscode/.vscode/launch.json b/apps/vscode/.vscode/launch.json
new file mode 100644
index 00000000..c9425c9d
--- /dev/null
+++ b/apps/vscode/.vscode/launch.json
@@ -0,0 +1,21 @@
+// A launch configuration that compiles the extension and then opens it inside a new window
+// Use IntelliSense to learn about possible attributes.
+// Hover to view descriptions of existing attributes.
+// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+{
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "name": "Run Extension",
+ "type": "extensionHost",
+ "request": "launch",
+ "args": [
+ "--extensionDevelopmentPath=${workspaceFolder}"
+ ],
+ "outFiles": [
+ "${workspaceFolder}/build/**/*.js"
+ ],
+ "preLaunchTask": "build extension"
+ }
+ ]
+}
diff --git a/apps/vscode/.vscode/settings.json b/apps/vscode/.vscode/settings.json
new file mode 100644
index 00000000..321ef01b
--- /dev/null
+++ b/apps/vscode/.vscode/settings.json
@@ -0,0 +1,10 @@
+// Place your settings in this file to overwrite default and user settings.
+{
+ "files.exclude": {
+ "build": false
+ },
+ "search.exclude": {
+ "build": true
+ },
+ "typescript.tsc.autoDetect": "off"
+}
diff --git a/apps/vscode/.vscode/tasks.json b/apps/vscode/.vscode/tasks.json
new file mode 100644
index 00000000..0c5789de
--- /dev/null
+++ b/apps/vscode/.vscode/tasks.json
@@ -0,0 +1,21 @@
+// See https://go.microsoft.com/fwlink/?LinkId=733558
+// for the documentation about the tasks.json format
+{
+ "version": "2.0.0",
+ "tasks": [
+ {
+ "label": "build extension",
+ "type": "shell",
+ "command": "pnpm run build",
+ "group": {
+ "kind": "build",
+ "isDefault": true
+ }
+ },
+ {
+ "label": "watch extension",
+ "type": "shell",
+ "command": "pnpm run watch"
+ }
+ ]
+}
diff --git a/apps/vscode/.vscodeignore b/apps/vscode/.vscodeignore
new file mode 100644
index 00000000..a5951143
--- /dev/null
+++ b/apps/vscode/.vscodeignore
@@ -0,0 +1,20 @@
+.vscode/**
+.vscode-test/**
+.github/**
+.turbo/**
+node_modules/**
+scripts/**
+src/**
+.gitignore
+.env
+.prettierignore
+.prettierrc
+.pnpm-lock.yaml
+webpack.config.js
+tsconfig.extension.json
+vsc-extension-quickstart.md
+yarn.lock
+**/tsconfig.json
+**/.eslintrc.json
+**/*.map
+**/*.ts
diff --git a/apps/vscode/LICENSE.md b/apps/vscode/LICENSE.md
new file mode 100644
index 00000000..e6a7cd2e
--- /dev/null
+++ b/apps/vscode/LICENSE.md
@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2025 Aykut Saraç
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
\ No newline at end of file
diff --git a/apps/vscode/README.md b/apps/vscode/README.md
new file mode 100644
index 00000000..e8ad94fe
--- /dev/null
+++ b/apps/vscode/README.md
@@ -0,0 +1,33 @@
+ Too large to render ({count} nodes, limit is {max})
+ )} +/> +``` + +## Imperative API (ref) + +```tsx +import { useRef } from "react"; +import { JsonCrack, type JsonCrackRef } from "jsoncrack-react"; + +export function WithRef({ json }: { json: string }) { + const ref = useRef