🎮Dev

Discord Embed Builder

Build Discord embeds (title, description, color, fields, footer, thumbnail) and export the JSON ready for webhook. Includes preview. Everything in your browser.

Title Color (hex) Description Footer Thumbnail URL Fields — one per line: name | value | inline

Preview

Build embeds for Discord

Embeds are those colourful, tidy cards that give Discord bot and webhook messages a professional look. Building their JSON by hand, respecting the whole structure, takes effort. Here you design the embed visually and export the finished code.

Set the title, description, sidebar colour, fields, footer and thumbnail while watching a preview of how the card will look in Discord. Once you like the result, copy the already-formatted JSON and send it to a webhook or use it in your bot.

It all runs in the browser. A quick way to put together good-looking notifications and messages in Discord without memorising the embed structure.

Frequently asked questions

Why does the colour come out as a long number instead of the hex?

Because Discord wants the colour as a decimal integer, while the picker hands over hexadecimal. The conversion happens on the spot: #5865f2 becomes 5793266 in the JSON. Copy the number exactly as it came out, since swapping the hex string back in makes the API reject the embed. The picker starts on Discord's own blue, and any colour chosen there updates the JSON in the same instant.

Can I add fields, an author or a big image?

Not on this page. The inputs cover title, description, colour, footer and thumbnail URL, and the thumbnail only enters the JSON once the URL has something in it. Fields, author, image, url and timestamp have to be typed into the JSON by hand after copying. There is no visual preview either: what the page shows is the JSON, never a mock-up of how the card lands inside Discord.

Is the JSON ready to post to a webhook?

It is, already wrapped in {"embeds":[...]}, which is exactly the shape of a webhook body — a POST with Content-Type: application/json to the webhook URL does the job. One catch: the footer block gets written every time, even when the footer input sits empty, and an empty footer text tends to get rejected. If your card carries no footer, delete those lines from the JSON first.

Related Tools

🌐

i18n Translation File Diff

Compares two i18n JSON files and reports missing, extra and empty keys plus placeholder mismatches between the two locales.

🟦

tsconfig.json Generator

Generate a custom tsconfig.json: ES target, module, strict, paths, JSX, declaration and more. Validation against invalid options. Everything in your browser.

📱

PWA manifest.json Generator

Build a manifest.json for a PWA (name, short_name, theme_color, background_color, display, icons) with preview.

📦

SemVer Range Tester

Tests which versions satisfy a semver range (^1.2.3, ~2.0, >=1 <2) and explains the range as a lower and an upper bound.

⚖️

JSON Size Analyzer

Analyzes a JSON payload and shows how many bytes each key takes, sorted by weight, with percentage of total and the full path per node.

{}

JSON Formatter

Format, validate and minify JSON online. Paste raw JSON and get a readable, indented version.