Format, validate, and beautify your JSON with real-time syntax highlighting and professional features.
Try it now at prettyjson.vishkx.com
- Real-time Formatting — Automatically formats and validates JSON as you type
- Syntax Highlighting — Beautiful code highlighting powered by Monaco Editor
- Pretty Print & Minify — Toggle between beautified and minified JSON output
- JSON5 Support — Export to JSON5 format with comments and trailing commas
- Customizable Indentation — Configure indent size (2, 4, or custom spaces)
- Error Detection — Instant validation with clear error messages
- Monaco Editor — VS Code's powerful editor with IntelliSense and auto-completion
- Resizable Panels — Drag to resize editor and output panes on desktop
- Dark/Light Mode — System-aware theme with animated toggle
- Word Wrap Toggle — Enable/disable word wrapping in the editor
- Fullscreen Mode — Expand the editor to fullscreen for focused editing
- Skeleton Loaders — Professional loading states for smooth UX
- File Upload — Import JSON files directly via file picker
- Drag & Drop — Drop JSON files onto the editor
- Paste Example — Load sample JSON to explore features
- Clear Input — One-click clear button
- Interactive Tree View — Collapsible/expandable JSON tree with search
- Copy to Clipboard — Quickly copy formatted output
- Download — Export as
.jsonor.json5files with custom filename - Share Links — Generate shareable URLs with expiring links (1 hour, 1 day, 1 week)
- Customizable Display — Toggle data types, object sizes, font size, and more
- Installable — Add to home screen on mobile or desktop
- Offline Support — Works without an internet connection
- Responsive Design — Optimized for mobile, tablet, and desktop
- Sort Keys — Alphabetically sort object keys for consistency
- Escape/Unescape Strings — Handle escaped JSON strings
- Keyboard Shortcuts Help — In-app modal showing all shortcuts (
?key) - Sync Editor and Output Pane Themes — Ensure both panes follow the selected global theme
- Responsive Dialogs — Improve UX by using popovers on desktop and drawers on mobile
- Fetch from URL — Import JSON directly from an API endpoint
- JSON Repair — Auto-fix common errors (trailing commas, unquoted keys, single quotes)
- Recent History — Store and access last 5 JSONs in localStorage
- Flatten/Unflatten — Convert nested objects to flat key-value pairs
- JSON Diff/Compare — Side-by-side comparison of two JSON objects
- JSON Path Query — Filter JSON with JSONPath/JMESPath syntax
- Convert to Other Formats — Export to YAML, CSV, TypeScript interfaces
- JSON Schema Validation — Validate JSON against a schema
- JWT Decoder — Decode and display JWT tokens
- Multiple Tabs — Work with multiple JSON files simultaneously
- Onboarding Tour — Guide new users through features
- Mobile Experience — Improve touch interactions and layout
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router, Server Components) |
| Language | TypeScript |
| Styling | Tailwind CSS 4 |
| UI Library | shadcn/ui |
| Code Editor | Monaco Editor |
| JSON Tree View | @uiw/react-json-view |
| State Management | Zustand |
| URL State | nuqs |
| Database | Neon PostgreSQL + Drizzle ORM |
| Hosting | Vercel |
This project follows a server-first component architecture:
- Server Components (default) — Layouts, pages, headers, footers, and static content
- Client Components — Only where interactivity is required (editor, tree view, dialogs)
This maximizes performance by:
- Reducing JavaScript bundle size
- Enabling streaming SSR
- Improving initial page load times
- Node.js 20+ (or Bun)
- A Neon PostgreSQL database (for share functionality)
- Clone the repository
git clone https://github.com/vishkx/prettyjson.git
cd prettyjson- Install dependencies
bun install
# or
npm install- Set up environment variables
Copy .env.example to .env and configure:
cp .env.example .envRequired environment variables:
# NeonDB Database Configuration
DATABASE_URL=postgresql://username:password@host.neon.tech/database?sslmode=require
# Cron Job Security (Optional - for Vercel deployment)
CRON_SECRET=your-random-secret-here- Set up the database
bun run db:push
# or
npm run db:push- Run the development server
bun dev
# or
npm run devThen open http://localhost:3000 in your browser.
| Script | Description |
|---|---|
dev |
Start development server |
build |
Create production build |
start |
Start production server |
lint |
Run ESLint |
db:generate |
Generate Drizzle migrations |
db:migrate |
Run database migrations |
db:push |
Push schema changes to database |
db:studio |
Open Drizzle Studio |
src/
├── app/
│ ├── (app)/ # Main application routes
│ │ ├── (components)/ # Page-specific components
│ │ │ ├── editor-pane.tsx # Monaco editor (client)
│ │ │ ├── output-pane.tsx # JSON tree view (client)
│ │ │ ├── json-formatter.tsx # Main formatter logic (client)
│ │ │ ├── page-header.tsx # Static header (server)
│ │ │ └── shared-json-loader.tsx # URL share loader (client)
│ │ ├── layout.tsx # App layout (server)
│ │ ├── loading.tsx # Loading skeleton (server)
│ │ └── page.tsx # Main page (server)
│ ├── api/
│ │ ├── cron/ # Scheduled cleanup jobs
│ │ └── share/ # Share link API endpoints
│ ├── layout.tsx # Root layout with providers
│ ├── manifest.ts # PWA manifest
│ ├── robots.ts # SEO robots.txt
│ └── sitemap.ts # SEO sitemap
├── components/
│ ├── custom/ # Custom components
│ │ ├── skeletons.tsx # Skeleton loaders (server)
│ │ ├── animated-theme-toggler.tsx
│ │ ├── theme-color-toggle.tsx
│ │ └── ...
│ ├── dialogs/ # Dialog components (share, download)
│ ├── layout/ # Header & footer (server)
│ ├── seo/ # SEO components
│ └── ui/ # shadcn/ui components
├── db/
│ ├── index.ts # Database connection
│ └── schema.ts # Drizzle schema definitions
├── hooks/ # Custom React hooks
├── lib/
│ ├── config.ts # Site configuration & SEO
│ ├── monaco.ts # Monaco editor setup
│ └── utils.ts # Utility functions
├── services/ # API service functions
├── stores/ # Zustand state stores
│ ├── settings-store.ts # User preferences
│ └── share-store.ts # Share functionality state
└── context/ # React context providers
| Shortcut | Action |
|---|---|
Ctrl/Cmd + Enter |
Format JSON |
Ctrl/Cmd + M |
Minify JSON |
- Push your code to GitHub
- Import the repository in Vercel
- Add environment variables in Vercel dashboard
- Deploy!
This is a standard Next.js application and can be deployed to any platform that supports Next.js:
- Netlify
- Railway
- Docker / self-hosted
For platform-specific instructions, see the Next.js deployment docs.
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
Created and maintained by vishkx.
- Monaco Editor for the powerful code editor
- @uiw/react-json-view for the interactive JSON tree view
- shadcn/ui for beautiful UI components
- Neon for serverless PostgreSQL
- Vercel for hosting
Made with ❤️ for the developer community