JSONCraft

Instantly convert JSON to TypeScript, Zod & Prisma schemas

JSONCraft is a fast, open-source developer tool that converts raw JSON into production-ready schemas. Paste your JSON, generate TypeScript interfaces, Zod validation schemas, and Prisma models instantly, then share with a unique link.

---

✨ Features

⚡ Instant Conversion

• TypeScript Interfaces: Generate clean, properly typed interfaces with nested object support
• Zod Schemas: Create validation schemas with type inference for runtime safety
• Prisma Models: Generate database models ready for your Prisma schema
• Smart Type Detection: Automatically infers types including integers, floats, dates, booleans, and nullables

🔗 Shareable Links

• Permanent URLs: Share conversions with unique, permanent links (/s/[slug])
• Read-Only Viewer: Beautiful public pages for shared conversions
• No Authentication: Zero friction - just paste, convert, and share

🎨 Developer Experience

• Monaco Editor: Full-featured VS Code editor experience in the browser
• Dark/Light Mode: Seamless theme switching with system preference support
• Keyboard Shortcuts: Ctrl+Enter to convert, Ctrl+B to format JSON
• Copy & Download: One-click copy to clipboard or download as files
• Real-time Validation: Instant JSON error feedback with line numbers

🚀 Modern Stack

• Zero Configuration: No complex setup - works out of the box
• Fast Performance: Conversions in <100ms, optimized bundle size
• Responsive Design: Works perfectly on mobile, tablet, and desktop
• Open Source: MIT licensed, fully transparent codebase

---

🛠️ Tech Stack

Category	Technologies
Frontend	Next.js 15 (App Router), React 19, TypeScript 5
Styling	Tailwind CSS, shadcn/ui, Radix UI, Lucide Icons
Code Editor	Monaco Editor (VS Code engine)
State Management	Zustand, TanStack React Query
Database	Supabase (PostgreSQL)
Backend	Next.js API Routes, Supabase Client
Authentication	None (Public access)
Utilities	nanoid, axios, date-fns, next-themes

---

🚀 Quick Start

Prerequisites

• Node.js 18.x or higher
• npm or yarn or pnpm
• Supabase Account (for database and sharing features)

Installation

1. Clone the repository

   git clone https://github.com/akshadjaiswal/json-craft.git
   cd json-craft/frontend

2. Install dependencies

   npm install
   # or
   yarn install
   # or
   pnpm install

3. Set up environment variables

   Create a .env.local file in the frontend directory:

   # Supabase Configuration
   NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
   NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
   
   # Optional: Base URL for production
   NEXT_PUBLIC_BASE_URL=http://localhost:3000

4. Set up Supabase Database

   Run this SQL in your Supabase SQL Editor:

   -- Create conversions table
   create table conversions (
     id uuid primary key default gen_random_uuid(),
     slug text unique not null,
     json_input text not null,
     ts_output text not null,
     zod_output text not null,
     prisma_output text not null,
     created_at timestamptz not null default now()
   );
   
   -- Enable Row Level Security
   alter table conversions enable row level security;
   
   -- Allow public read access
   create policy "Allow public read"
   on conversions
   for select
   using (true);
   
   -- Allow public insert
   create policy "Allow public insert"
   on conversions
   for insert
   with check (true);

5. Run the development server

   npm run dev
   # or
   yarn dev
   # or
   pnpm dev

6. Open the app

   Navigate to http://localhost:3000 in your browser.

---

📁 Project Structure

frontend/
├── app/
│   ├── (home)/
│   │   └── page.tsx                 # Landing page
│   ├── editor/
│   │   └── page.tsx                 # Main editor interface
│   ├── s/[slug]/
│   │   └── page.tsx                 # Shared conversion viewer
│   ├── api/
│   │   ├── save/
│   │   │   └── route.ts             # POST - Save conversion
│   │   └── shared/[slug]/
│   │       └── route.ts             # GET - Fetch conversion
│   ├── layout.tsx                   # Root layout with providers
│   └── globals.css                  # Global styles & Tailwind
│
├── components/
│   ├── editor/
│   │   ├── code-editor.tsx          # Monaco Editor wrapper
│   │   ├── json-input-panel.tsx     # JSON input with controls
│   │   ├── output-tabs.tsx          # TS/Zod/Prisma tabs
│   │   ├── editor-toolbar.tsx       # Convert & Share toolbar
│   │   └── share-dialog.tsx         # Share modal
│   ├── landing/
│   │   ├── hero-section.tsx         # Hero with CTA
│   │   ├── features-section.tsx     # 6 feature cards
│   │   ├── how-it-works.tsx         # 3-step process
│   │   ├── examples-preview.tsx     # Code examples
│   │   └── footer.tsx               # Footer with links
│   ├── ui/                          # shadcn/ui components
│   │   ├── button.tsx
│   │   ├── tabs.tsx
│   │   ├── card.tsx
│   │   ├── dialog.tsx
│   │   ├── toast.tsx
│   │   └── theme-toggle.tsx
│   └── providers/
│       └── theme-provider.tsx       # next-themes wrapper
│
├── lib/
│   ├── converters/
│   │   ├── json-to-typescript.ts    # TypeScript generator
│   │   ├── json-to-zod.ts           # Zod schema generator
│   │   └── json-to-prisma.ts        # Prisma model generator
│   ├── stores/
│   │   └── editor-store.ts          # Zustand state management
│   ├── api/
│   │   └── conversions.ts           # TanStack Query hooks
│   ├── utils/
│   │   ├── json-validator.ts        # JSON validation
│   │   ├── slug-generator.ts        # Unique slug generation
│   │   ├── keyboard-shortcuts.ts    # Keyboard shortcuts hook
│   │   └── utils.ts                 # Utility functions
│   ├── supabase/
│   │   ├── client.ts                # Browser Supabase client
│   │   └── server.ts                # Server Supabase client
│   └── query-provider.tsx           # TanStack Query provider
│
├── types/
│   └── conversion.ts                # TypeScript type definitions
│
├── hooks/
│   └── use-toast.ts                 # Toast notification hook
│
├── public/                          # Static assets
├── package.json
├── tsconfig.json
├── tailwind.config.js               # Custom theme configuration
└── next.config.js

