Technical Specification: JSON to SQL Schema Generator

Overview

A high-performance, browser-based utility designed to transform raw JSON data into structured SQL CREATE TABLE statements. This tool automates the tedious task of defining schema structures based on existing data payloads.

Core Features

• Live JSON Parsing: Real-time analysis of JSON input with immediate DDL preview.
• Dialect Support: Toggle between MySQL, PostgreSQL, SQLite, and SQL Server syntaxes.
• Smart Inference: Automatically detects field types (String, Number, Boolean, Null) and suggests appropriate SQL column types.
• Naming Customization: Options to force snake_case or camelCase for table and column names.
• Batch Processing: Ability to handle complex nested objects and arrays by suggesting relational linking (foreign keys).
• Export Options: "Copy to Clipboard" button for quick integration and "Download as .sql" functionality.

UI/UX Layout

• Header: Clean, centered header with a clear value proposition statement.
• Main Interaction Area (Split-Screen):
  • Left Column: A syntax-highlighted code editor for pasting JSON input. Includes a "Format JSON" button to beautify messy inputs.
  • Right Column: A read-only preview area showing the generated SQL DDL, styled like a professional terminal.
• Toolbar: A sticky control bar between input/output sections containing:
  • Dialect selector (Dropdown).
  • Naming convention toggle (Switch).
  • Action buttons: Copy, Download, Clear.
• Responsive Behavior:
  • Desktop: Horizontal split-pane layout.
  • Mobile/Tablet: Vertical stack layout with the Input section appearing first.

Design System (Light Mode Only)

• Primary Color: Professional Cobalt Blue (#2563eb).
• Backgrounds: Off-white/Gray scales (#f9fafb, #ffffff).
• Typography: Inter or standard system sans-serif font stack for maximum readability.
• Shadows: Soft, subtle drop shadows on input containers and panels to create a modern 'floating' aesthetic.
• Animations:
  • Smooth fading transitions when switching between SQL dialects.
  • Micro-interactions on buttons (subtle scale on hover, ripple effect on click).
  • Instantaneous update of the SQL panel upon valid JSON entry (debounced input).

Developer Directives

• Single File Architecture: All CSS and JS must be embedded within the HTML file. No external frameworks like React or Vue.
• Storage Restrictions: Do NOT use localStorage or sessionStorage. All state must be managed in transient JavaScript variables.
• Sandbox Compatibility: Do not use alert(), confirm(), or prompt(). Create custom HTML modal overlays for any user interaction requiring acknowledgement.
• Error Handling: Gracefully handle malformed JSON input with a red-colored, unobtrusive notification toast rather than browser-native errors.
• Security: Ensure all output rendering uses textContent or similar sanitization methods to prevent XSS if the generated SQL is somehow interpreted as HTML.