Create and preview custom webhook embed messages instantly. Design your message with colors, fields, and text, then generate the clean JSON payload for free.
AI Generation Prompt
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 anywindow.opencalls. 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 easefor 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.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is this tool used for?
This tool allows developers and power users to visually design rich embed messages for webhook-compatible messaging platforms. You can customize the look, feel, and content of your message without writing the underlying JSON manually.
Does this tool save my data?
No. This application is entirely client-side and does not use local storage, cookies, or databases. Any data you enter is only kept in your browser's memory and is cleared when you refresh the page.
How do I use the generated JSON?
Once you have designed your message, click the copy button to get the JSON payload. You can then paste this directly into the request body of your webhook API calls.