---

🏗️ How It Works

Conversion Pipeline

User pastes JSON
    ↓
Validate JSON syntax
    ↓
Parse and analyze structure
    ↓
Generate TypeScript interfaces
    ↓
Generate Zod validation schemas
    ↓
Generate Prisma database models
    ↓
Display in Monaco Editor tabs
    ↓
User can copy, download, or share

Sharing Flow

User clicks "Share"
    ↓
Generate unique 8-character slug (nanoid)
    ↓
Save JSON + outputs to Supabase
    ↓
Create shareable URL: /s/[slug]
    ↓
Display link with copy button
    ↓
Anyone can view via public URL

Type Inference Logic

• Strings: Regular strings, date strings (DateTime for ISO dates)
• Numbers: Int for integers, Float for decimals
• Booleans: boolean type
• Null values: Marked as nullable/optional
• Objects: Nested interfaces with proper naming
• Arrays: Typed arrays with element type inference

---

🔧 Environment Setup

1. Supabase Configuration

1. Create a new project at Supabase
2. Go to Project Settings → API
3. Copy:
   • Project URL → NEXT_PUBLIC_SUPABASE_URL
   • anon public key → NEXT_PUBLIC_SUPABASE_ANON_KEY
4. Run the SQL migration provided in the Quick Start section
5. Your database is ready!

2. Optional: Production URL

For production deployments (Vercel, Netlify, etc.):

NEXT_PUBLIC_BASE_URL=https://your-domain.com

This ensures share links use your production domain.

---

⌨️ Keyboard Shortcuts

Shortcut	Action
Ctrl + Enter	Convert JSON to schemas
Ctrl + B	Format JSON (beautify)
Ctrl + /	Toggle comments (in editor)

---

🎨 Design System

Brand Colors

Primary: #6366F1 (Indigo)
Accent: #22C55E (Green)
Dark Background: #0F1117
Neutral: #E5E7EB

Typography

• Sans-serif: Inter, system-ui
• Monospace: Consolas, Monaco (code editor)

Components

• Border Radius: 0.5rem (8px)
• Shadows: Subtle shadows for depth
• Transitions: Smooth 200ms transitions

---

📊 Database Schema

conversions Table

Column	Type	Description
id	uuid	Primary key (auto-generated)
slug	text	Unique 8-character identifier
json_input	text	Original JSON input
ts_output	text	Generated TypeScript code
zod_output	text	Generated Zod schema
prisma_output	text	Generated Prisma model
created_at	timestamptz	Timestamp of creation

Row Level Security (RLS)

• ✅ Public read access (view shared conversions)
• ✅ Public insert access (create conversions)
• ❌ No update or delete (permanent records)

---

🤝 Contributing

We welcome contributions! Here's how:

Getting Started

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Commit with conventional commits

   git commit -m "feat: add amazing feature"

5. Push to your fork

   git push origin feature/amazing-feature

6. Open a Pull Request

Commit Convention

Follow Conventional Commits:

• feat: - New features
• fix: - Bug fixes
• docs: - Documentation changes
• style: - Code style (formatting)
• refactor: - Code refactoring
• test: - Adding tests
• chore: - Maintenance

---

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

👤 Author

Akshad Jaiswal

• GitHub: @akshadjaiswal
• Twitter: @akshad_999

---

🙏 Acknowledgments

• Next.js - The React Framework for Production
• Monaco Editor - VS Code's powerful editor
• Supabase - Open source Firebase alternative
• shadcn/ui - Beautiful component library
• Tailwind CSS - Utility-first CSS framework
• Radix UI - Unstyled, accessible components
• TanStack Query - Powerful data synchronization
• Zustand - Lightweight state management

---

📞 Support

Need help? Have questions?

• Open an Issue
• Start a Discussion
• Follow updates on Twitter

---

Made with ❤️ for developers who love clean code

⭐ Star this repo | 🐛 Report Bug | ✨ Request Feature