UI & surfaces
UI is declared as components with state, methods, and a view tree. Product kind decides the surface. New apps start as a blank white canvas (theme = "light"). Style with vamp.css — full design guide.
| kind | Surface | Notes |
|---|---|---|
desktop | Native window | eframe/egui · vamp.css palette |
web | Browser via localhost | HTML + embedded vamp.css |
mobile | Native window | Mobile-first size (390×780) |
backend | None | Services only |
Web = browser
CLI prints “Opening web app in your browser…” and binds
127.0.0.1 (5173 / 3000 / 8080…). Press Ctrl+C to stop. Stylesheet also at /vamp.css.
Component syntax
component HomePage {
state title = "Home"
state count = 0
fn inc() {
count = count + 1
}
view {
Column {
Title(title)
Lead("Built with vamp.css")
Text(count)
Nav {
Button("Inc", onClick: inc, variant: "nav")
Button("Soft", onClick: inc, variant: "soft")
}
}
}
}vamp.css design system
Colors and components live in vamp.css. In a page you import it, then link design values/functions onto widgets.
// 1) Import the design system (stylesheet + helpers)
import "vamp.css"
// same as: import "styles/vamp"
// 2) Link functions → class / color props
view {
Column {
class: cls("col")
Title("Hello", class: gradient())
Text("muted line", color: color("muted"))
Nav {
class: nav()
Button("Home", onClick: go_home, class: btn("nav"))
Button("Soft", onClick: go, class: btn("soft"))
}
Badge("Calgary", class: badge("violet"))
}
}| In .vamp | Comes from | Applies |
|---|---|---|
import "vamp.css" | styles/vamp.vamp + sheet | design functions + web CSS |
color("pink") | --v-pink token | color: prop → CSS var |
btn("nav") | .v-btn-nav | class: prop |
cls("glass") / glass() | .v-glass | class: prop |
bg("card") | --v-card | bg: prop |
Project files: styles/vamp.css (tokens/colors) and styles/vamp.vamp (link functions). Web also serves /vamp.css.
UI only
vampcode run app/page.vamp
Web opens a desktop app?
Ensure
kind = "web" in vamp.toml, create with --type web, and update the CLI.