🧩 Featured Works with any webhook

Discord Components V2 Example Message

This Components V2 showcase packs every block DWEEB gives you into one message — containers, sections, formatted text, buttons, a media gallery and separators — so you can see exactly how Discord's new layout system fits together. It's the fastest way to learn the editor: open it, click any block, and watch the live preview update.

Use this template free → Browse all templates

Preview

DWEEBAPP

🧩 The Components V2 starter kit

A hands-on tour of every block DWEEB gives you — and it's all live. Click any component in the editor to edit it, watch the preview update instantly, then hit Send or Share when it looks right.

Sections set a short stack of text beside a single accessory. Pair one with a thumbnail — like this — for profile cards, product shots, and tidy call-outs.

Give a section a button instead and the same layout becomes an action card: a headline, a line of detail, and one tappable action docked on the right.

Open

Media galleries hold up to 10 images or clips

Every text block speaks full Discord markdown.
Blend bold, italic, underline, ~~strikethrough~~, inline code, and spoilers — each renders exactly as Discord shows it. Drop in masked links, lists, and quotes wherever you need them:

Good messages look effortless. DWEEB just makes effortless easy.

There's even more in the box — dropdown menus, clickable (non-link) buttons, and file uploads are all one tap away in the Add component menu.

📖 Read the docs 💬 Join the Discord

💡 Posts through any webhook: text, layout, media, and link buttons. Interactive pieces — clickable buttons and select menus — need a bot or app to own the webhook; a plain user webhook will reject them.

Reopen this tour any time from the Message directory, or choose Clear current message under More to start fresh.

Copy and paste the Discord Components V2 Example Message text

This is the template's text as Discord markdown. Paste it into any channel and the headings, bold text, lists and subtext format exactly as they do in the preview; the card, buttons and menus come with the full template when you open it in DWEEB. The Discord text formatting guide explains every piece of syntax it uses.

# 🧩 The Components V2 starter kit
A hands-on tour of every block DWEEB gives you — and it's all live. **Click any component in the editor to edit it**, watch the preview update instantly, then hit **Send** or **Share** when it looks right.

**Sections** set a short stack of text beside a single accessory. Pair one with a **thumbnail** — like this — for profile cards, product shots, and tidy call-outs.

Give a section a **button** instead and the same layout becomes an action card: a headline, a line of detail, and one tappable action docked on the right.

