Features

Layout System

Efecto uses a CSS flexbox-based layout engine. Artboards, frames, and groups support auto-layout — just use Tailwind flex classes and the engine handles positioning, spacing, and sizing automatically.

Tailwind-native

Layout is controlled entirely through classNameon artboards and frame nodes. If you know CSS flexbox, you already know Efecto's layout system.

How It Works

Any container (artboard, frame, or group) can act as a flex parent. Add flex and a direction class (flex-col or flex-row) to enable auto-layout. Children are positioned automatically based on the flex rules.

Without flex classes, containers use absolute positioning— children are placed freely on the canvas. This is the default for artboards.

javascript

// Vertical layout with centered content
create_artboard({
  name: "Landing Page",
  width: 1440,
  height: 900,
  className: "flex flex-col"
})

// Add a centered hero section
add_section({
  parentId: "artboard-1",
  jsx: `<section className="flex flex-col items-center justify-center py-24 px-8 gap-6">
  <h1 className="text-6xl font-bold">Build faster</h1>
  <p className="text-xl text-muted-foreground max-w-2xl text-center">
    Ship beautiful products with AI-powered design.
  </p>
  <button className="px-8 py-3 bg-primary text-primary-foreground rounded-full">
    Get Started
  </button>
</section>`
})

Layout Modes

Mode	Classes	Behavior
Absolute	(default — no flex class)	Free placement. Children positioned by x/y coordinates.
Column	`flex flex-col`	Vertical stack. Children flow top-to-bottom.
Row	`flex flex-row`	Horizontal row. Children flow left-to-right.

Alignment

Standard CSS flexbox alignment classes work as expected:

Property	Classes
Justify (main axis)	`justify-start`, `justify-center`, `justify-end`, `justify-between`, `justify-around`, `justify-evenly`
Align (cross axis)	`items-start`, `items-center`, `items-end`
Align self (per child)	`self-auto`, `self-start`, `self-center`, `self-end`, `self-stretch`

html

// Center everything vertically and horizontally
<section className="flex flex-col items-center justify-center h-full">
  ...
</section>

// Space items evenly in a row
<nav className="flex flex-row items-center justify-between px-8 py-4">
  <span>Logo</span>
  <div className="flex flex-row gap-6">
    <a>About</a>
    <a>Pricing</a>
    <a>Contact</a>
  </div>
</nav>

Gap & Padding

Use Tailwind spacing utilities for gap (space between children) and padding (inner spacing):

Property	Classes	Example
Gap	`gap-*`	`gap-4` (16px), `gap-8` (32px)
Padding (all)	`p-*`	`p-8` (32px all sides)
Padding (axis)	`px-`, `py-`	`px-8 py-16` (32px horiz, 64px vert)
Padding (side)	`pt-`, `pr-`, `pb-`, `pl-`	`pt-24 pb-16 px-8`

Wrap

Use flex-wrap on row layouts to allow children to wrap to the next line when they exceed the container width. Great for tag clouds, icon grids, and responsive card layouts.

html

// Wrapping grid of cards
<div className="flex flex-row flex-wrap gap-4 p-8">
  <div className="w-64 p-4 rounded-lg bg-muted">Card 1</div>
  <div className="w-64 p-4 rounded-lg bg-muted">Card 2</div>
  <div className="w-64 p-4 rounded-lg bg-muted">Card 3</div>
  <div className="w-64 p-4 rounded-lg bg-muted">Card 4</div>
</div>

Child Sizing

Inside a flex container, children can size themselves in three modes. Width and height are controlled independently:

Mode	Behavior	Tailwind
Hug	Shrinks to fit content. Default for text nodes.	`w-auto` / `h-auto`
Fixed	Explicit size that doesn't change with content.	`w-64`, `w-[400px]`, `h-96`
Fill	Expands to fill available space. Multiple fill children share space via `flex-grow`.	`w-full` / `h-full` / `grow`

html

// Sidebar (fixed) + main content (fill)
<div className="flex flex-row h-full">
  <aside className="w-64 p-4 bg-muted">Sidebar</aside>
  <main className="grow p-8">Main content fills remaining space</main>
</div>

// Two equal columns
<div className="flex flex-row gap-8">
  <div className="grow p-8 bg-muted rounded-lg">Column 1</div>
  <div className="grow p-8 bg-muted rounded-lg">Column 2</div>
</div>

Text reflow

When a text node is set to fill width (e.g., w-full inside a flex parent), the layout engine assigns the computed width and the text reflowsto fit — it wraps naturally rather than scaling or stretching. Text nodes default to hug heightso wrapping text pushes siblings down automatically.

Common Patterns

Full-page vertical stack

The most common layout: stacked sections filling the artboard width.

javascript

create_artboard({
  name: "Desktop",
  width: 1440, height: 900,
  className: "flex flex-col"
})

// Each section fills the width automatically
add_section({
  parentId: "artboard-1",
  jsx: `<nav className="flex flex-row items-center justify-between px-8 py-4 border-b">
  <span className="font-semibold text-lg">Brand</span>
  <div className="flex flex-row gap-6 text-sm">
    <a>Features</a>
    <a>Pricing</a>
    <a>About</a>
  </div>
</nav>`
})

add_section({
  parentId: "artboard-1",
  jsx: `<section className="flex flex-col items-center justify-center py-32 gap-6">
  <h1 className="text-6xl font-bold tracking-tight">Your headline here</h1>
  <p className="text-xl text-muted-foreground max-w-2xl text-center">Supporting copy goes here.</p>
</section>`
})

Card grid

html

<section className="flex flex-col items-center py-24 px-8 gap-12">
  <h2 className="text-4xl font-bold">Features</h2>
  <div className="flex flex-row flex-wrap justify-center gap-6 max-w-5xl">
    <div className="w-80 p-6 rounded-xl bg-muted">
      <h3 className="font-semibold mb-2">Feature 1</h3>
      <p className="text-sm text-muted-foreground">Description here.</p>
    </div>
    <div className="w-80 p-6 rounded-xl bg-muted">
      <h3 className="font-semibold mb-2">Feature 2</h3>
      <p className="text-sm text-muted-foreground">Description here.</p>
    </div>
    <div className="w-80 p-6 rounded-xl bg-muted">
      <h3 className="font-semibold mb-2">Feature 3</h3>
      <p className="text-sm text-muted-foreground">Description here.</p>
    </div>
  </div>
</section>

Two-column with sidebar

html

<div className="flex flex-row h-full">
  <aside className="w-72 flex flex-col gap-2 p-6 border-r bg-muted/30">
    <a className="px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm">Dashboard</a>
    <a className="px-3 py-2 rounded-md text-sm text-muted-foreground">Settings</a>
    <a className="px-3 py-2 rounded-md text-sm text-muted-foreground">Billing</a>
  </aside>
  <main className="grow p-8">
    <h1 className="text-2xl font-semibold mb-4">Dashboard</h1>
    <p className="text-muted-foreground">Main content area.</p>
  </main>
</div>

Reference

Creating tools — create_artboard, add_section, add_node
Modifying tools — update_node, update_class to change layout classes
All MCP tools — complete tool reference
Tailwind CSS Flexbox — upstream reference for all flex utilities