JSONPrism is a refracting tool for developers. It takes a single JSON input and disperses it into many target formats — like white light through a prism. Everything runs client-side, so your data never leaves your device.

• Client-side only — no server, no telemetry, no upload. Your JSON stays in your browser.
• Batch processing — up to 500 files at once (Phase 2).
• Smart shape detection — recognizes flat objects, arrays of objects, scalars; suggests the best target format.
• Per-format options — pretty-print, indentation, dialect (for SQL), alignment (for Markdown), and more.
• Dark + light themes — Prism Spectrum palette with violet / cyan / amber / rose accents.
• Responsive — designed for viewports ≥ 360 × 640. Smaller screens still work but may feel cramped; on mobile, Input and Output use a Tabs UI to give each panel full height. See docs/tested-viewports.md for the full device test matrix.
• EN + VI — bilingual interface out of the box. More languages welcome.
• Tauri desktop build — drag-and-drop file workflow, offline-first (Phase 2 milestone).

• Vite 8 + React 19 + TypeScript 5.7
• Tailwind CSS v4 + shadcn/ui (New York style, neutral base)
• CodeMirror 6 for the input editor (Phase 1 polish)
• PapaParse, js-yaml, smol-toml, fast-xml-parser for parsing/serialization
• i18next for translations, Zustand for state, Sonner for toasts
• Tauri 2 wrapper (Phase 2)

Requirements: Node.js 22 LTS or newer.

git clone https://github.com/poli0981/jsonPrism.git
cd jsonprism
npm install
npm run dev          # http://localhost:5173

JSONPrism also ships as a native desktop app via Tauri 2. The app uses the same React UI, with native OS dialogs and drag-drop hooked into the existing batch flow.

Additional requirements:

• Rust toolchain (rustup) with the stable channel
• Platform build deps:
  • Windows: Visual Studio Build Tools (C++ workload) + WebView2 (preinstalled on Windows 11)
  • macOS: Xcode Command Line Tools (xcode-select --install)
  • Linux: libwebkit2gtk-4.1-dev, libappindicator3-dev, librsvg2-dev, patchelf, libssl-dev

Generate icons once (uses Tauri's CLI to render the SVG to PNG/ICO/ICNS):

npm run tauri:icon

Run in dev mode (Vite + Tauri window with hot reload):

npm run tauri:dev

Build native bundles:

npm run tauri:build

Output:

• Windows → src-tauri/target/release/bundle/msi/*.msi + nsis/*-setup.exe
• macOS → src-tauri/target/release/bundle/dmg/*.dmg + macos/*.app
• Linux → src-tauri/target/release/bundle/appimage/*.AppImage + deb/*.deb

Automated releases: pushing a v* tag triggers .github/workflows/release.yml, which builds for all platforms in parallel and creates a draft GitHub release.

The components.json is preconfigured. Add components on demand:

npx shadcn@latest add button input textarea tabs select card dialog sheet \
  dropdown-menu switch badge progress tooltip sonner resizable

src/
├── app/                 # Router + global providers
├── components/
│   ├── ui/              # shadcn components (added on demand)
│   ├── layout/          # Header, Footer, ThemeToggle
│   ├── converter/       # Workspace, panels, format picker
│   └── common/          # ErrorBoundary, LanguageSwitcher
├── converters/          # One module per target format
│   ├── types.ts         # Converter interface
│   ├── registry.ts      # Lookup table
│   └── *.ts             # Per-format implementations
├── hooks/               # Custom hooks
├── i18n/                # Translations (en, vi)
├── lib/                 # detect, theme, utils, sample
├── pages/               # Home, About
├── styles/              # globals.css (Tailwind + theme tokens)
└── main.tsx

Each format is a self-contained module implementing the Converter interface:

import type { Converter } from './types';

interface MyFormatOptions {
  indent: 2 | 4;
}

export const myFormatConverter: Converter<MyFormatOptions> = {
  meta: {
    id: 'myformat',
    labelKey: 'formats.myformat',
    extension: 'myf',
    mimeType: 'application/x-myformat',
    phase: 1,
    ready: true,
  },
  defaultOptions: { indent: 2 },
  convert({ data }, options) {
    try {
      const output = serialize(data, options);
      return { ok: true, output };
    } catch (err) {
      return { ok: false, error: (err as Error).message };
    }
  },
};

Then register it in src/converters/registry.ts and add label keys to src/i18n/locales/*.json.

See docs/ROADMAP.md for the full phase plan.

Pull requests welcome — please read CONTRIBUTING.md first. PRs that match the auto-ignored patterns described there (suspicious code, off-topic preamble, no description, etc.) get closed without review.

For bug reports and feature requests, use GitHub Issues. For security vulnerabilities, use the private Security Advisory flow.

Hang out, ask questions, or follow updates:

• Discord — dev community
• X (Twitter) — @SkullMute0011
• Bluesky — @skullmute0011.bsky.social
• Mastodon — @skullmute1122@mastodon.social
• Telegram — @SkullMute0011
• YouTube — @SkullMute

Substantial parts of JSONPrism's code, tests, translations, and docs were drafted with Claude Chat and Claude Code (Opus 4.7, 1M context). See DISCLAIMER.md for the full AI-assist disclosure. Translation quality for non-English locales is best-effort and contributions from native speakers are welcomed.

If JSONPrism is useful to you, consider sponsoring the maintainer via any of the channels in .github/FUNDING.yml: GitHub Sponsors, Ko-fi, Buy Me a Coffee, Patreon, or PayPal.

Apache License 2.0 — © 2026 Kokone (@poli0981).