Skip to content
vell oo

Start typing to search the documentation.

Velloo documentation

Markdown for LLMs ↗

Tour the sample

A tour of Elsewhere, the welcome sample velloo init ships for every provider, with two boards, seven screens, three snippets, photography, notes, and dark frames.

velloo init seeds new folders with Elsewhere, a fictional boutique travel product. It’s the “Elsewhere welcome sample” goal in the wizard, and the default when you run velloo init --start=sample non-interactively. It isn’t a toy: it’s a complete design folder built through Velloo’s own tools, and the fastest way to learn the model is to open it and poke at it.

Every provider gets the same sample. shadcn folders receive the canonical version. For MUI, Ant Design, Chakra, and no-library folders, init rebuilds each screen and snippet with that provider’s own components: Badge becomes a Chip or Tag, NativeSelect becomes the library’s Select, and shadcn’s Chart becomes a static SVG. Tailwind classes are translated into the native style channel: sx for MUI and Chakra, and inline style for Ant Design and no-library. For those last two, rules that can’t be written inline, such as media queries, are appended to theme/custom.css. Screen ids, snippet ids, node $ids, boards, and assets are identical across all five.

What ships

Two boards:

BoardIdFrames
Elsewhere · The journeymainEight frames over four screens: Discover, Stay, Itinerary, and Overview at desktop (1440). Discover and Itinerary also get a mobile frame (390), and Discover and Overview each get a dark-mode frame
Agentic trip creation explorationelsewhere-detailsThree tall desktop frames, one per concept, with a canvas note above each

Seven screens:

Screen idNameWhat it shows
elsewhere-discover01 · Discover your elsewherePhoto hero, search InputGroup, three destination cards
elsewhere-stay02 · A stay in KyotoAccommodation page with photos, badges, reviews, and a booking Field group
elsewhere-itinerary03 · A day in KyotoTrip Tabs, a day picker, activity cards, and the illustrated route map
elsewhere-overview04 · Your trip, at a glanceFour trip metrics, budget and weather charts, progress, and a bookings Table
elsewhere-trips-libraryA · The conversational conciergeA chat built from the Message family beside a persistent trip summary
elsewhere-trips-boardB · The brief-to-plan workspaceA structured brief (Field, Input, Switch) next to an editable plan
elsewhere-trips-journalC · The inspiration-led companionVisual choices that grow into a destination, dates, and an itinerary

Three snippets. Every param is a string:

Snippet idNameParamsUsed by
elsewhere-navElsewhereNavnoneThe top bar on all seven screens
elsewhere-destinationDestinationCardimage, name, country, noteDiscover’s Kyoto, Bali, and Dolomites cards
elsewhere-metricTripMetriclabel, value, noteOverview’s four metric tiles

Also in the folder:

  • theme/default.json: the curated Elsewhere palette, which is velloo init’s default elsewhere preset. Colors are hex values in shadcn’s slot shape (for example, primary is { "DEFAULT": "#244D3C", "foreground": "#FFFFFF" }), and an explicit colorsDark tree defines the dark palette. Typography declares sans as DM Sans, display as DM Serif Display, and mono, loaded through googleFonts, plus five typesets: default, docs, chat, compact, and reading. If init detected your app’s theme, or you passed --theme-preset, those colors replace the Elsewhere ones.
  • theme/custom.css: two small sample classes. ew-photo-shade darkens the hero photos, and ew-route-map letterboxes the map on narrow screens.
  • assets/: six travel photographs (elsewhere-kyoto.jpg, -japan, -bali, -alps, -room, -forest) and an authored SVG route map, elsewhere-kyoto-map.svg.
  • assets.json: seeded prompt metadata for all seven assets. When you select an Image node, the canvas shows a prompt and generation controls. These are demo prompts: the photos weren’t generated from them.
  • ASSET-SOURCES.md: where each photograph came from and a note that the map was drawn for the sample.
  • boards/elsewhere-details.notes.json: the three evaluation notes on the exploration board.

What to look at first

Discover’s three frames. On main, the elsewhere-discover screen sits in a desktop frame, a 390px mobile frame, and a dark frame. There is one tree. Frames are only placements, so the tree reflows at 390px and flips to the dark palette in the dark frame. Edit the hero copy in any one of them and all three update, because there’s nothing to sync. This is the core of the Board → Frame → Screen model.

