Quickstart

This is a syntax-first tour of a Vel app: the .vel source, the thin C++ entry point, and the reactive loop that ties them together. You can run all of this live in the playground — no setup required.

Hello, Vel

A component lives in a .vel file. Short widget names, theme tokens, and reactive state:

#Hello
  @name = "world"
  V p=lg g=md
    T "Hello, {$name}" font=bold/title
    In placeholder="Name" value=$name

• #Hello declares a component.
• @name = "world" is a reactive signal.
• V is a vertical stack with padding (p=lg) and gap (g=md).
• T is text; {$name} interpolates the signal.
• In is a text input bound to $name.

The entry point

A thin main.cpp boots the app and mounts the component:

#include "vel/App.h"
#include "hello.vel.h"

int main() {
    vel::App app(480, 240, "Hello");
    app.setRoot(std::make_unique<Hello>());
    return app.run();
}

The reactive loop

Type in the field. The signal updates. The label re-renders — and nothing else does. When nothing changes, Vel uses ~0 CPU thanks to damage tracking.

State, scroll position, focus and drag all survive a hot reload, so iterating on a .vel file is sub-second. See Recipes › Hot reload.

Where next