🎨 Discord Embed Builder#

Build Discord message embeds with a live preview GUI, an AI-powered IDEA chat agent, or raw JSON editor — then copy the output directly into webhook payloads or bot code.

🚀 Open the Builder#

The full interactive builder is available at:

Features:

• ✅ Full Svelte 5 component — no external CDN dependencies
• ✅ Three modes: GUI editor, IDEA chat agent, JSON editor
• ✅ Split-screen layout — editor + preview side-by-side (50/50 on large screens)
• ✅ Compact preview toggle — shrink preview to sidebar or full split
• ✅ IDEA chat agent — describe your embed in natural language, get a generated embed
• ✅ Live Discord-style preview (dark theme)
• ✅ Multi-embed support (up to 10)
• ✅ Accordion sections with collapse/expand
• ✅ Select dropdown for preset templates
• ✅ Image upload modal for thumbnail/image/footer/icon URLs
• ✅ Color picker with presets + hex input + native color input
• ✅ All 25 embed fields with character counters
• ✅ Webhook URL input + “Test Send” button
• ✅ Copy JSON / Download .json file
• ✅ Reverse columns, hide username, verified badge toggles

💡 IDEA Chat Agent#

The IDEA mode lets you describe what you want in plain English and generates an embed automatically.

How it works#

1. Click the IDEA button in the toolbar
2. Type a description like: “Match starting, lobby !2a3f, 4/8 players, green color”
3. Press Enter or click the send arrow
4. The agent parses your intent and generates an embed
5. Click “Apply to Editor” to load it into the GUI editor
6. Refine in GUI mode or send directly via webhook

Supported intents#

Quick prompts#

Click any quick-prompt button to auto-fill the chat input:

• 🎮 Match starting, green
• 📢 Server announcement
• 🎉 Weekend event, double XP
• ⚠️ Service alert, red

Field extraction#

The agent extracts fields from patterns like:

• Name: Value (colon-separated)
• Name - Value (dash-separated)

Example: “Match starting. Lobby: !2a3f. Players: 4/8. Mode: Free-for-all” generates three inline fields.

Color detection#

Mention any of these colors in your text: green, red, blue, yellow, orange, purple, pink, teal, gray, white, black.

🖥️ Split-Screen Layout#

The builder uses a side-by-side split layout on large screens:

Layout controls#

Both panes scroll independently with max-height: 80vh.

Quick Reference — All Embed Fields#

Text Fields#

URL / Image Fields#

Visual / Other#

Interactive Elements — Complete Reference#

Buttons#

Select Dropdowns#

Modal Dialogs#

Text Inputs#

Checkboxes#

Accordion Sections (Collapsible)#

Click any header to collapse/expand:

• Author — name, URL, icon URL
• Title — title text, title URL
• Description — markdown body
• Fields — up to 25 fields with name/value/inline/delete
• Thumbnail — thumbnail URL
• Image — main image URL
• Footer — text, icon URL, timestamp

Color Picker#

JSON Output Structure#

Single Embed#

{
  "content": "Optional message text",
  "username": "Funday Bot",
  "avatar_url": "https://...",
  "embeds": [
    {
      "title": "Embed Title",
      "description": "Description with **markdown**",
      "url": "https://funday.gg",
      "color": 3066993,
      "timestamp": "2026-01-15T12:00:00.000Z",
      "author": {
        "name": "Author Name",
        "url": "https://...",
        "icon_url": "https://..."
      },
      "thumbnail": { "url": "https://..." },
      "image": { "url": "https://..." },
      "footer": {
        "text": "Footer text",
        "icon_url": "https://..."
      },
      "fields": [
        { "name": "Field 1", "value": "Value", "inline": true },
        { "name": "Field 2", "value": "Value", "inline": true }
      ]
    }
  ]
}

Discord Markdown#

Send via Webhook — Code Examples#

cURL#

curl -X POST \
  -H "Content-Type: application/json" \
  -d '{"username":"Funday Bot","embeds":[{"title":"🎮 Match Starting","description":"A new match of **Sister Brawl** is ready!","color":3066993,"fields":[{"name":"Lobby","value":"!2a3f","inline":true},{"name":"Players","value":"4/8","inline":true}]}]}' \
  'YOUR_WEBHOOK_URL'

JavaScript#

const payload = {
  username: 'Funday Bot',
  embeds: [{
    title: '🎮 Match Starting',
    description: 'A new match of **Sister Brawl** is ready!',
    color: 3066993,
    fields: [
      { name: 'Lobby', value: '!2a3f', inline: true },
      { name: 'Players', value: '4/8', inline: true }
    ],
    timestamp: new Date().toISOString()
  }]
};
await fetch('YOUR_WEBHOOK_URL', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(payload)
});

Python#

import requests
requests.post("YOUR_WEBHOOK_URL", json={
    "username": "Funday Bot",
    "embeds": [{
        "title": "🎮 Match Starting",
        "description": "A new match ready!",
        "color": 3066993,
        "fields": [
            {"name": "Lobby", "value": "!2a3f", "inline": True},
            {"name": "Players", "value": "4/8", "inline": True}
        ]
    }]
})