Technical Specification: Free Online EJS and Pug to HTML Converter

Overview

A high-performance, client-side utility for web developers to compile Pug and EJS templates into standard HTML. The application functions entirely within the user's browser, providing instant feedback and ensuring total data privacy.

Core Features

• Dual-Engine Support: Dedicated modes for Pug (formerly Jade) and EJS template compilation.
• Live Rendering: Real-time compilation as the user types, with a 300ms debounce to prevent UI jank.
• Dynamic Data Injection: A secondary input area for providing a JSON payload, allowing users to test how templates render with specific variables.
• Syntax Validation: Built-in error catching with real-time feedback (e.g., "Unexpected Token on Line 4") displayed in a non-intrusive toast notification.
• One-Click Copy: Quick-copy button for the generated HTML output.
• Visual Polish: Syntax-highlighted code editors using lightweight CDN libraries.

UI & Layout

• Navigation: Clean, minimalist top bar containing the tool title and a "Engine Toggle" (EJS vs. Pug).
• Main Interface: A responsive two-column layout on desktop, stacking vertically on smaller screens.
  • Left Pane: Code editor for the template.
  • Right Pane: Read-only preview area for the compiled HTML output.
  • Bottom Panel: Optional expanded input for JSON test data.
• Aesthetic: A modern SaaS-focused light-mode design. High-contrast text, plenty of whitespace, and rounded corners (border-radius: 8px).

Technical Directives

• Architecture: Single HTML file only. No external build processes or server-side calls.
• Storage: STRICTLY FORBIDDEN to use localStorage or sessionStorage. All state (editor content, engine selection) must reside in in-memory JavaScript variables.
• Libraries:
  • Use pug.min.js and ejs.min.js via stable CDN links for compilation logic.
  • Use a lightweight, CDN-hosted code editor library (e.g., CodeMirror or a minimal custom implementation) for the syntax highlighting.
• Responsiveness: Use CSS Grid/Flexbox to ensure the split-pane layout adapts fluidly to all resolutions.
• Error Handling: Avoid alert(). Create a custom div-based notification system that slides into the viewport for compile errors.

Color Palette

• Background: #F8FAFC (Cool Gray 50)
• Surface/Editor: #FFFFFF (White)
• Primary Accent: #2563EB (Blue 600) for active states and buttons.
• Text: #1E293B (Slate 800) for body text; #64748B (Slate 500) for labels.
• Borders: #E2E8F0 (Slate 200).

Animations

• Transitions: Use CSS transition: all 0.2s ease-in-out for UI component states (button hover, input focus).
• Notifications: Use a CSS keyframes animation (fade-in, slide-up) for the error message display.