Loading

CompV2 Builder (Container Components)

Build Discord Component V2 layouts visually with containers, sections, text displays, media galleries, separators and buttons, then generate your BDFD code.

JavaScript HTML CompV2 / Containers
How it works: Components are a flat list. Add a Container first, then add other components and assign them by name. Sections have their own name, text displays and thumbnails attach to a section by selecting its name. Action Rows have their own ID, buttons and selects attach to them by ID. Containers are output first in the generated code.

Your work is auto-saved locally.

Output
Live Preview
scrobbler BOT Today at 12:00 PM

Add components to see a preview…

Preview updates live as you fill in fields.

Syntax Reference
Function Parameters
$addContainer name;color;spoiler?
$addTextDisplay content;container/sectionName?
$addSeparator divider?;spacing?;containerName?
$addSection name;containerName?
$addThumbnail url;description;spoiler?;sectionName
$addMediaGallery galleryID;containerID?
$addMediaGalleryItem url;description;spoiler;galleryID
$addActionRow ID;containerID?
$addButtonCV2 id;label;style;disabled;emoji;actionRowID/sectionID
$addUserSelect id;placeholder;min;max;disabled;actionRowID
$addRoleSelect id;placeholder;min;max;disabled;actionRowID
$addMentionableSelect id;placeholder;min;max;disabled;actionRowID
$addStringSelect id;placeholder;min;max;disabled;actionRowID
$addStringSelectOption label;value;description;emoji;default;selectMenuID