JSON Online

JSON Online is a fast, browser-based JSON toolkit for developers.

Website: https://jsononline.app

This repository contains the Nuxt frontend for JSON Online, including the editor, formatter, validator, converters, large-file viewer, JSONPath tools, and the client-side encrypted sharing UI.

Features

• JSON editor with formatting, minifying, validation, and key sorting
• Tree viewer for exploring nested JSON
• JSON diff view
• JSONPath tester
• JSON Schema validator
• JSON to CSV / CSV to JSON
• JSON to XML / XML to JSON
• Large JSON viewer and troubleshooting pages
• PWA support for offline use
• Multi-language UI
• End-to-end encrypted share links

Tech Stack

• Nuxt 4
• Vue 3
• Tailwind CSS
• CodeMirror 6
• Nuxt i18n
• Cloudflare Pages deployment target

Privacy Model

Most JSON processing happens locally in the browser.

• Editor content, tabs, preferences, and received shared documents are stored in local browser storage (IndexedDB and localStorage).
• The share feature encrypts content client-side before upload.
• The decryption key is stored in the URL fragment and is not sent to the share API.

Share Feature

This repo is the frontend only.

The encrypted share workflow expects an external share API configured through NUXT_PUBLIC_SHARE_API_URL. The frontend sends encrypted payloads to that API and reads encrypted payloads back from it.

If you want to self-host sharing, you need a compatible backend service.

Getting Started

Prerequisites

• Node.js 20+
• Yarn 4+

Install

yarn install

Environment

Create a local env file, for example .env.local:

cp .env.example .env.local

Available public environment variables:

• NUXT_PUBLIC_TURNSTILE_SITE_KEY: Cloudflare Turnstile site key used by the share dialog
• NUXT_PUBLIC_SHARE_API_URL: share API base URL

The example file uses Cloudflare Turnstile test keys for local development.

Run Locally

yarn dev

Open the local URL shown by Nuxt in your browser.

Scripts

• yarn dev: start the local dev server
• yarn build: build the production app
• yarn generate: generate a static build
• yarn preview: preview the production build
• yarn deploy: build and deploy with Wrangler Pages
• yarn preview:wrangler: preview the Cloudflare Pages build locally
• yarn test: run the test suite once
• yarn test:watch: run tests in watch mode

Deployment

The project is configured for Cloudflare Pages.

yarn deploy

Relevant config files:

• nuxt.config.ts
• wrangler.toml
• pwa-assets.config.ts