jsonic

Visual structured data editor with LCARS-themed UI, keyboard-first design, and multi-format support.

jsonic renders JSON, YAML, TOML, XML, and CSV as interactive, editable tree views — making structured data as easy to work with as a spreadsheet. Edit keys and values inline, drag-and-drop to reorder, add and remove fields from context menus, and validate against schemas — all without leaving the visual editor. A synchronized code editor pane shows the raw text in real time.

Built with Tauri 2 for native desktop performance on Windows and Linux, with Android and PWA targets for mobile and web.

---

Features

Visual Tree Editor

• LCARS-themed UI — depth-colored layer indicators with glow effects, rainbow bracket coloring across 8 nesting levels
• Inline editing — click any key or value to edit in-place; type-aware inputs for strings, numbers, booleans, and null
• Drag-and-drop — reorder nodes, reparent into containers, with visual drop indicators
• Ghost fields — transparent placeholder rows at the end of objects and arrays for adding new entries
• Context menu — right-click to insert, copy, delete, or change node types

Keyboard-First Navigation

• Arrow keys — navigate between nodes in the tree (Up/Down for siblings, Right to expand, Left to collapse/go to parent)
• Tab traversal — move between editable fields in reading order (key → value → next key); Shift+Tab reverses
• Modal editing — Enter to start editing a value, Escape to return to navigation mode
• Keyboard shortcuts — Ctrl+Enter to insert siblings, Alt+Up/Down to reorder, Delete to remove, Shift+F10 for context menu
• Every operation achievable by mouse has an equivalent keyboard path

Multi-Format Support

Format	Extensions	Library
JSON	.json, .jsonc	Native JSON.parse
YAML	.yml, .yaml	yaml
TOML	.toml	smol-toml
XML	.xml, .svg, .xhtml	fast-xml-parser
CSV	.csv, .tsv	papaparse

All formats parse into a unified document model. Open in one format, edit visually, save in another — the tree structure is preserved.

Code Editor

• Synchronized raw text pane powered by CodeMirror 6
• Syntax highlighting for JSON, XML, and more
• Edits in either pane update the other in real time
• Format and validate from the toolbar

Schema Validation

• Load a JSON Schema to validate your document
• Inline error markers in the tree view
• Click an error to navigate to the offending node

Search & Navigation

• Find keys and values across the entire document (Ctrl+F)
• JSONPath query support for precise navigation
• Find-and-replace across the tree
• Breadcrumb path bar showing the route to the focused node

---

Platforms

Platform	Format	Toolchain
Windows	.exe, .msi	Tauri 2 + NSIS
Linux	.deb, .rpm, .AppImage	Tauri 2
Android	.apk, .aab	Tauri 2 Mobile
Web	PWA (installable)	Vite + Workbox

---

Tech Stack

Layer	Technology
Application shell	Tauri 2 (Rust backend)
Frontend framework	SolidJS 1.9+
Build system	Vite 6
Styling	Tailwind CSS 4 + LCARS custom properties
Code editor	CodeMirror 6
Schema validation	Ajv
IDs	nanoid

---

Getting Started

Prerequisites

• Node.js 20+
• Rust (for Tauri desktop builds)
• Tauri CLI prerequisites for your OS

Development

# Install dependencies
npm install

# Start dev server (web only, hot reload)
npm run dev

# Start dev server with Tauri desktop window
npm run tauri dev

The dev server runs at http://localhost:1420.

Build

# Web build (outputs to dist/)
npm run build

# Desktop build (outputs to src-tauri/target/release/bundle/)
npx tauri build

# Android build
npx tauri android build

---

Project Structure

jsonic-v3/
├── src/                          # SolidJS frontend
│   ├── index.tsx                 # Mount point
│   ├── App.tsx                   # Root layout
│   ├── model/                    # Document model, operations, history, search
│   ├── formats/                  # Format plugins (JSON, YAML, TOML, XML, CSV)
│   ├── store/                    # Reactive state (document + UI)
│   ├── editor/                   # Visual tree editor components
│   ├── code/                     # CodeMirror wrapper
│   ├── toolbar/                  # MenuBar, Toolbar, StatusBar
│   ├── search/                   # Search panel, path breadcrumb
│   ├── schema/                   # Schema validation
│   ├── context/                  # Context menu
│   ├── modals/                   # About, Preferences, Instructions
│   ├── theme/                    # LCARS CSS
│   └── utils/                    # Keybindings, navigation, IDs, platform detection
├── src-tauri/                    # Tauri 2 Rust backend
│   ├── src/                      # Rust commands (file I/O)
│   ├── capabilities/             # Permission config
│   └── tauri.conf.json           # App identity, window, bundle config
├── public/                       # Static assets, PWA icons
├── version.txt                   # Version source of truth
├── CHECKLIST.md                  # Implementation task list
└── DOCS/ARCHITECTURE.md          # Architecture specification

---

Keyboard Shortcuts

Shortcut	Action
Ctrl+N	New document
Ctrl+O	Open file
Ctrl+S	Save file
Ctrl+Z	Undo
Ctrl+Y	Redo
Ctrl+F	Find / search
Ctrl+Shift+F	Format document
Ctrl+Shift+V	Validate document
Ctrl+Enter	Insert sibling after
Ctrl+Shift+Enter	Insert sibling before
Alt+↑ / Alt+↓	Move node up / down
Delete	Delete focused node
Shift+F10	Context menu
F1	Instructions / help
Enter	Enter edit mode
Escape	Exit edit mode / close overlay
Tab / Shift+Tab	Next / previous editable field
↑ / ↓	Navigate between nodes
→ / ←	Expand / collapse containers

---

Architecture

See DOCS/ARCHITECTURE.md for the full specification including:

• Architectural decisions with rationale
• Component and data flow diagrams
• Complete entity table (79 entities)
• Data model definitions

---

Versioning

Version follows semantic versioning (MAJOR.MINOR.PATCH). The single source of truth is version.txt at the project root. All platform manifests read from this file.

• MINOR auto-increments on every successful CI build
• PATCH resets to 0 on MINOR bump
• Android versionCode = MAJOR * 10000 + MINOR * 100 + PATCH

---

License

Copyright © 2026 Robin L. M. Cheung, MBA. All rights reserved.