Embed Builder

🎨 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:

🎨 Open Discord Embed Builder →

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

Intent	Triggers	Auto-generates
Match Starting	”match”, “game start”, “lobby”, “join”, “queue”	Title, lobby field, player count, mode, green color
Announcement	”announce”, “news”, “update”, “patch”	Title, description placeholder, blurple color
Event	”event”, “tournament”, “weekend”, “double”, “season”	Title, start/end/reward fields, yellow color
Service Alert	”alert”, “down”, “issue”, “outage”, “maintenance”	Title, description, red color, timestamp
Welcome	”welcome”, “hello”, “new user”, “greet”	Title, welcome message, green color

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:

Mode	Editor	Preview
Full split (default)	50% width, scrollable	50% width, scrollable
Compact preview (toggle)	~60% width	Fixed 384px sidebar
Preview hidden	100% width	Hidden

Layout controls

Button	Icon	Action
Toggle preview	👁 / 👁‍🗗	Show or hide the preview pane
Compact preview	▐▌	Toggle between full split and compact sidebar
Reverse columns	⇄	Swap editor and preview positions

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

---

Quick Reference — All Embed Fields

Text Fields

Field	Key	Max Length	Notes
Message content	content	2,000 chars	Outside embed, supports markdown
Title	title	256 chars	Supports markdown
Description	description	4,096 chars	Full markdown, links, code blocks
Field name	fields[].name	256 chars	Max 25 fields per embed
Field value	fields[].value	1,024 chars	Supports markdown
Footer text	footer.text	2,048 chars	—
Author name	author.name	256 chars	—

URL / Image Fields

Field	Key	Notes
Author icon	author.icon_url	Image URL (http/https)
Author URL	author.url	Clickable link on author name
Thumbnail	thumbnail.url	Small image top-right of embed
Image	image.url	Large image below embed body
Footer icon	footer.icon_url	Small icon left of footer text

Visual / Other

Field	Key	Type	Notes
Color	color	Integer or #RRGGBB	Left border accent color
Timestamp	timestamp	ISO 8601 string	e.g. 2026-01-15T12:00:00.000Z
Inline fields	fields[].inline	Boolean	true = up to 3 fields per row

---

Interactive Elements — Complete Reference

Buttons

Button	Location	Action
GUI / IDEA / JSON	Toolbar (mode toggle, join buttons)	Switch between visual, chat, and JSON editor modes
Clear	Toolbar (↻ icon)	Reset all fields to empty
Copy	Toolbar (📋 icon)	Copy JSON to clipboard (auto-clears after 2s)
Download	Toolbar (↓ icon)	Save embed as .json file
Color Picker	Toolbar (🎨 icon, toggle)	Open/close color picker panel
Presets	Dropdown menu	Load preset: Match Start, Announcement, Event, Alert
More	Dropdown menu (⋮)	Reverse columns, hide username, verified badge
Add Embed	Embed tab bar	Add new embed (max 10)
Remove Embed	✕ on embed tab	Delete that embed
Add Field	”New Field” button	Add field to active embed (max 25)
Remove Field	🗑 per field	Delete that field
Upload Image	🔎 per URL input	Open image upload modal
Send to Discord	Footer bar button	POST JSON to configured webhook URL
Apply	Image upload modal	Confirm image URL selection
Apply to Editor	IDEA chat (after generation)	Load generated embed into GUI editor
Clear Chat	IDEA chat header	Reset chat history
Quick Prompts	IDEA chat (below messages)	Auto-fill chat input with example prompts

Select Dropdowns

Select	Options	Purpose
Preset templates	Match Starting, Announcement, Event, Service Alert	Load pre-configured embed layouts
Bot username	Funday Bot, Matchmaker, Game Alert	Quick-change bot identity

Modal Dialogs

Modal	Trigger	Input Fields
Image Upload	🔎 button on any URL input	Image URL text input + preview

Text Inputs

Input	Type	Placeholder
Message content	textarea	Message text outside the embed
Author name	text	Author name
Author URL	text	https://…
Author icon URL	text	https://…
Title	text	Embed title
Title URL	text	https://…
Description	textarea	Embed description
Field name × N	text	Field name
Field value × N	textarea	Field value
Thumbnail URL	text	https://…
Image URL	text	https://…
Footer text	text	Footer text
Footer icon URL	text	https://…
Timestamp	datetime-local	—
Color hex	text (no #)	41f097
Color native	color input	Native OS color picker
Webhook URL	text	https://discord.com/api/webhooks/…
JSON editor	textarea (monospace)	Full JSON payload
IDEA chat input	text	Describe your embed…

Checkboxes

Checkbox	Default	Purpose
Inline (per field)	unchecked	Display field inline (3 per row)

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

Element	Type	Details
12 preset swatches	Buttons	Blurple, Green, Yellow, Fuchsia, Red, etc.
Hex input	Text (no #)	0-6 character hex code
Native color input	<input type="color">	OS color picker
Reset	Button (↩)	Clear color
Badge indicator	Visual	”Filled” badge shows on section headers when data present

---

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

| Format | Syntax | Result | | :------------ | :--------------------- | :----------------- | ----------- | | Bold | **text** | text | | Italic | *text* or _text_ | text | | Underline | __text__ | text | | Strikethrough | ~~text~~ | text | | Code inline | `code` | code | | Code block | ```lang\ncode\n``` | Syntax highlighted | | Quote | > text | Blockquote | | Spoiler | \|\|text\|\| | | Hidden text | | Links | [text](https://...) | Clickable |

---

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}
        ]
    }]
})