JSON to GraphQL Schema Converter Specification

Overview

A high-performance, single-file browser application designed to help software engineers convert raw JSON data samples into valid GraphQL Schema Definition Language (SDL) types. The application focuses on accurate type inference, recursive structure analysis, and developer-centric workflows.

Core Features

• Live Type Inference: Real-time conversion as the user types or pastes JSON data.
• Recursive Mapping: Automatically detects nested objects and defines corresponding GraphQL types.
• Error Handling: Visual indicator for invalid JSON syntax with descriptive error messages in a custom UI modal.
• One-Click Clipboard: Easy "Copy to Clipboard" functionality with visual success feedback.
• Format Toggle: Options to customize the output (e.g., strict vs. optional fields, naming conventions).

UI Layout Design

• Header: Clean, centered title with a descriptive tagline.
• Main Tool Area: A split-pane layout for desktop (Left: Input JSON, Right: Output GraphQL) that stacks vertically on mobile devices.
• Input Pane: A high-quality monospaced editor area (using textarea with consistent styling).
• Output Pane: Read-only syntax-highlighted code block area.
• Actions: A central toolbar containing "Convert", "Clear", and "Copy to Clipboard" buttons. Ensure primary actions use a clean, professional blue (#2563eb) with rounded corners.

Aesthetics & Styling

• Palette: Light-mode focused.
  • Background: #f8fafc (Slate-50)
  • Cards: #ffffff (White) with soft shadow (shadow-md)
  • Primary: #2563eb (Blue)
  • Success: #16a34a (Green)
  • Error/Warning: #dc2626 (Red)
  • Typography: Sans-serif (system-ui) for UI, Monospaced (Courier/Consolas) for code.
• Transitions: Use transition-all duration-200 ease-in-out for all button interactions and state changes.

Developer Directives (CRITICAL)

1. Zero Persistence: Do NOT use localStorage, sessionStorage, or cookies. The tool must be "stateless" regarding user data.
2. Vanilla Implementation: No build steps. Use single-file <script> and <style> blocks. CDN links (e.g., Prism.js for syntax highlighting) are permitted.
3. Sandboxed Compatibility: Assume the app lives in a restricted iframe. Do not use alert(), confirm(), or prompt(). Create a custom div-based overlay modal for notifications.
4. Performance: Ensure the type-inference loop is optimized for large JSON payloads to prevent UI blocking.
5. Mobile First: Ensure the textareas are touch-friendly and the layout adapts to narrow screens by changing the flex-direction from row to column.