OtesseOtesseDocs

Design Nodes

Design nodes are visual building blocks for creating page layouts, landing pages, and UI components. Connect them together to build complete pages that can be previewed and deployed. There are 36 design nodes in total.

Design nodes are organized into five groups: page structure, layout, content, media, and form inputs.

Page Structure

UI Page

Icon: Layout

The top-level page container. Every page layout starts with a UI Page node that sets the page title, meta info, and overall layout direction.

Config:

  • Title: Page title
  • Layout: Vertical or horizontal
  • Max width: Constrain the page width
  • Background: Page background color or image

Section

Icon: Rows3

A distinct section within a page — hero, features, CTA, pricing, etc. Sections stack vertically within a UI Page.

Config:

  • Background: Section background color or image
  • Padding: Top and bottom spacing
  • Max width: Content width within the section

Container

Icon: LayoutGrid

A flex or grid container for grouping elements. Use containers to arrange child elements side by side or in a grid.

Config:

  • Direction: Row or column
  • Gap: Space between children
  • Alignment: How children align (start, center, end, stretch)
  • Wrap: Whether children wrap to the next line

Group

Icon: Square

A visual grouping for organizing nodes on the canvas. Unlike Container, Group is for canvas organization only and does not affect the rendered page layout.

Layout

Grid

Icon: Grid3X3

CSS Grid layout with configurable columns, rows, gap, and template areas. More powerful than Container for complex layouts.

Config:

  • Columns: Number of columns or template
  • Rows: Number of rows or template
  • Gap: Space between grid cells

Columns

Icon: Columns3

A simple multi-column layout. Choose 2 to 6 columns with responsive behavior on smaller screens.

Config:

  • Count: Number of columns (2-6)
  • Gap: Space between columns
  • Responsive: How columns collapse on mobile

Spacer

Icon: MoveVertical

Add vertical or horizontal space between elements.

Config:

  • Size: Amount of space (in pixels or rem)
  • Direction: Vertical or horizontal

Divider

Icon: Minus

A horizontal or vertical line separator between content sections.

Config:

  • Direction: Horizontal or vertical
  • Color: Line color
  • Thickness: Line width

Accordion

Icon: ChevronsUpDown

Collapsible sections with a title that expands to reveal content. Good for FAQs and long content.

Config:

  • Items: List of title/content pairs
  • Allow multiple: Whether multiple sections can be open at once

Tabs

Icon: PanelTop

Tabbed content with multiple panels. Only one tab is visible at a time.

Config:

  • Tabs: List of tab labels and their content
  • Default: Which tab is shown first

Icon: AppWindow

A popup dialog with a trigger button. Shows content in an overlay on top of the page.

Config:

  • Trigger: Button text to open the modal
  • Title: Modal header
  • Size: Small, medium, or large

Drawer

Icon: PanelRightOpen

A slide-in panel from the left, right, or bottom of the page.

Config:

  • Side: Left, right, or bottom
  • Width: Panel width (for left/right)
  • Trigger: What opens the drawer

Content

Heading

Icon: Heading

A standalone heading element. Choose from H1 through H6.

Config:

  • Level: H1, H2, H3, H4, H5, or H6
  • Text: Heading content
  • Alignment: Left, center, or right

Text

Icon: Type

A text content block — paragraph, label, or span.

Config:

  • Content: Text to display
  • Variant: Paragraph, label, span, or caption
  • Color: Text color

Rich Text

Icon: FileText

A rich text block that supports markdown or HTML content with formatting.

Config:

  • Content: Markdown or HTML text
  • Max width: Content width constraint

Icon

Icon: Star

Display a Lucide icon with configurable size and color.

Config:

  • Icon name: Which Lucide icon to show
  • Size: Icon size
  • Color: Icon color

Badge

Icon: Tag

A small status badge with text and a color variant. Good for labels, tags, and status indicators.

Config:

  • Text: Badge label
  • Variant: Default, success, warning, error, or info

Card

Icon: CreditCard

A content card with optional image, title, description, and call-to-action button.

Config:

  • Image: Optional card image
  • Title: Card heading
  • Description: Card body text
  • CTA: Optional action button

Hero

Icon: Sparkles

A hero section with headline, subheading, call-to-action button, and background image or gradient.

Config:

  • Headline: Main text
  • Subheading: Supporting text
  • CTA: Button text and link
  • Background: Color, gradient, or image

Stat

Icon: BarChart3

A statistic display showing a number, label, and optional trend indicator.

Config:

  • Value: The number to display
  • Label: What the number represents
  • Trend: Up, down, or neutral with percentage

Testimonial

Icon: Quote

A customer quote with author name, avatar, and company.

Config:

  • Quote: The testimonial text
  • Author: Name of the person
  • Title: Their role or company
  • Avatar: Profile image

Pricing Card

Icon: DollarSign

A pricing tier card with plan name, price, feature list, and CTA button.

Config:

  • Plan name: Tier name (e.g., "Basic", "Pro")
  • Price: Monthly or annual price
  • Features: List of included features
  • CTA: Sign-up button text and link
  • Highlight: Whether this is the recommended plan

Feature Grid

Icon: LayoutGrid

A grid of feature cards, each with an icon, title, and description.

Config:

  • Features: List of feature items (icon, title, description)
  • Columns: How many features per row

Logo Cloud

Icon: Images

A row of partner or client logos. Commonly used in social proof sections.

Config:

  • Logos: List of logo images
  • Grayscale: Whether to show logos in grayscale

Media

Image

Icon: ImageIcon

An image element with responsive sizing and alt text.

Config:

  • Source: Image URL or uploaded file
  • Alt text: Description for accessibility
  • Aspect ratio: Image proportions

Video Embed

Icon: Play

Embed a YouTube or Vimeo video with aspect ratio control.

Config:

  • URL: Video URL
  • Aspect ratio: 16:9, 4:3, or custom

Map Embed

Icon: MapPin

Embed a Google Map with an address or coordinates.

Config:

  • Address: Location to display
  • Zoom: Map zoom level
  • Height: Embed height

Icon: GalleryHorizontalEnd

An image or content carousel with autoplay and navigation arrows.

Config:

  • Items: Slides (images or content)
  • Autoplay: Whether to auto-advance
  • Speed: Transition speed

Avatar

Icon: User

A user avatar showing either an image or fallback initials.

Config:

  • Image: Avatar image URL
  • Name: Used for fallback initials
  • Size: Small, medium, or large

Form Inputs

Input Field

Icon: TextCursorInput

A text input field with label and validation. Supports text, email, number, and phone types.

Config:

  • Label: Field label
  • Type: Text, email, number, or tel
  • Placeholder: Hint text
  • Required: Whether the field is mandatory

Textarea

Icon: AlignLeft

A multi-line text input for longer content.

Config:

  • Label: Field label
  • Rows: Number of visible rows
  • Placeholder: Hint text

Select

Icon: ChevronDown

A dropdown select with configurable options.

Config:

  • Label: Field label
  • Options: List of choices
  • Default: Pre-selected option

Checkbox

Icon: CheckSquare

A checkbox input with a label.

Config:

  • Label: Checkbox text
  • Default: Checked or unchecked

Radio Group

Icon: CircleDot

A group of radio buttons where only one option can be selected.

Config:

  • Label: Group label
  • Options: List of choices
  • Default: Pre-selected option

Form Button

Icon: Send

A submit or reset button for forms. Connect to form input nodes to collect their values.

Config:

  • Label: Button text
  • Type: Submit or reset
  • Variant: Primary, secondary, or outline
Chatbot NodesMedia Nodes