You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP โ†’
Socket
Book a DemoInstallSign in
Socket

jsonboard

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

jsonboard

A local-first, zero-setup visual database for your JSON files. Features spreadsheet-like editing, centralized Zod schema generation (like Drizzle), TypeScript-first validation, and smart file management. Perfect for developers working with JSON data.

1.4.0
latest
Source
npmnpm
Version published
Weekly downloads
54
-92.16%
Maintainers
1
Weekly downloads
ย 
Created
Source

๐Ÿงฉ JsonBoard Pro

JsonBoard Visual JSON Database

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.

npm version License: MIT Downloads Visitors

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

# Run in any project directory  
npx jsonboard

# Specify custom directory
npx jsonboard --dir ./my-data

# Use custom port (auto-detects conflicts)
npx jsonboard --port 8080

# Don't open browser automatically
npx jsonboard --no-open

# Install globally
npm install -g jsonboard

Command Line Options

jsonboard --help

# ๐Ÿงฉ JsonBoard Pro
# A local-first visual database for your JSON files
# Get a spreadsheet-like GUI to edit JSON data without leaving your project.

# ๐Ÿ”— Documentation: https://github.com/sh20raj/jsonboard

# Usage: jsonboard [options]

# Options:
#   -V, --version              display version number
#   -d, --dir <directory>      Directory to scan for JSON files (default: current directory)
#   -p, --port <port>          Port to run the server on (default: 3000, auto-detects conflicts)
#   --no-open                  Don't automatically open the browser
#   -h, --help                 Display help information

# Examples:
#   # Start JsonBoard in current directory
#   jsonboard
  
#   # Specify a custom directory
#   jsonboard --dir ./my-data
  
#   # Use a specific port
#   jsonboard --port 8080
  
#   # Don't open browser automatically
#   jsonboard --no-open

โœจ 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?

JsonBoardvs. Traditional DBvs. Headless CMSvs. Spreadsheets
โœ… 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     # Add/remove projects instantly
โ”‚   โ”œโ”€โ”€ skills.json       # Update your tech stack
โ”‚   โ”œโ”€โ”€ experience.json   # Manage work history
โ”‚   โ””โ”€โ”€ testimonials.json # Client feedback

Perfect for: Freelancers, developers showcasing work, agencies updating portfolios

๐Ÿ“ Blog & Content Sites

Content management without the CMS complexity:

blog/
โ”œโ”€โ”€ data/
โ”‚   โ”œโ”€โ”€ posts.json        # Blog post metadata & content
โ”‚   โ”œโ”€โ”€ authors.json      # Writer profiles
โ”‚   โ”œโ”€โ”€ categories.json   # Content organization
โ”‚   โ””โ”€โ”€ featured.json     # Homepage highlights

Perfect for: Personal blogs, company blogs, documentation sites, news sites

๐Ÿ›๏ธ E-commerce Prototypes

Build product catalogs quickly:

store/
โ”œโ”€โ”€ data/
โ”‚   โ”œโ”€โ”€ products.json     # Product listings with details
โ”‚   โ”œโ”€โ”€ categories.json   # Product organization
โ”‚   โ”œโ”€โ”€ inventory.json    # Stock tracking
โ”‚   โ””โ”€โ”€ promotions.json   # Sales and discounts

Perfect for: MVP development, client demos, prototype testing, small businesses

๐ŸŽฎ Indie Game Development

Manage game data without databases:

game/
โ”œโ”€โ”€ data/
โ”‚   โ”œโ”€โ”€ levels.json       # Level design and progression
โ”‚   โ”œโ”€โ”€ characters.json   # Player and NPC stats
โ”‚   โ”œโ”€โ”€ items.json        # Weapons, armor, collectibles
โ”‚   โ””โ”€โ”€ leaderboard.json  # High scores and achievements

Perfect for: Indie developers, game jams, prototype testing, balance tweaking

๐Ÿ“Š Small Business Tools

Quick business applications:

business/
โ”œโ”€โ”€ data/
โ”‚   โ”œโ”€โ”€ customers.json    # Customer database
โ”‚   โ”œโ”€โ”€ invoices.json     # Billing and payments
โ”‚   โ”œโ”€โ”€ inventory.json    # Stock management
โ”‚   โ””โ”€โ”€ employees.json    # Staff information

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)

  • Smart file detection - Auto-scan current directory instead of requiring /data folder
  • Gitignore awareness - Automatically excludes node_modules, .next, .git, etc.
  • Automatic port conflict resolution - Smart port detection (3000 โ†’ 3001 โ†’ 3002...)
  • Enhanced CLI with help - Beautiful --help command with examples and GitHub link
  • Custom port support - --port flag for specific port assignment
  • Improved error handling - Better error messages and troubleshooting guidance
  • CLI Table view + Raw JSON editor toggle
  • Full CRUD operations (Create, Read, Update, Delete)
  • File metadata display (size, record count, timestamps)
  • Relative path display and file organization
  • Modern responsive UI with search and filtering
  • RESTful API endpoints (/api/files, /api/files/:filename)

๐Ÿ”„ In Development

  • Undo/Redo support with history tracking
  • Git commit integration after save
  • JSON Schema validation and type checking
  • Import/Export features (CSV, Excel, SQL)
  • Advanced search with column filtering
  • Data relationships and foreign key support

๐ŸŽฏ Planned Features

  • VS Code extension for inline editing
  • Real-time collaboration (local network)
  • Database migration tools (JSON โ†” SQL)
  • Custom themes and UI customization
  • Plugin system for custom data types
  • Command palette for power users
  • API documentation generator
  • Backup and restore functionality

๐Ÿš€ Community Requests

  • YAML and XML support
  • Custom field types (date picker, file upload)
  • Bulk operations and batch editing
  • Data visualization and charts
  • Multi-language support
  • Dark mode theme

๐ŸŒŸ 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

๐Ÿค Community-Driven Development

  • 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.

Made with โค๏ธ by SH20RAJ and the open source community.

Keywords

json

FAQs

Package last updated on 11 Jul 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts