Layout Builders Documentation

Create advanced message layouts with NoveCord's layout system. Build containers, sections, media galleries, and more for rich Discord message experiences.

ContainerBuilder

The main container for organizing message content with accent colors and spoiler support.

Basic Usage

const { ContainerBuilder, TextDisplayBuilder } = require('novecord');
const textDisplay = new TextDisplayBuilder()
  .setContent('Hello, this is a container message!')
  .build();
const container = new ContainerBuilder()
  .setAccentColor('#5865F2')
  .setSpoiler(false)
  .addComponent(textDisplay)
  .build();
client.sendMessage(channelId, {
  content: 'Check out this container:',
  components: [container]
});

ContainerBuilder Methods

  • .setAccentColor(hex) - Set container accent color (hex format)
  • .setSpoiler(state) - Enable/disable spoiler mode
  • .addComponent(component) - Add a component to the container
  • .build() - Build the final container object

SectionBuilder

Create organized sections within containers with optional accessory components.

Basic Usage

const { SectionBuilder, TextDisplayBuilder, ThumbnailBuilder } = require('novecord');
const thumbnail = new ThumbnailBuilder()
  .setMedia('https://example.com/image.png')
  .build();
const textDisplay = new TextDisplayBuilder()
  .setContent('This section has a thumbnail accessory!')
  .build();
const section = new SectionBuilder()
  .setAccessory(thumbnail)
  .addComponent(textDisplay)
  .build();

SectionBuilder Methods

  • .setAccessory(component) - Set an accessory component (like thumbnail)
  • .addComponent(component) - Add a component to the section
  • .build() - Build the final section object

TextDisplayBuilder

Display text content within layouts and sections.

Basic Usage

const { TextDisplayBuilder } = require('novecord');
const textDisplay = new TextDisplayBuilder()
  .setContent('**Bold text** and *italic text* with markdown support!')
  .build();

TextDisplayBuilder Methods

  • .setContent(text) - Set the text content (supports markdown)
  • .build() - Build the final text display object

ThumbnailBuilder

Add thumbnail images as accessories or standalone components.

Basic Usage

const { ThumbnailBuilder } = require('novecord');
const thumbnail = new ThumbnailBuilder()
  .setMedia('https://cdn.discordapp.com/avatars/123456789/avatar.png')
  .build();

ThumbnailBuilder Methods

  • .setMedia(url) - Set the thumbnail image URL
  • .build() - Build the final thumbnail object

FileBuilder

Attach files to your message layouts.

Basic Usage

const { FileBuilder } = require('novecord');
const fileAttachment = new FileBuilder()
  .setFile({
    name: 'document.pdf',
    data: fileBuffer,
    description: 'Important document'
  })
  .build();

FileBuilder Methods

  • .setFile(file) - Set the file object with name, data, and description
  • .build() - Build the final file object

SeparatorBuilder

Add visual separators between content sections.

Basic Usage

const { SeparatorBuilder } = require('novecord');
const separator = new SeparatorBuilder()
  .setSpacing('large')
  .setDivider(true)
  .build();

Spacing Options

SpacingDescription
smallMinimal spacing
mediumDefault spacing
largeMaximum spacing

SeparatorBuilder Methods

  • .setSpacing(size) - Set spacing size (small, medium, large)
  • .setDivider(state) - Enable/disable visual divider line
  • .build() - Build the final separator object

Complete Layout Example

Here's a comprehensive example using multiple layout builders together.

const { 
  ContainerBuilder, 
  SectionBuilder, 
  TextDisplayBuilder, 
  ThumbnailBuilder, 
  MediaGalleryBuilder, 
  SeparatorBuilder 
} = require('novecord');
// Create thumbnail for header section
const headerThumbnail = new ThumbnailBuilder()
  .setMedia('https://example.com/logo.png')
  .build();
// Create header section
const headerSection = new SectionBuilder()
  .setAccessory(headerThumbnail)
  .addComponent(
    new TextDisplayBuilder()
      .setContent('**Welcome to our server!**\nHere are some important updates.')
      .build()
  )
  .build();
// Create separator
const separator = new SeparatorBuilder()
  .setSpacing('medium')
  .setDivider(true)
  .build();
// Create media gallery
const gallery = new MediaGalleryBuilder()
  .addItem('https://example.com/update1.png')
  .addItem('https://example.com/update2.png')
  .addItem('https://example.com/update3.png')
  .build();
// Create content section
const contentSection = new SectionBuilder()
  .addComponent(
    new TextDisplayBuilder()
      .setContent('Check out these screenshots from our latest update!')
      .build()
  )
  .addComponent(gallery)
  .build();
// Build the complete container
const container = new ContainerBuilder()
  .setAccentColor('#00D4AA')
  .addComponent(headerSection)
  .addComponent(separator)
  .addComponent(contentSection)
  .build();
// Send the message
client.sendMessage(channelId, {
  content: 'Server Update:',
  components: [container]
});