Element catalog

All 83 element types Boceto v0.1 ships, grouped by domain. Every card shows the element rendered + the source line that produced it.

Layout Typography Form (basic) Form (modern) Media Content Overlays Feedback Data viz Mobile chrome System chrome AR / spatial

Layout

box

Plain rectangle. Generic container.

element box 8 8 224 84 "Box"

card

Box with a header divider — bounded content area.

element card 8 8 224 84 "Card title"

modal

Floating window with title bar + close.

element modal 8 8 224 100 "Confirm"

navbar

Top app bar with brand + items.

element navbar 0 0 W H "Acme" items="Home|About"

divider

Horizontal rule.

element divider 0 0 W 12 ""

sidebar

Vertical nav rail with items + active row.

element sidebar X Y W H "Apps" items="…" active=N

Typography

heading

Bold large text. fontSize=N overrides.

element heading 0 0 W H "Heading" fontSize=22

label

Plain inline text, optionally wrapped.

element label 0 0 W H "label text"

breadcrumb

Slash-separated trail; last segment is current page.

element breadcrumb 0 0 W H "Home / Docs / Page"

quote

Italic text with a left bar — pull-quote style.

element quote 0 0 W H "quote text"

Form — basic

input

Single-line text input.

element input 0 0 W H "placeholder"

textarea

Multi-line input with corner grip.

element textarea 0 0 W H "placeholder"

button

Default button.

element button 0 0 W H "label"

primary-button

High-emphasis button (filled blue).

element primary-button 0 0 W H "label"

select

Closed dropdown trigger with chevron.

element select 0 0 W H "label"

checkbox

Square box + checkmark + label.

element checkbox 0 0 W H "label"

radio

Round selector + label.

element radio 0 0 W H "label"

Form — modern

switch

On/off pill toggle. on=true.

element switch 0 0 W H "label" on=true

slider

Value selector. value / min / max.

element slider 0 0 W H "" value=66

range-slider

Two-thumb range selector.

element range-slider 0 0 W H "" low=20 high=80

search

Input with leading magnifier glyph.

element search 0 0 W H "placeholder"

segmented-control

iOS-style pill toggle group.

element segmented-control 0 0 W H "" items="A|B|C" active=N

combobox

Input + open suggestions list.

element combobox 0 0 W H "ph" items="…"

date-picker

Date field with calendar trigger icon.

element date-picker 0 0 W H "2026-03-15"

color-picker

Color swatch + hex code.

element color-picker 0 0 W H "#hex"

file-upload

Dashed dropzone with cloud icon.

element file-upload 0 0 W H "label"

rating

Star row. max + value.

element rating 0 0 W H "" max=5 value=4

otp-input

N boxes for a one-time code.

element otp-input 0 0 W H "1234" count=6

tag-input

Input field with chip pills inside.

element tag-input 0 0 W H "" tags="…"

stepper-input

Number with − / + buttons.

element stepper-input 0 0 W H "12"

Media

image

Image placeholder with diagonal cross.

element image 0 0 W H "alt"

video

Video placeholder with play triangle.

element video 0 0 W H "label"

avatar

Circular profile placeholder, optional name.

element avatar 0 0 W H "name"

Content

list

Bulleted list. items=.

element list 0 0 W H "" items="…"

table

headers= + data= (rows separated by ;).

element table 0 0 W H "" headers="…" data="r1;r2"

tabs

Tab strip + body. active=N.

element tabs 0 0 W H "body" tabNames="…" active=0

badge

Small status pill.

element badge 0 0 W H "NEW"

progress

Horizontal bar. progress=N.

element progress 0 0 W H "" progress=N

pagination

current= + total=.

element pagination 0 0 W H "" current=N total=N

alert

Tinted box with info icon.

element alert 0 0 W H "message"

chip

Removable filter pill. closable=true.

element chip 0 0 W H "label" closable=true

code-block

Monospaced text block. lang=.

element code-block 0 0 W H "code" lang=js

accordion

Collapsible panel. expanded=true.

element accordion 0 0 W H "title" expanded=true

chat-bubble

Message bubble. side=left|right.

element chat-bubble 0 0 W H "msg" side=left

calendar

Month grid. month/year/selected.

element calendar 0 0 W H "" month=3 year=2026 selected=15

tree

File tree with depth via leading /.

element tree 0 0 W H "" items="root|/child|//grandchild"

stepper

Numbered horizontal steps. current=N.

element stepper 0 0 W H "" items="…" current=N

carousel

Wide slide area + arrows + dots.

