Interface Builder

Overview

The Interface Builder lets you create UI without writing HTML directly. Elements are stored as structured data, making them easy for AI to modify and for you to edit visually.

Route Settings Menu

Create, edit, and delete routes using the route dropdown. The route you're editing is always the route shown in the address bar. You can search for other routes in your project using the search facility in the top navigation (see Tour of the Platform).

Set the page name, URL path, and other route-specific settings.

Responsive Views

Switch between screen sizes to preview how your UI appears on different devices.

• Desktop: Full-width view for large screens
• Tablet: Medium-width view for tablet devices
• Mobile: Narrow view for phone screens

Live Preview

The main canvas shows your UI exactly as it will appear. Click any element to select it.

• Orange dashed border: Currently selected element
• Click to select: Click any element in the preview to select it
• Element tree: Shows DOM hierarchy on the right

Element Tree

Navigate your page structure using the element tree panel.

• ▼: Expanded element (click to collapse)
• ▶: Collapsed element (click to expand)
• Click: Select element
• Drag: Reorder elements within the tree

Adding Elements

Add new elements by clicking the plus icon in the element tree navigator.

New elements are added as children of the currently selected element.

Element Property Editor

Edit the selected element's attributes in the property panel.

Common Properties

• Tag: HTML element type (div, section, button, etc.)
• Classes: Tailwind CSS utility classes
• Text Content: Inner text of the element
• id: Unique identifier
• href: Link destination (for anchor tags)
• src: Image/media source

See the MDN Web Docs for the full HTML attribute specification.

Event Handlers

Connect UI elements to methods using event handlers.

Available Events

• @click: When element is clicked
• @submit: When form is submitted
• @change: When input value changes (on blur)
• @input: When input value changes (real-time)
• @focus: When element receives focus
• @blur: When element loses focus
• @keydown: When key is pressed
• @mouseenter: When mouse enters element

Element Types

Stellify uses specific element types to categorise attributes and properties. Once your interface is reassembled as HTML/CSS code, these element types don't have any bearing.

s-wrapper

Container elements like div, section, header, footer.

<div class="container mx-auto p-4">
  ...content...
</div>

s-input

Form controls: input, button, textarea, select.

<button @click="handleClick">Click me</button>
<input type="text" v-model="name" />

s-form

Form container with submit handling.

<form @submit.prevent="handleSubmit">
  ...fields...
</form>

s-media

Images, videos, and audio elements.

<img src="/hero.jpg" alt="Hero image" />

s-loop

Repeating elements with v-for.

<div v-for="item in items" :key="item.id">
  {{ item.name }}
</div>

Variable Bindings

Display reactive data using template syntax for Vue, Blade, and other templating engines.

Use {{ variable }} syntax to display reactive data. The builder shows available variables from your Vue component's script setup.

Next Steps

• Code Editor - Write backend and frontend logic
• Tour of the Platform - Overview of Stellify features
• Working with AI - Get AI to build UI for you