Technical Specification: Instant Messaging JSON Block Builder

Overview

A high-performance, browser-based utility designed for developers to visually construct, edit, and preview structured UI components commonly used in enterprise messaging APIs. The tool provides a "What-You-See-Is-What-You-Get" (WYSIWYG) interface for JSON-based message layouts, allowing users to build complex interface blocks without manually writing raw JSON.

Core Features

• Live Visual Preview: A rendered view that reflects the exact JSON structure in real-time.
• Component Library: Drag-and-drop or click-to-add support for common UI blocks (Sections, Images, Buttons, Date Pickers, Select Menus).
• Dual-Pane Editor: Left side for visual configuration, right side for raw JSON syntax highlighting (read-only for generated structure).
• Instant Validation: Real-time syntax and schema validation to ensure the generated JSON meets industry messaging API requirements.
• One-Click Export: Copy the generated JSON payload to the clipboard.
• State Management: Reactive in-memory state management using vanilla JavaScript (no framework overhead).

UI/UX Design

• Aesthetic: Modern, clean, "SaaS-professional" look. Predominantly white background with soft gray borders, high-contrast typography, and subtle shadows for depth.
• Palette:
  • Primary: #2563eb (Blue - for primary actions)
  • Background: #ffffff
  • Surface: #f8fafc (Very light gray for panel backgrounds)
  • Text: #1e293b (Dark Slate)
  • Border: #e2e8f0
• Interactions:
  • Smooth transition animations when blocks are added or removed (opacity/height scaling).
  • Micro-interactions on buttons (hover lift effects, click ripple).

Technical Implementation

• Architecture: Single index.html file using Vanilla JS, HTML5, and CSS3.
• External Assets: Tailwind CSS (via CDN) for rapid, consistent styling. FontAwesome (via CDN) for iconography.
• Sandboxing Constraints:
  • No Storage: State is held in a global JavaScript object. No access to localStorage or sessionStorage.
  • No Popups: Custom modal implementations for "Are you sure?" or "Copy Success" confirmations.
  • Performance: High-efficiency rendering loop triggered only on user interaction.
• Responsiveness:
  • Desktop: Side-by-side (Editor | Preview).
  • Mobile: Stacked layout (Previewer at the top, Editor at the bottom).

Development Directives

1. Strictly No Branding: Ensure no references to external software providers, trademarks, or third-party service names appear in the UI or labels.
2. Clean State: Reset state completely on page reload. Do not attempt to persist user data.
3. Performance: Avoid heavy library dependencies. Keep script logic modular but contained within one file.