Example dev setup (boilerplate) for building apps with Symbols and DOMQL. Check the developer docs for the full reference.
The default page shows a centered paper-style dialog card with a heading and links to the Symbols docs — a minimal but complete example of routing, components, design system tokens, and built-in Link elements.
npm i -g @symbo.ls/cli
smbls create my-app
cd my-app
npm startOr clone this repo directly:
git clone git@github.com:symbo-ls/starter-kit.git
cd starter-kit
npm install
npm startnpm installnpm start
# or
smbls startnpm run deploy
# or
smbls deployInteractively choose a deploy target: Symbols Platform, Cloudflare Pages, Vercel, Netlify, or GitHub Pages. Your choice is saved to symbols.json for future deploys.
To initialise the deploy config without deploying:
smbls deploy --initsmbls push # push local changes to the platform
smbls pull # pull remote changes locally
smbls sync # two-way syncsmbls ask "how do I add a dark theme?"Interactive AI assistant. On first run it walks you through provider setup and auto-configures symbols-mcp for your editor.
symbols/
pages/ # route → component map { '/': { ... } }
components/ # shared components
designSystem/ # color, theme, typography, spacing, font_family …
functions/ # plain JS helpers callable via el.call('name')
methods/ # element methods
state.js # root state
app.js # root element
context.js # wires everything together
index.js # entry point — create(app, context)
| Command | Description |
|---|---|
smbls start |
Start local dev server |
smbls create <name> |
Scaffold a new project |
smbls deploy |
Deploy to chosen target |
smbls push |
Push to Symbols Platform |
smbls pull |
Pull from Symbols Platform |
smbls sync |
Bidirectional sync |
smbls publish |
Publish as a Symbols package |
smbls ask "<question>" |
AI assistant |