JSONotations is a premium, client-side JSON workspace designed for developers who demand superior visualization, security, and usability. It replaces basic online editors with a powerful, intuitive environment that works entirely in your browser.

• Interactive Editor: Real-time syntax highlighting, error detection, and automatic formatting/minification.
• Deep Visualization:
  • Tree View: Navigate complex structures with collapsible, searchable nodes.
  • Table View: Analyze arrays of objects in a clean, spreadsheet-like interface.
  • Visual Diff: Compare two JSON sets side-by-side with highlighted changes.
• Schema Inference: Automatically generate and preview JSON Schema from your data.
• Privacy First: 100% client-side processing. Your data never leaves your browser.
• Developer Tools: Keyboard shortcuts, export to CSV/PDF, and drag-and-drop file support.
• Premium UI: Modern dark-mode aesthetic with micro-interactions and smooth animations.

• Framework: React + TypeScript
• Styling: Tailwind CSS + Shadcn UI
• Icons: Lucide React
• Animations: Framer Motion
• Editor: CodeMirror 6

• Node.js 20+
• npm, pnpm, or bun

# Clone the repository
git clone https://github.com/art70x/JSONotation.git

# Navigate to the project
cd JSONotation

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:3000

# Create production build
npm run build

# Preview production build
npm run preview

• Shift + Alt + F: Format JSON
• Ctrl + S: Download JSON
• Alt + 1-5: Switch Editor Tabs (Editor, Tree, Table, Diff, Schema)

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

This project is open source and available under the MIT License.

• shadcn/ui – Provides the accessible, composable component system and design foundation that power the refined, production-grade UI.
• @uiw/react-codemirror – Powers the core editing engine through CodeMirror 6’s modular architecture, enabling structured JSON parsing, real-time syntax validation, extensible behaviors, and high-performance rendering.
• @unhead/react – Enables reactive and scalable document head management for dynamic metadata, improving maintainability and SEO control.
• Nuxpert – Inspired the project’s architecture, CI workflow, formatting standards, and Vite configuration.
• MeDo – Served as the original prototype foundation.

Made with ❤️ for the web development community