Zvessa docs

Starter templates

A starter template is a ready mix of kits, pages, words, tabs and a style. People pick one in onboarding ("How do you want to start?"), or the owner switches to one later from HQ (the Starters block). What a template makes is an ordinary blueprint: every page, tab, word and colour stays a setting that the owner can edit on the page or ask the AI to change. Switching is one saved version, so it can be undone in History.

Business starterPersonal starter
Feels likeThe chat app: one chat list, no tab barA soft, personal home
StyleMessenger (extends Classic; chat-app colours, glass bars, light and dark)Soft (cream and rose, rounded type, roomy)
Navigationdashboard.nav: "list": the chat list is home; HQ, AI, Calls, Games, Services and Apps are rows in itTabs: Home, Chats, Calls, Plans, Photos (HQ and AI in the top bar)
Kitsdirect-chat, group-chat, channels, support, calls, trivia, quiz-board, survey-showdown, charades, party-pack, game-maker, polls, wheel, tv, coins, leaderboards, vip, verified, appointments, analyticsdirect-chat, group-chat, calls, gallery, guestbook, group-plan, polls, analytics

Business starter #

Personal starter #

Photo book starter #

Your photos made into a book you flip through, in the Album style. Tabs: Book (the book fills itself from the Gallery, a chapter per month), Photos, Albums (every #tag is a book), Chats, Guestbook; HQ and the AI in the top bar. Details in PHOTOBOOK.md.

Editing a page #

Every page has an Edit button for people who manage the space. Edit mode turns the page into its own editor:

Native on phones #

Blocks the templates add #

All are described in convex/lib/templates/blocks.ts, so the AI, the editor and the docs catalog read the same descriptions.

BlockWhat it is
heroPage header. look: "band" (colour band, round picture) or "card" (the chat app's header: rounded logo, eyebrow in small capitals over the title, soft glow). Buttons are its children (button, call, tile)
tiles / tileApp-style grid. size small or large, tone solid / soft / glossy, frame: "card", heading: "label". A tile's note is a status line on small tiles; badge: "Live" draws a red LIVE pill
links / linkService or link section. layout list, cards, grid, icons (the app grid on a card) or banners (swiped sideways); heading, tone; each link has title, note, price, tag, action, icon, tint, image
chatsThe chat list (full screen when it is a page's only block). Its children are custom rows for pages, matched by href (a lobby.row for #games). search header / field / off, filters, compose, rowsTop and rowsUnder (page ids or "ai") place page rows in the list
conversation(Chats kit) One chat with its bar. On the page talk.screen names, it is every opened chat. background, send: "icon", calls, details, header
hq.navigationHQ → Navigation: the bottom tab bar switch and the order of the panes
calls.recentCall buttons (children: call) and the recent calls log
hq.overviewHQ KPIs over 7/14/30 days
hq.startersSwitch the space to a starter template

Links (href) take #page-id, https://…, chat:<conversation key>, ai, mailto: and tel:. A link to a page that doesn't exist is dimmed for managers and hidden for others, so removing a kit never breaks a page.

blueprint.dashboard.panes is the app's pages in order. blueprint.dashboard.nav picks how they show:

The owner switches it in HQ → Navigation, or asks the AI.

Built only from blocks and settings #

A template is plain blueprint data. Every block kind and prop it uses is in the block catalog the AI reads, and every setting (dashboard.nav, talk.screen) is in the AI guide, so the AI can build the same starter, or a new one, from scratch. tests/templates.test.ts checks this for every template.

Making another template #

Add a TemplateDef in convex/lib/templates/ (see types.ts) and list it in TEMPLATES in index.ts. Tests in tests/templates.test.ts check every template makes a valid space, its tabs have icons, its links resolve, every kit can still be removed, and switching twice is stable.

Server functions #

Feeds starter
Feels likeA social app (Instagram, Threads, X)
StylePulse (extends Classic; white by day, true black by night, hot pink and violet, bold type)
Tabs (phone)Home, Explore, New, Activity, Profile
In the top barMessages, HQ, AI
Kitsfeed, photos, stories, profiles, gallery, direct-chat, outside-feeds, polls, analytics

Feeds starter #

Built only from general blocks the AI also uses, so anyone can ask the AI for the same thing (or any part of it).

Picker covers (showcase) #

A template can carry showcase: { tagline, gradient: [colour, colour], stickers: [emoji…], shots: [{ icon, title, note, tint }] }. The picker (onboarding and HQ's Starters) draws a bright gradient cover with floating emoji, the tagline and a tilted phone showing the shots. Plain views, no images to download. The emoji bob gently only on the picked card, only while the app is in front and the person allows motion. Without showcase the picker shows the plain card. checkShowcase keeps it in limits (tagline 60, 6 stickers, 3 shots).

The switcher block #

switcher shows one child block at a time under a segmented control: For you / Following, Posts / Photos / People, Activity / Saved, Menu / Reviews. Props: labels (one per child; a missing one uses the child's title), look (segments · tabs · pills), start. Only the open part is drawn, so the others' live data isn't loaded until opened. In Edit mode all parts show so each can be changed.