v2modalbuilder

V2 Discord Modal Builder

A TypeScript-first builder library for Discord's experimental V2 Modals and components.
It provides strongly typed, chainable builders for creating full-screen modals with labels, text inputs, and select menus — with zero raw JSON hassle.

🔗 Reference: Discord Developer Docs – Components
🔗 Support/Hangout Discord: Golden Development
🔗 My YouTube Channel: Golden Development
🔗 My Discord Bot: Golden Bot

---

✨ Features

• Build Discord V2 Modals with type safety
• Chainable, ergonomic API
• Label (type 18) wrapper component support
• Works with discord.js, raw REST, or any API client
• Outputs valid Discord API payloads

---

🧱 Included Builders

Component	Builder Class	Description
Modal	V2ModalBuilder	Define custom_id, title, and child components
Label Wrapper (18)	V2LabelBuilder	Pairs a label/description with an inner component
Text Input	V2TextInputBuilder	Modal text fields (short/paragraph)
String Select	V2StringSelectBuilder	Dropdowns inside a label wrapper

---

📦 Installation

npm install v2modalbuilder

import {
  V2ModalBuilder,
  V2LabelBuilder,
  V2TextInputBuilder,
  V2StringSelectBuilder,
} from "v2modalbuilder";
import { TextInputStyle } from "discord-api-types/v10";

const modal = new V2ModalBuilder()
  .setCustomId("bug_modal")
  .setTitle("Bug Report")
  .addComponents(
    new V2LabelBuilder()
      .setLabel("What's your favorite bug?")
      .setComponent(
        new V2StringSelectBuilder()
          .setCustomId("bug_string_select")
          .setPlaceholder("Choose...")
          .addOptions(
            { label: "Ant", value: "ant", description: "(best option)", emoji: { name: "🐜" } },
            { label: "Butterfly", value: "butterfly", emoji: { name: "🦋" } },
            { label: "Caterpillar", value: "caterpillar", emoji: { name: "🐛" } }
          )
      ),
    new V2LabelBuilder()
      .setLabel("Why is it your favorite?")
      .setDescription("Please provide as much detail as possible!")
      .setComponent(
        new V2TextInputBuilder()
          .setCustomId("bug_explanation")
          .setStyle(TextInputStyle.Paragraph)
          .setMinLength(1000)
          .setMaxLength(4000)
          .setPlaceholder("Write your explanation here...")
          .setRequired(true)
      )
  );

interaction.showModal(modal);