Universal JSON Editor

🧠 Built entirely with Claude Opus 4.5

A powerful desktop application for editing JSON files with schema support. Built with Electron, React, and TypeScript.

Human Foreword

This app was created entirely with Claude Opus 4.5, probably the best model I've used for code generation. The reason I wanted an application like this was to quickly be able to edit JSON files that are output by Unreal Engine's data table export function. This app serves that purpose perfectly, but could also be very useful for any use-case where one would prefer a graphical interface over plain text. Updates and fixes to this application will most likely be done by a human, while new features will most likely be executed by AI. If you wish to contribute to this project please keep that guideline in mind. AI is often known to introduce faulty code especially when trying to fix existing issues, and thus it is best for that sort of work to be done with a human touch.

Features

Core Functionality

• Desktop App: Built with Electron for native desktop experience
• Multiple Projects: Work on multiple JSON files/schemas in isolated workspaces
• Schema Management: Create, edit, and import JSON schemas
• Data Editor: User-friendly interface for editing JSON data

Schema Support

• All JSON Types: String, Number, Boolean, Object, Array, Null
• Nested Objects: Full support for nested object schemas with recursive editing
• Array Items: Define schemas for array item types
• Field Validation: Optional min/max, patterns, required fields

User Experience

• Focus Mode: Drill down into nested objects to edit them in isolation
• Breadcrumb Navigation: Navigate back up through nested structures
• Card & Table Views: Switch between card view and table view for data
• Search: Filter data items with text search
• Dark/Light Mode: Toggle between dark and light themes

File Operations

• Import JSON: Import existing JSON files and auto-infer schema
• Export/Save: Save to original file or export to new location
• Save As: Create copies of your data

Screenshots

Installation

# Install dependencies
npm install

# Run in development mode
npm run dev

# Build for production
npm run build

# Start the built app
npm start

# Package for distribution
npm run package

Development

Project Structure

src/
├── main/                  # Electron main process
│   ├── main.ts           # Main entry point, IPC handlers
│   └── preload.ts        # Preload script for IPC bridge
├── renderer/             # React frontend
│   ├── components/
│   │   ├── common/       # Reusable UI components
│   │   ├── editor/       # Data editing components
│   │   ├── layout/       # Layout components
│   │   └── schema/       # Schema editing components
│   ├── contexts/         # React contexts for state
│   ├── hooks/            # Custom React hooks
│   └── utils/            # Utility functions
└── shared/               # Shared types between main/renderer

Tech Stack

• Electron: Desktop application framework
• React 18: UI library
• TypeScript: Type-safe JavaScript
• Tailwind CSS: Utility-first CSS framework
• Vite: Fast build tool

Key Components

• ProjectContext: Manages project state, CRUD operations
• ThemeContext: Handles dark/light mode switching
• SchemaEditor: Visual editor for JSON schemas
• DataEditor: Card/table views for editing data
• DataItemFocusView: Focused editing for nested structures

Usage

Creating a New Project

1. Click "New Project" in the sidebar
2. Enter a project name and optional description
3. Use the Schema tab to define your data structure
4. Switch to Data tab to add and edit items

Importing JSON

1. Click "Import JSON" in the sidebar
2. Select a JSON file
3. The schema will be auto-inferred from the file structure
4. Edit the schema or data as needed

Editing Nested Objects

1. In the Data tab, click on an object field to open focus view
2. Use breadcrumb navigation to move between levels
3. Click "Back to list" to return to the full data view

Exporting Data

• Click "Save" to save to the original file location
• Click "Save As" to choose a new location

For Unreal Engine Data Tables

This editor is particularly useful for Unreal Engine data tables exported as JSON:

1. Export your data table from Unreal as JSON
2. Import the JSON file into a new project
3. Edit the data with the visual interface
4. Save and re-import into Unreal

Releases

This project uses GitHub Actions for automated builds. When a new release is created on GitHub:

1. Windows (.exe) and macOS (.dmg) builds are automatically generated
2. Build artifacts are uploaded to the release

Creating a Release

1. Go to Releases on GitHub
2. Click Draft a new release
3. Create a new tag (e.g., v1.0.1)
4. Add release notes
5. Click Publish release
6. Wait for the GitHub Actions workflow to complete
7. The installer files will be automatically attached to the release

Manual Building

# Build and package locally
npm run build
npm run package

# Output will be in the release/ directory

License

MIT

Credits

• assetwave for "code brackets" icon from Flaticon.com