Examples / Todo App Fullstack · Data

A fullstack example (examples/todo_app) — the server functions run natively, so run it locally with vel dev rather than in the browser playground.

Todo App

A fullstack app in one .vel file: server query/mutation functions backed by SQLite, called from the UI as if they were local. Reactive state re-renders the list when a mutation returns.

server query / mutation in .vel
SQLite-backed persistence
velrpc typed client calls
Reactive list re-render

A fullstack example (examples/todo_app) — the server functions run natively, so run it locally with vel dev rather than in the browser playground.

todo-app.vel vel

 server query listTodos() -> [Todo] : todos
  db.all("SELECT id, title, done FROM todos ORDER BY id")

server mutation addTodo(title: str) -> [Todo] : todos
  db.run("INSERT INTO todos(title) VALUES(?)", title)
  db.all("SELECT id, title, done FROM todos ORDER BY id")

#App
  @todos: [Todo] = velrpc::listTodos()
  for t in $todos
    Card -> T "{t.title}"

← Previous

20,000 Photos

Vel Draw