Rich Webhook Embed Message Builder Specification

Overview

A high-quality, professional-grade tool designed for developers to visually construct rich embed messages for webhook integrations. This utility provides an immediate "what-you-see-is-what-you-get" (WYSIWYG) preview area next to a comprehensive set of configuration controls, ensuring the generated JSON payload is accurate and valid.

Core Features

• Real-Time Visual Preview: A dedicated preview pane that updates instantly as user inputs change.
• Dynamic Field Management: Users can add, remove, and reorder fields (inline and block) for the message body.
• Rich Text Configuration: Support for Title, Description, Author, URL, Thumbnail, Image, and Footer sections.
• Color Picker Utility: A visual hex color picker to set the embed's side-bar accent color.
• One-Click JSON Generation: Copy the final JSON payload to the clipboard with a single click.
• Validation Engine: Built-in checks to ensure field character limits (e.g., 256 for titles, 4096 for descriptions) are respected.

User Interface & Layout

• Header: A clean, minimal top bar indicating the tool name and an action to reset the builder state.
• Main Content Area: A two-column responsive layout:
  • Left Sidebar (Configuration): Scrollable controls for text inputs, color selection, and field management. Groups are collapsed by default to keep the UI clean.
  • Right Panel (Preview): A fixed-aspect container that emulates the visual look of an embed message, ensuring users see exactly what will be sent.
• Aesthetic Direction:
  • Palette: White, soft off-white (#f9f9f9) backgrounds, light grey borders (#e0e0e0), and vibrant brand-neutral blue/purple accents for primary buttons (#4f46e5).
  • Typography: Sans-serif fonts (Inter or system-stack) for maximum readability.

Technical Constraints & Directives

• Single File: All CSS (Tailwind via CDN), HTML structure, and Vanilla JS logic must reside in one file.
• No LocalStorage/Cookies: State must be managed via JavaScript objects in memory. Do not persist data between sessions.
• Iframe Compatibility: The app must avoid prompt(), alert(), or any window.open calls. All interactions must happen within the document flow.
• Responsive: On mobile, the preview pane should stack below the configuration panel or be togglable via a tabbed view.
• Performance: Use standard event listeners (input, change) to update the preview pane. Keep DOM operations minimal to ensure buttery smooth performance during typing.

Animation & Micro-interactions

• Transitions: Use transition: all 0.2s ease for UI state changes.
• Feedback: Buttons should have a subtle scale-down effect (0.98) on click.
• Copy Success: A toast notification (custom HTML/CSS element) should appear briefly upon successfully copying the JSON.