Free JSON to TypeScript Enum Generator Tool

Application Overview

The JSON to TypeScript Enum Generator is a lightweight, high-performance web utility built for developers who need to quickly convert API-sourced JSON or local configuration files into robust TypeScript Enums or Const Objects. By emphasizing a clean, light-mode interface and zero-latency feedback, it provides a seamless developer experience.

Core Features

• Real-Time Parsing: Immediate validation and conversion as the user types or pastes JSON.
• Format Flexibility: Toggle between TypeScript enum and const as objects.
• Case Transformation: One-click options to normalize keys to PascalCase, camelCase, or UPPER_CASE.
• Copy-to-Clipboard: Single-click action to copy the generated code, utilizing the modern Clipboard API.
• Download Functionality: Ability to download the generated code as a .ts file.
• Visual Error Indicators: Highlights JSON syntax errors in real-time, preventing invalid code generation.

UI & Layout

• Layout: A side-by-side (on desktop) or stacked (on mobile) layout containing two main panes: the Input JSON Editor (left/top) and the Output TypeScript Code Preview (right/bottom).
• Header: A clean, minimal header displaying the tool title and a brief descriptive subtitle.
• Toolbar: A sticky toolbar between the input and output sections containing toggles (Enum vs. Const), formatting buttons (Case style), and actions (Clear, Copy, Download).

Design Specifications

• Palette:
  • Background: #FFFFFF
  • Primary Action/Accents: #2563EB (vibrant blue)
  • Surface/Panel Backgrounds: #F8FAFC (light slate gray)
  • Text: #1E293B (near-black), #64748B (subtle gray)
  • Borders/Dividers: #E2E8F0
• Typography: System-safe sans-serif fonts (e.g., Inter, -apple-system, BlinkMacSystemFont).
• Animations: Use CSS transitions (0.2s ease-in-out) for all UI changes, particularly when toggling configuration settings or showing success notifications (toast messages).

Developer Directives

1. Architecture: Must be a single index.html file. CSS and JavaScript must be contained within <style> and <script> blocks.
2. State Management: Strictly in-memory. Use standard JavaScript variables/objects. Do NOT use localStorage, sessionStorage, or any form of cookie.
3. Security/Constraints:
   • No alert(), confirm(), or prompt(). Create a custom <div> modal or toast system for feedback.
   • All links must include target="_blank" and rel="noopener noreferrer".
   • Do not use any build steps (Webpack/Vite). Use CDN links for any necessary libraries (e.g., a lightweight syntax highlighter).
4. Responsiveness: Use Flexbox or CSS Grid. The layout should collapse from side-by-side to stacked at a breakpoint of 768px.
5. Aesthetics: Maintain a premium, professional SaaS aesthetic. Use subtle drop shadows (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)) on panels to create depth.