**Every text block speaks full Discord markdown.**
Blend **bold**, *italic*, __underline__, ~~strikethrough~~, `inline code`, and ||spoilers|| — each renders exactly as Discord shows it. Drop in [masked links](https://dweeb.faizo.net), lists, and quotes wherever you need them:
> Good messages look effortless. DWEEB just makes effortless easy.

**There's even more in the box** — dropdown menus, clickable (non-link) buttons, and file uploads are all one tap away in the **Add component** menu.

-# 💡 **Posts through any webhook:** text, layout, media, and link buttons. Interactive pieces — clickable buttons and select menus — need a **bot or app** to own the webhook; a plain user webhook will reject them.
-# Reopen this tour any time from the **Message directory**, or choose **Clear current message** under More to start fresh.

When to use it

You're new to Discord's Components V2 and want a working reference
You want a starting canvas with every block already wired up
You're deciding which components to use for a richer message

What's inside

Built with Discord's Components V2 layout system — the accent-striped card the Discord embed builder produces in place of a legacy embed:

Container with accent stripe
Formatted text
Separator
Section
Thumbnail
Button
Media gallery
Buttons

Tips

Every piece of text, colour, emoji and link is editable — open it in DWEEB and make it yours.
It posts through any Discord webhook. No bot or application-owned webhook is required for this static message.
Use the measured, high-fidelity preview to check the layout before you send.

How to use this template

Open it in DWEEB. Click “Use this template free” to load the template into the visual editor — no sign-up, no install.
Make it yours. Edit the text, colours, emoji, links and images to match your server. The live preview updates as you type.
Paste your webhook URL. In Discord, go to Server Settings → Integrations → Webhooks, copy a webhook URL, and paste it into DWEEB. See the full webhook workflow.
Send it. Review the live preview, then hit Send. You can also save it, share it as a link, schedule it, or export the message JSON.

Template JSON and compatibility

This example contains 2 top-level blocks and 17 components including nested blocks. Its text fields use 1451 characters of the editor's message budget. The JSON below is exported from the same template that opens in DWEEB.

Import it through DWEEB's JSON panel, or adapt it for your own application. This is a Components V2 payload with flags: 32768, not a legacy embeds array. When executing a webhook yourself, include with_components=true in the request URL. See the Components V2 JSON reference for delivery requirements.

The layout can be sent through an ordinary incoming webhook. Link buttons open their URLs; they do not run a bot action.

Replace example text, images, links and any server placeholders before posting. Discord does not expand DWEEB placeholders when you send raw JSON from your own code. Review allowed mentions before sending text that names users or roles.

Download Discord Components V2 Example Message JSON

View the complete template JSON

{
  "username": "DWEEB",
  "components": [
    {
      "type": 17,
      "accent_color": 5793266,
      "components": [
        {
          "type": 10,
          "content": "# 🧩 The Components V2 starter kit\nA hands-on tour of every block DWEEB gives you — and it's all live. **Click any component in the editor to edit it**, watch the preview update instantly, then hit **Send** or **Share** when it looks right."
        },
        {
          "type": 14,
          "divider": true,
          "spacing": 2
        },
        {
          "type": 9,
          "components": [
            {
              "type": 10,
              "content": "**Sections** set a short stack of text beside a single accessory. Pair one with a **thumbnail** — like this — for profile cards, product shots, and tidy call-outs."
            }
          ],
          "accessory": {
            "type": 11,
            "media": {
              "url": "https://dweeb.faizo.net/media/defaults/dweeb-default-thumbnail.jpg"
            },
            "description": "Thumbnail accessory"
          }
        },
        {
          "type": 9,
          "components": [
            {
              "type": 10,
              "content": "Give a section a **button** instead and the same layout becomes an action card: a headline, a line of detail, and one tappable action docked on the right."
            }
          ],
          "accessory": {
            "type": 2,
            "style": 5,
            "label": "Open",
            "url": "https://dweeb.faizo.net"
          }
        },
        {
          "type": 12,
          "items": [
            {
              "media": {
                "url": "https://dweeb.faizo.net/media/defaults/dweeb-showcase-gallery-1.jpg"
              },
              "description": "Media galleries hold up to 10 images or clips"
            },
            {
              "media": {
                "url": "https://dweeb.faizo.net/media/defaults/dweeb-showcase-gallery-2.jpg"
              },
              "description": "Give every item its own description…"
            },
            {
              "media": {
                "url": "https://dweeb.faizo.net/media/defaults/dweeb-showcase-gallery-3.jpg"
              },
              "description": "…or mark any one of them as a spoiler"
            }
          ]
        },
        {
          "type": 14,
          "divider": true,
          "spacing": 2
        },
        {
          "type": 10,
          "content": "**Every text block speaks full Discord markdown.**\nBlend **bold**, *italic*, __underline__, ~~strikethrough~~, `inline code`, and ||spoilers|| — each renders exactly as Discord shows it. Drop in [masked links](https://dweeb.faizo.net), lists, and quotes wherever you need them:\n> Good messages look effortless. DWEEB just makes effortless easy."
        },
        {
          "type": 10,
          "content": "**There's even more in the box** — dropdown menus, clickable (non-link) buttons, and file uploads are all one tap away in the **Add component** menu."
        },
        {
          "type": 1,
          "components": [
            {
              "type": 2,
              "style": 5,
              "label": "📖 Read the docs",
              "url": "https://discord.com/developers/docs/components/reference"
            },
            {
              "type": 2,
              "style": 5,
              "label": "💬 Join the Discord",
              "url": "https://discord.gg/2wB7rHRDg2"
            }
          ]
        }
      ]
    },
    {
      "type": 10,
      "content": "-# 💡 **Posts through any webhook:** text, layout, media, and link buttons. Interactive pieces — clickable buttons and select menus — need a **bot or app** to own the webhook; a plain user webhook will reject them.\n-# Reopen this tour any time from the **Message directory**, or choose **Clear current message** under More to start fresh."
    }
  ],
  "flags": 32768
}

Use this template in a bot

The same message as a discord.js or discord.py bot sends it. Both are generated from the template above by DWEEB's code generator; for a cURL, JavaScript or Python webhook request, open the template with the Code tab.

discord.js code

// Components V2 message — discord.js v14.19 or newer.
// Designed in DWEEB (https://dweeb.faizo.net). Edit the text, then send.
const {
  ActionRowBuilder,
  ButtonBuilder,
  ButtonStyle,
  ContainerBuilder,
  MediaGalleryBuilder,
  MediaGalleryItemBuilder,
  MessageFlags,
  SectionBuilder,
  SeparatorBuilder,
  SeparatorSpacingSize,
  TextDisplayBuilder,
  ThumbnailBuilder,
} = require("discord.js");

const container = new ContainerBuilder()
  .setAccentColor(0x5865f2)
  .addTextDisplayComponents(
    new TextDisplayBuilder().setContent(
      [
        "# 🧩 The Components V2 starter kit",
        "A hands-on tour of every block DWEEB gives you — and it's all live. **Click any component in the editor to edit it**, watch the preview update instantly, then hit **Send** or **Share** when it looks right.",
      ].join("\n"),
    ),
  )
  .addSeparatorComponents(
    new SeparatorBuilder().setDivider(true).setSpacing(SeparatorSpacingSize.Large),
  )
  .addSectionComponents(
    new SectionBuilder()
      .addTextDisplayComponents(
        new TextDisplayBuilder().setContent(
          "**Sections** set a short stack of text beside a single accessory. Pair one with a **thumbnail** — like this — for profile cards, product shots, and tidy call-outs.",
        ),
      )
      .setThumbnailAccessory(
        new ThumbnailBuilder()
          .setURL("https://dweeb.faizo.net/media/defaults/dweeb-default-thumbnail.jpg")
          .setDescription("Thumbnail accessory"),
      ),
    new SectionBuilder()
      .addTextDisplayComponents(
        new TextDisplayBuilder().setContent(
          "Give a section a **button** instead and the same layout becomes an action card: a headline, a line of detail, and one tappable action docked on the right.",
        ),
      )
      .setButtonAccessory(
        new ButtonBuilder()
          .setStyle(ButtonStyle.Link)
          .setLabel("Open")
          .setURL("https://dweeb.faizo.net"),
      ),
  )
  .addMediaGalleryComponents(
    new MediaGalleryBuilder().addItems(
      new MediaGalleryItemBuilder()
        .setURL("https://dweeb.faizo.net/media/defaults/dweeb-showcase-gallery-1.jpg")
        .setDescription("Media galleries hold up to 10 images or clips"),
      new MediaGalleryItemBuilder()
        .setURL("https://dweeb.faizo.net/media/defaults/dweeb-showcase-gallery-2.jpg")
        .setDescription("Give every item its own description…"),
      new MediaGalleryItemBuilder()
        .setURL("https://dweeb.faizo.net/media/defaults/dweeb-showcase-gallery-3.jpg")
        .setDescription("…or mark any one of them as a spoiler"),
    ),
  )
  .addSeparatorComponents(
    new SeparatorBuilder().setDivider(true).setSpacing(SeparatorSpacingSize.Large),
  )
  .addTextDisplayComponents(
    new TextDisplayBuilder().setContent(
      [
        "**Every text block speaks full Discord markdown.**",
        "Blend **bold**, *italic*, __underline__, ~~strikethrough~~, `inline code`, and ||spoilers|| — each renders exactly as Discord shows it. Drop in [masked links](https://dweeb.faizo.net), lists, and quotes wherever you need them:",
        "> Good messages look effortless. DWEEB just makes effortless easy.",
      ].join("\n"),
    ),
    new TextDisplayBuilder().setContent(
      "**There's even more in the box** — dropdown menus, clickable (non-link) buttons, and file uploads are all one tap away in the **Add component** menu.",
    ),
  )
  .addActionRowComponents(
    new ActionRowBuilder().addComponents(
      new ButtonBuilder()
        .setStyle(ButtonStyle.Link)
        .setLabel("📖 Read the docs")
        .setURL("https://discord.com/developers/docs/components/reference"),
      new ButtonBuilder()
        .setStyle(ButtonStyle.Link)
        .setLabel("💬 Join the Discord")
        .setURL("https://discord.gg/2wB7rHRDg2"),
    ),
  );

const text = new TextDisplayBuilder().setContent(
  [
    "-# 💡 **Posts through any webhook:** text, layout, media, and link buttons. Interactive pieces — clickable buttons and select menus — need a **bot or app** to own the webhook; a plain user webhook will reject them.",
    "-# Reopen this tour any time from the **Message directory**, or choose **Clear current message** under More to start fresh.",
  ].join("\n"),
);

// The design also sets username "DWEEB" — webhook-only options that
// channel.send() has no equivalent for. WebhookClient#send accepts them.

// Send it from any async context: a command handler, an event, a script.
await channel.send({
  components: [container, text],
  flags: MessageFlags.IsComponentsV2,
});

discord.py code

# Components V2 message — discord.py 2.6 or newer.
# Designed in DWEEB (https://dweeb.faizo.net). Edit the text, then send.
import discord
from discord import ui


def build_view() -> ui.LayoutView:
    view = ui.LayoutView(timeout=None)
    view.add_item(
        ui.Container(
            ui.TextDisplay(
                "# 🧩 The Components V2 starter kit\n"
                "A hands-on tour of every block DWEEB gives you — and it's all live. **Click any component in the editor to edit it**, watch the preview update instantly, then hit **Send** or **Share** when it looks right.",
            ),
            ui.Separator(visible=True, spacing=discord.SeparatorSpacing.large),
            ui.Section(
                ui.TextDisplay(
                    "**Sections** set a short stack of text beside a single accessory. Pair one with a **thumbnail** — like this — for profile cards, product shots, and tidy call-outs.",
                ),
                accessory=ui.Thumbnail(
                    "https://dweeb.faizo.net/media/defaults/dweeb-default-thumbnail.jpg",
                    description="Thumbnail accessory",
                ),
            ),
            ui.Section(
                ui.TextDisplay(
                    "Give a section a **button** instead and the same layout becomes an action card: a headline, a line of detail, and one tappable action docked on the right.",
                ),
                accessory=ui.Button(
                    style=discord.ButtonStyle.link,
                    label="Open",
                    url="https://dweeb.faizo.net",
                ),
            ),
            ui.MediaGallery(
                discord.MediaGalleryItem(
                    "https://dweeb.faizo.net/media/defaults/dweeb-showcase-gallery-1.jpg",
                    description="Media galleries hold up to 10 images or clips",
                ),
                discord.MediaGalleryItem(
                    "https://dweeb.faizo.net/media/defaults/dweeb-showcase-gallery-2.jpg",
                    description="Give every item its own description…",
                ),
                discord.MediaGalleryItem(
                    "https://dweeb.faizo.net/media/defaults/dweeb-showcase-gallery-3.jpg",
                    description="…or mark any one of them as a spoiler",
                ),
            ),
            ui.Separator(visible=True, spacing=discord.SeparatorSpacing.large),
            ui.TextDisplay(
                "**Every text block speaks full Discord markdown.**\n"
                "Blend **bold**, *italic*, __underline__, ~~strikethrough~~, `inline code`, and ||spoilers|| — each renders exactly as Discord shows it. Drop in [masked links](https://dweeb.faizo.net), lists, and quotes wherever you need them:\n"
                "> Good messages look effortless. DWEEB just makes effortless easy.",
            ),
            ui.TextDisplay(
                "**There's even more in the box** — dropdown menus, clickable (non-link) buttons, and file uploads are all one tap away in the **Add component** menu.",
            ),
            ui.ActionRow(
                ui.Button(
                    style=discord.ButtonStyle.link,
                    label="📖 Read the docs",
                    url="https://discord.com/developers/docs/components/reference",
                ),
                ui.Button(
                    style=discord.ButtonStyle.link,
                    label="💬 Join the Discord",
                    url="https://discord.gg/2wB7rHRDg2",
                ),
            ),
            accent_colour=0x5865f2,
        ),
    )
    view.add_item(
        ui.TextDisplay(
            "-# 💡 **Posts through any webhook:** text, layout, media, and link buttons. Interactive pieces — clickable buttons and select menus — need a **bot or app** to own the webhook; a plain user webhook will reject them.\n"
            "-# Reopen this tour any time from the **Message directory**, or choose **Clear current message** under More to start fresh.",
        ),
    )
    return view


# The design also sets username "DWEEB" — webhook-only options that
# channel.send() has no equivalent for. discord.Webhook.send accepts them.

# Send it from any coroutine: a command, an event listener, a task.
await channel.send(view=build_view())

Ready to use this template?

Open it in the visual Discord message builder, customize it for your server, and review the result before sending.

Use “Discord Components V2 Example Message” →

Frequently asked questions

Do I need a bot to use this template?

No. This template contains only layout, text, media and link buttons, so any Discord webhook can post it. No application-owned webhook is required.

How do I use this Component showcase template?

Click “Use this template free” to load it into the visual editor, change the text, colours and links to fit your server, then pick a channel or paste your Discord webhook URL and hit Send. You can also share it as a single link or export the message JSON.

Is DWEEB free?

Yes. DWEEB's full visual builder is free and needs no account. Working drafts and browser saves are local by default; optional connected features such as schedules, server libraries, AI, and plugins use the data required to work.

Related templates

Discord Product CardCommerce Discord Event AnnouncementEvents Discord GiveawayEvents Discord Welcome MessageWelcome