# json4u **Repository Path**: necho-dev/json4u ## Basic Information - **Project Name**: json4u - **Description**: Fork from loggerhead/json4u for backup, Thanks! - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-06-23 - **Last Updated**: 2026-06-23 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

JSON For You

The best JSON visualization and processing tool.

Try it now · 中文网址

## Features - Graph and Table view modes. - Structured and text comparisons. - Validate with error context. - Nested parsing. - Supporting [jq](https://jqlang.github.io/jq). - Import and export CSV file. - Well-designed and easy-to-use UI.
## Roadmap - [x] Improve performance to support large files (>= 1mb). - [x] Only render visible nodes in graph mode. - [x] Optimize performance of table mode (see [discussion](https://github.com/loggerhead/json4u/discussions/55)). - [ ] ~~Use wasm in web worker for parsing (use rust)~~. - [ ] ~~Consider [changing the editor to Ace](https://medium.com/miro-engineering/how-we-integrated-a-code-editor-on-the-miro-canvas-a41e0eff7f21).~~ - [x] Improve interoperability between left and right panels. - [x] Support search in graph mode (synchronize reveal between left and right panels). - [ ] ~~Support search via JSON path (synchronize reveal)~~. - [x] Support modifications in view mode. - [ ] ~~Support synchronize fold and unfold between left and right panels~~. - [x] Support displaying the key count of an object/array node after folding. - [ ] Add a group API to support file upload and retrieval. - [ ] Support share with an expiration date. - [ ] Support auto upload local files to server. - [ ] Provide a command line tool ([#24](https://github.com/loggerhead/json4u/issues/24)). - [ ] Provide vscode plugin. - [ ] Support preprocessing via jq before fetch. - [ ] Integrating AI to provide certain functions (under research). - [ ] Integrating basic AI capabilities in server side. - [ ] Experience enhancement - [x] Support [JSON HERO](https://jsonhero.io/) like value preview - [x] Support for timestamp and date strings. - [x] Support URL parsing. - [x] Support image preview. - [ ] ~~Support for previewing leaf nodes at the same level.~~ - [ ] Support jsonc and jsonl. - [ ] Design the UI for jsonl. - [ ] Support collapsing blocks with no differences in comparison results. - [ ] Change the switch to dropdown menu in comparison button. - [ ] Support key comparison for object nodes. - [ ] Support operations at the node dimension. - [ ] Support copy a node. - [ ] Support delete a node. - [ ] Consider supporting the ability to move a node. - [ ] Consider supporting the elevation of node levels. ## Setup 1. `git clone --depth 100 https://github.com/loggerhead/json4u` 2. Copy `.env.example` to `.env` and adjust values for your deployment. 3. Run `pnpm install` in repo's root folder. 4. Run `pnpm dev` to run the development server (respects `PORT` in `.env`, default `3113`). 5. Open the URL from `NEXT_PUBLIC_APP_URL` in your browser (default [http://localhost:3113](http://localhost:3113)). 6. Make changes to the code and see the result in the browser. ## Self-hosted Deployment ### Environment variables Copy [`.env.example`](.env.example) to `.env`. For a minimal self-hosted editor deployment: - Set `PORT` and `NEXT_PUBLIC_APP_URL` to match your listen address (default port `3113`, e.g. `http://localhost:3113`). - Keep `NEXT_PUBLIC_ENABLE_AUTH`, `NEXT_PUBLIC_ENABLE_BILLING`, and `NEXT_PUBLIC_ENABLE_STATISTICS` as `false` unless you configure Supabase / Lemon Squeezy. - Leave `SENTRY_DSN` empty to disable error reporting. See `.env.example` for the full list of options. ### Docker Compose（推荐，适配 1Panel 定时更新） 项目根目录已提供 [`docker-compose.yml`](docker-compose.yml)，与现有 knowledge-sso 部署脚本模式一致。 **首次部署：** ```bash cd /opt/1panel/apps/json4u # 你的实际路径 cp .env.example .env # 编辑 PORT（宿主机映射）、NEXT_PUBLIC_APP_URL 等 docker compose up -d --build ``` 容器内固定监听 `3113`，宿主机端口由 `.env` 的 `PORT` 控制（映射为 `${PORT}:3113`）。健康检查：`GET /api/health` → `{"status":"ok"}`。 **定时更新脚本**见 [`scripts/deploy.sh`](scripts/deploy.sh)，在 1Panel 计划任务中配置： ```bash PROJECT_DIR=/opt/1panel/apps/json4u GIT_BRANCH=main bash /opt/1panel/apps/json4u/scripts/deploy.sh ``` `git pull` 后有变更时执行 `docker compose up -d --build`，逻辑与你现有的 knowledge-sso 脚本相同。 > **关于滚动更新：** compose 已配置 `deploy.update_config.order: start-first`，与 rpa-products-docs 相同——更新时先启动新容器、再停止旧容器。单副本场景下可缩短空窗；修改 `NEXT_PUBLIC_*` 后仍需 `--build` 重新构建镜像。 **构建说明：** `NEXT_PUBLIC_*` 在镜像构建时写入静态资源，修改后必须 `docker compose up -d --build`。`.env` 中 `PORT` 仅影响宿主机映射，容器内固定 `3113`。 **构建加速（推荐开启 BuildKit，1Panel/Docker 新版默认已开）：** | 优化项 | 效果 | |--------|------| | `pnpm store` 缓存挂载 | lockfile 未变时，`deps` 阶段通常 **数秒～十几秒**（不再重复下载） | | `.next/cache` 缓存挂载 | 仅源码变更、依赖未变时，**build 阶段**明显加速 | | `PNPM_REGISTRY=https://registry.npmmirror.com` | 国内 **首次构建** 下载依赖更快 | ```bash # .env 中取消注释 PNPM_REGISTRY 后构建 docker compose build --no-cache # 仅首次验证 docker compose up -d --build # 日常更新 ``` `package.json` / `pnpm-lock.yaml` 不变时，Docker 会复用 `deps` 层；配合 cache mount，服务器定时 `git pull && docker compose up -d --build` 耗时会大幅下降。 ### Docker（手动） Build with build args (defaults suit a local editor-only deployment): ```bash docker build -t json4u \ --build-arg APP_URL=http://localhost:3113 \ --build-arg PORT=3113 \ . docker run --env-file .env -p 3113:3113 json4u ``` `PORT` in `.env` controls the container listen port (default `3113`). The `-p` host mapping should match. For a full configuration, pass env at build and runtime: ```bash docker build -t json4u --env-file .env --build-arg PORT=3113 . docker run --env-file .env -p 3113:3113 json4u ``` ### CI workflows Official GitHub Actions workflows are archived under [`_github/`](_github/). To re-enable them on GitHub, rename `_github/` back to `.github/`. ### Tests - Unit tests: `pnpm test` (Vitest, `tests/unit/`) - E2E tests: `pnpm e2e` (Playwright, `tests/e2e/`) If you want to test billing webhooks locally: 1. Install whcli: `npm install -g @webhooksite/cli`. 2. Get token from [webhook.site](https://webhook.site/). 3. Run `whcli forward --target=http://localhost:3113 --token=TOKEN_YOU_GET` ## Contribution Guide I'm really excited that you are interested in contributing to JSON For You. Before submitting your contribution, please make sure to take a moment and read through the following guide: 1. Search for the `TODO` keyword in the code first. If it's found, then you can work base on it directly. 2. Otherwise: - If you want to add a new feature, provide a convincing reason to add this feature. Ideally, you should open a suggestion issue first and have it approved before working on it. - If fixing bug, provide a description of the bug in the PR. - Other minor changes that don't affect the logic of the code, such as fixing typos, translating comments into English, and adding comments, are all welcome. Just submit a PR. 3. I wish to keep JSON For You lightweight and fast. Please being aware of the number of npm dependencies and their size and don't add **unnecessary** dependencies. 4. Run `pnpm test` to make sure your code pass the core tests. ## Acknowledgment - Famous library that most people know: [React](https://react.dev/), [Tailwind CSS](https://tailwindcss.com/), [Next.js](https://nextjs.org/), [Zustand](https://zustand-demo.pmnd.rs/) and [Zod](https://zod.dev/). - [React Flow](https://github.com/xyflow/xyflow): Extensible and customizable library for building interactive graphs. - [next-intl](https://github.com/amannn/next-intl): An out-of-the-box i18n library for Next.js that considers almost all of your usage scenarios. - [Vitest](https://vitest.dev/): A blazing fast unit testing framework for JavaScript. - And all the developers who contributed to open source! ## License [Apache](./LICENSE) License © 2022-Present [loggerhead](https://github.com/loggerhead)