element carousel 0 0 W H "label" total=N active=N

kbd

Keycap-shaped shortcut display.

element kbd 0 0 W H "⌘K"

mention

Inline @name styled.

element mention 0 0 W H "username"

ai-suggestion

Inline AI suggestion + Tab hint.

element ai-suggestion 0 0 W H "suggested text"

Overlays

dropdown-menu

Open menu state with rows. --- = separator.

element dropdown-menu 0 0 W H "" items="A|B|---|C"

tooltip

Dark floating box with arrow tail.

element tooltip 0 0 W H "tip" arrow=top

toast

Notification pill. variant=info|success|warn|error.

element toast 0 0 W H "msg" variant=success

popover

Floating box with header + body + arrow.

element popover 0 0 W H "title" arrow=top

Feedback

spinner

Loading arc.

element spinner 0 0 W H ""

skeleton

Gray placeholder lines. lines=N.

element skeleton 0 0 W H "" lines=4

status-dot

Small colored dot. status=online|away|offline|busy.

element status-dot 0 0 W H "" status=online

notification-bell

Bell icon + count badge. count=N.

element notification-bell 0 0 W H "" count=N

presence-cursor

Live-cursor with name pill. cursorColor=#hex.

element presence-cursor 0 0 W H "Name" cursorColor=#hex

Data viz

chart-bar

Vertical bars. data="3,5,2,7,4".

element chart-bar 0 0 W H "" data="3,5,2,7,4"

chart-line

Line chart with point markers.

element chart-line 0 0 W H "" data="…"

chart-donut

Donut chart with segments.

element chart-donut 0 0 W H "" data="40,30,20,10"

chart-area

Filled area below the line.

element chart-area 0 0 W H "" data="…"

chart-sparkline

Tiny inline trend.

element chart-sparkline 0 0 W H "" data="…"

gantt

Time-axis bars. tasks="Name:start:end".

element gantt 0 0 W H "" tasks="…" total=N

heatmap

Grid of intensity-shaded cells.

element heatmap 0 0 W H "" cols=N rows=N

map

Map placeholder with curvy roads + pin.

element map 0 0 W H "label"

code-diff

Red/green +/- diff lines.

element code-diff 0 0 W H "+ added\n- removed"

Mobile chrome

phone-frame

Outer device chrome with notch + side buttons.

element phone-frame 0 0 W H "" model=iphone

status-bar

Time + signal/wifi/battery icons.

element status-bar 0 0 W H "9:41"

home-indicator

iOS bottom gesture pill.

element home-indicator 0 0 W H ""

fab

Circular floating action button.

element fab 0 0 W H "+"

app-icon

Rounded icon. bg/glyph/badge.

element app-icon 0 0 W H "" glyph="A" bg=#hex badge=N

System chrome

window-frame

macOS window with traffic lights + title.

element window-frame 0 0 W H "title"

browser-frame

Browser chrome with tabs + URL bar.

element browser-frame 0 0 W H "url"

terminal

Black box, monospace, blinking cursor.

element terminal 0 0 W H "$ command\noutput"

AR / spatial

glass-window

visionOS translucent window with handle bar.

element glass-window 0 0 W H "title"

gaze-cursor

Hover ring + center dot for eye tracking.

element gaze-cursor 0 0 W H ""

pinch-indicator

Two-finger pinch gesture marker.

element pinch-indicator 0 0 W H ""

volumetric-scene

Stage + perspective grid + 3D cube.

element volumetric-scene 0 0 W H "title"

passthrough-frame

Camera-edge frame with live indicator.

element passthrough-frame 0 0 W H ""

voice-input

Listening waveform indicator.

element voice-input 0 0 W H "label"

DSL essentials

Layout primitives

Stop hand-computing X/Y. row stacks left-to-right, col stacks top-to-bottom. gap spaces, align controls perpendicular placement.

Named IDs (two ways)

Inline shorthand: element button#submit 0 0 100 36 "Save". Or attribute form: element button 0 0 100 36 "Save" id=submit. Both produce id: "submit"; the serializer always emits the shorthand.

Composite components

Define a reusable widget once; reference it many times. $name / ${name} placeholders inside the body get filled from caller-supplied attributes.

component user-card(name, role)
  element card 0 0 240 80 ""
  element avatar 8 8 40 40 ""
  element heading 56 12 180 24 "$name"
  element label 56 38 180 18 "$role"
end

element user-card 100 50 240 80 "" name="Jane" role="Admin"
element user-card 100 150 240 80 "" name="John" role="User"