The pinned schemes. Open boards/main.json. The two dark frames carry "scheme": "dark", the Discover and Overview desktop frames carry "scheme": "light", and the rest have no pin, so they follow the canvas’s light/dark toggle. A pin fixes how one placement renders, which is how a single board can show light and dark side by side. Because elsewhere-discover is hosted with conflicting schemes, a screenshot of it has to name a mode explicitly.

DestinationCard. Discover’s grid is three instances of one snippet, each passing different args:

{
  "$snippet": "elsewhere-destination",
  "args": {
    "image": "/assets/elsewhere-kyoto.jpg",
    "name": "Kyoto",
    "country": "JAPAN / 35.0116° N",
    "note": "Ancient rituals. A slower rhythm."
  }
}

Inside the body, { "$param": "image" } feeds an Image’s src and the other three params fill the text. One definition, three cards, zero copy-paste. In compose JSX the snippet is also addressable by its PascalCase tags, <DestinationCard> or <ElsewhereDestination>. See Snippets.

The Overview screen. TripMetric carries the four headline numbers. The budget and weather panels are the built-in Chart component (a bar chart and a line chart), and the bookings list is a real Table. Overview also has a dark frame, so it’s a good place to judge dark-mode adaptation.

The exploration board. elsewhere-details compares three agentic trip-creation approaches as full-height flows. The notes above the frames are canvas notes, free-positioned markdown in board coordinates that agents can read and write with list_notes, add_note, and update_note. Use this board as an example of how to lay out and annotate alternatives for review.

The theme. Open theme/default.json. The screens use semantic tokens (bg-background, text-muted-foreground, bg-primary) and the font-display role, so changing the theme or the mode restyles all seven screens at once. See Themes.

How it teaches the model

  • Frames sharing screens. Discover and Itinerary appear at desktop and mobile. Same tree, multiple viewports, edits sync.
  • Scheme pins. Dark frames sit next to light ones on the same board without forking a screen.
  • Boards per purpose. The product journey and the concept exploration live on separate boards.
  • Snippets over copy-paste. The nav, destination card, and metric tile are defined once each.
  • Stable ids. Every component node in the seven screens carries an $id such as elsewhere-discover-44, so @id locators keep working as the tree changes.
  • Notes as review context. The exploration board carries its rationale beside the frames.

Try things

The sample is meant to be remixed, not preserved. These are good first requests for your agent, shown as the operations it would call. The JSON examples use the shadcn version’s class names.

  • Add a fourth destination by appending a snippet tag to Discover’s card grid:

    {
  "screenId": "elsewhere-discover",
  "mode": "append",
  "parentPath": "@elsewhere-discover-44",
  "jsx": "<DestinationCard image=\"/assets/elsewhere-forest.jpg\" name=\"Yakushima\" country=\"JAPAN / 30.3582° N\" note=\"Moss, mist and cedar.\" />"
}

    That’s compose. The grid is md:grid-cols-3, so the card wraps onto a second row.

  • Change one card without touching the others. update_snippet_instance with { "screenId": "elsewhere-discover", "path": [2, 1, 1], "argPatch": { "note": "Temples at first light." } } edits the Bali card only.

  • Change every TripMetric at once. update_snippet with { "snippetId": "elsewhere-metric", "patch": { "innerPatch": { "innerPath": "1", "propPatch": { "className": "font-display font-normal tracking-[-0.035em] text-4xl" } } } } changes the value heading in all four tiles. Check a snippet on its own with render_snippet.

  • Compare light and dark. Run screenshot with { "screenId": "elsewhere-overview", "mode": "compare" }. Any class or theme problems come back in the result’s diagnostics.

  • Pin another frame. update_frame with { "boardId": "main", "patches": [{ "frameId": "elsewhere-stay-desktop", "patch": { "scheme": "dark" } }] } renders the Stay screen dark on the board.

  • Try a new palette without losing this one. Call add_theme with { "name": "harbour" }, then set_theme with { "theme": "harbour", "from": { "seedColor": "#1f4e79" } }, then update_board with { "boardId": "main", "patch": { "theme": "harbour" } }. Run score_theme_contrast with { "theme": "harbour" } to check the result.

  • Put the exploration away. update_board with { "boardId": "elsewhere-details", "patch": { "archived": true } } hides the board from the sidebar and list_boards without deleting it.

When you’re done exploring, the loop for real work is in Design a screen.