๐งฉ JsonBoard Pro
JsonBoard is a local-first, zero-setup visual database for your JSON files. Get a spreadsheet-like GUI to edit JSON data without leaving your project.

Skip the complexity of Drizzle, Prisma, or SQLite for small projects. No more manual JSON editing in VS Code or downloading-uploading from online tools. Just run npx jsonboard
and get a full-featured GUI that feels like Google Sheets meets phpMyAdmin.
๐ Read Full FAQ & Use Cases | ๐ Quick Start | ๐ก Real-World Examples
โก Quick Start
One Command Setup
npx jsonboard
npx jsonboard --dir ./my-data
npx jsonboard --port 8080
npx jsonboard --no-open
npm install -g jsonboard
Command Line Options
jsonboard --help
โจ Features
๐ Smart JSON Detection
- ๐ Auto-scan current directory - No more looking for
/data
folder
- ๐ Recursive file detection - Finds JSON files in subdirectories
- ๐ซ Gitignore-aware - Automatically excludes
node_modules
, .next
, .git
, etc.
- โก Instant validation - Only shows valid JSON files
- ๐ง Smart port handling - Auto-detects port conflicts (3000 โ 3001 โ 3002...)
๐ฏ Developer-Focused Interface
- ๐ Spreadsheet-like editing - Edit JSON arrays like database tables
- ๐ Dual view modes - Toggle between Table View and Raw JSON Editor
- ๐ File metadata display - See file sizes, record counts, modification dates
- ๐ Relative path display - Clear file organization and hierarchy
- ๐พ Real-time auto-save - Changes save directly to your files
- ๐จ Modern responsive UI - Works on desktop, tablet, and mobile
๐ ๏ธ Professional Features
- โ Full CRUD operations - Create, read, update, delete records
- ๐ Search and filtering - Find data quickly across all files
- ๐ Auto-ID generation - Smart ID assignment for new records
- ๐ง Smart data handling - Handles nested objects, arrays, and different types
- ๐ 100% local - Your data never leaves your machine
- ๐ Zero configuration - Works with any framework or project structure
๐ฏ Perfect For Developers
๐ Rapid Development Scenarios
- ๐ฅ MVP Development - Get proof-of-concept running in minutes
- ๐งฉ Data Modeling - Quickly design and iterate on data structures
- ๐ Analytics Dashboards - Prototype dashboards with JSON data sources
- ๐๏ธ Content Management - Manage blog posts, docs, or product catalogs visually
- ๐ API Mocking - Instantly create and edit mock API responses
- ๐งโ๐ป Team Collaboration - Share JSON data files with teammates using Git
- ๐ ๏ธ Configuration Management - Edit app settings, feature flags, environment configs
- ๐งช Testing Data - Create and update test fixtures for automated tests
๐จโ๐ป Developer Types Who Love JsonBoard
- Frontend Developers who want to avoid backend complexity
- Full-Stack Developers who need quick data management
- Junior Developers learning without SQL complexity
- Indie Developers building solo projects efficiently
- Agency Developers creating client prototypes quickly
- Open Source Contributors managing project data simply
๐๏ธ Project Types & Frameworks
- Static Site Generators (Gatsby, Next.js, Nuxt, Hugo, Jekyll)
- JAMstack Applications (React, Vue, Svelte, Angular)
- Prototypes & MVPs (Any framework, any stack)
- Content-Heavy Sites (Blogs, portfolios, documentation)
- Small Business Apps (Inventory, CRM, project management)
- Educational Projects (Tutorials, courses, examples)
๏ฟฝ Why JsonBoard vs. Alternatives?
โ
0-minute setup | โ Hours of config | โ Account setup | โ Poor dev integration |
โ
Git-friendly | โ Migration complexity | โ External dependency | โ No version control |
โ
Visual + Code | โ Query language | โ Limited customization | โ Not developer-focused |
โ
Free forever | โ Server costs | โ Monthly fees | โ Feature limitations |
โ
Offline-first | โ Network dependency | โ Internet required | โ Cloud dependency |
๐ซ No More Database Complexity
- โ No Drizzle setup - Skip ORM configuration and schema management
- โ No Prisma migrations - Avoid complex database migrations and client generation
- โ No SQLite files - No binary database files in your repo
- โ No connection strings - No database servers, ports, or authentication
- โ No SQL knowledge required - Visual interface for everyone
๐ Real-World Examples
๐จ Portfolio Website
Manage your projects, skills, and experience visually:
portfolio/
โโโ data/
โ โโโ projects.json
โ โโโ skills.json
โ โโโ experience.json
โ โโโ testimonials.json
Perfect for: Freelancers, developers showcasing work, agencies updating portfolios
๐ Blog & Content Sites
Content management without the CMS complexity:
blog/
โโโ data/
โ โโโ posts.json
โ โโโ authors.json
โ โโโ categories.json
โ โโโ featured.json
Perfect for: Personal blogs, company blogs, documentation sites, news sites
๐๏ธ E-commerce Prototypes
Build product catalogs quickly:
store/
โโโ data/
โ โโโ products.json
โ โโโ categories.json
โ โโโ inventory.json
โ โโโ promotions.json
Perfect for: MVP development, client demos, prototype testing, small businesses
๐ฎ Indie Game Development
Manage game data without databases:
game/
โโโ data/
โ โโโ levels.json
โ โโโ characters.json
โ โโโ items.json
โ โโโ leaderboard.json
Perfect for: Indie developers, game jams, prototype testing, balance tweaking
๐ Small Business Tools
Quick business applications:
business/
โโโ data/
โ โโโ customers.json
โ โโโ invoices.json
โ โโโ inventory.json
โ โโโ employees.json
Perfect for: Small businesses, freelancers, local services, consultants
๐ฅ๏ธ Screenshots & Demo
Table View - Spreadsheet-like Editing
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ ๐งฉ JsonBoard Pro - users.json (4 records, 2.1 KB) โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ # โ id โ name โ email โ role โ โ๏ธ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโค
โ 1 โ 1 โ John Doe โ john@example.com โ admin โ ๐๏ธ โ
โ 2 โ 2 โ Jane Smith โ jane@example.com โ user โ ๐๏ธ โ
โ 3 โ 3 โ Bob Wilson โ bob@example.com โ editor โ ๐๏ธ โ
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ
โ โ Add Row โ
Raw JSON View - Full JSON Editor
[
{
"id": 1,
"name": "John Doe",
"email": "john@example.com",
"role": "admin",
"created_at": "2025-01-01T00:00:00Z"
}
]
File List View - Project Overview
๐ /your-project (5 JSON files found)
๐ posts.json 4 records 3.2 KB Blog posts
๐ users.json 12 records 1.8 KB User accounts
๐ products.json 89 records 15.4 KB Product catalog
๐ config.json 1 record 0.5 KB App settings
๐ testimonials.json 6 records 2.1 KB Client feedback
๐ Roadmap
โ
Completed (v1.2.4)
๐ In Development
๐ฏ Planned Features
๐ Why Open Source?
JsonBoard is 100% open source because we believe developers should have:
๐ Freedom & Control
- No vendor lock-in - Your tools should never hold your data hostage
- Full customization - Modify JsonBoard to fit your exact workflow
- Transparency - See exactly how your data is handled and stored
- Privacy - No telemetry, no tracking, no data collection
- Built by developers, for developers - Features that actually matter
- Real-world use cases - Solutions based on actual developer needs
- Rapid iteration - Community feedback drives feature development
- Shared ownership - Everyone can contribute and improve the tool
๐ช Developer Benefits
- Learn from the code - Study modern React, TypeScript, and Node.js patterns
- Contribute features - Add functionality you need for your projects
- Fix bugs quickly - Don't wait for vendor support cycles
- Career growth - Open source contributions showcase your skills
๐ Reliability & Longevity
- Can't be discontinued - Community can always fork and continue
- No surprise pricing - Always free, forever
- No service dependencies - Runs completely offline
- Future-proof - Adapts to new technologies and frameworks
๐ค Contributing
We welcome all types of contributions! Here's how you can help make JsonBoard better:
๐ Found a Bug?
- Open an issue with reproduction steps
- Include your environment details and JSON file examples
- Screenshots help us understand UI issues
๐ก Have a Feature Idea?
- Start a discussion to get community feedback
- Check the roadmap to see if it's already planned
- Describe your use case and how it would help other developers
๐ง Want to Code?
- Check open issues for good first contributions
- Fork the repo and create a feature branch
- Follow the existing code style and add tests
- Submit a PR with clear description of changes
๐ Improve Documentation?
- Fix typos or unclear explanations
- Add more use case examples
- Translate to other languages
- Create video tutorials or blog posts
๐จ Design & UX?
- Suggest UI improvements
- Create mockups for new features
- Improve accessibility and responsive design
- Test on different devices and browsers
Every contribution matters! From typo fixes to major features, we appreciate all help in making JsonBoard the best tool for JSON data management.
๐ก Inspiration
JsonBoard draws inspiration from the best developer tools:
- phpMyAdmin (but for JSON) - Database management interface
- Google Sheets (for devs) - Spreadsheet-like data editing
- Prisma Studio - Visual database browser
- Flatfile.io - Data onboarding platform
- Storyblok - Headless CMS interface
- VS Code - Developer-focused experience
๐ License
MIT License - feel free to use in personal and commercial projects.
๐ Links
Made with โค๏ธ by SH20RAJ and the open source community.
[1.4.0] - 2025-07-11
๐ Major Features - Drizzle-Style Schema Management
- Centralized Schema Generation: New
--init-schema
command creates a single jsonboard.schema.ts
file
- TypeScript-First Approach: Generated schemas are fully typed with Zod and TypeScript support
- Drizzle-Like Experience: Import schemas like
import { usersSchema, productsSchema } from './jsonboard.schema'
- Validation Helpers: Auto-generated validation functions for each schema
- Type Exports: Full TypeScript type support with
UsersSchemaType
, ProductsSchemaType
, etc.
- File Index: Easy reference system for schema-to-file mapping
โจ Schema Management Features
- Single File Approach: All schemas in one
jsonboard.schema.ts
file (no folder pollution)
- Smart Schema Naming: Converts file paths to valid TypeScript identifiers
- Validation Functions: Pre-built validation helpers for each JSON file
- Type Safety: Full TypeScript support with inferred types
- Import/Export Ready: Clean ES6 imports and exports
๐ง Developer Experience
- Clean Documentation: Auto-generated JSDoc comments with usage examples
- Error Handling: Comprehensive error messages with path information
- Legacy Support:
--generate-schema
still available for individual files
- Zero Configuration: Works out of the box with any JSON project structure
๐๏ธ Technical Improvements
- Enhanced schema generator with TypeScript code generation
- Improved file scanning with better config file exclusion
- Better error handling and validation reporting
- Optimized schema generation performance
๐ Usage Examples
# Generate centralized schema file
jsonboard --init-schema