Tasks — SQLite Task Manager

A persistent to-do manager. Demonstrates the db capability (SQLite) end-to-end, router-based screens, the @glyx-dev/design component library, and light/dark theming — all in ~250 lines of React.

Mode: JS-only dev (runs on the prebuilt glyx-runner — no Rust compile). Demonstrates: db, routing, @glyx-dev/design, @glyx-dev/icons, theming

Run it

# one-time: build + cache the JS-only runner
glyx runtime build
 
cd examples/tasks
glyx dev

Features

Create, edit, complete, and delete tasks (persisted in SQLite)
Filter by All / Active / Done and by priority (low / normal / high / urgent)
Empty state with a call-to-action
Light / dark theme toggle
Seeds three example tasks on first launch

Key code

Database setup

import { db } from '@glyx-dev/react'
 
await db.open('tasks.db')
await db.run(`CREATE TABLE IF NOT EXISTS tasks (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  title TEXT NOT NULL DEFAULT '',
  body TEXT NOT NULL DEFAULT '',
  done INTEGER DEFAULT 0,
  priority TEXT DEFAULT 'normal',
  due TEXT DEFAULT '',
  created_at INTEGER
)`)
const [{ cnt }] = await db.query('SELECT count(*) AS cnt FROM tasks')
if (cnt === 0) {
  await db.transaction([
    { sql: 'INSERT INTO tasks (title, body, priority, created_at) VALUES (?,?,?,?)',
      params: ['Welcome to Tasks', 'Toggle me, edit me, delete me.', 'normal', Date.now()] },
    // ...more seed rows
  ])
}

Routing between the list and the editor

import { Router, Route, useNavigate } from '@glyx-dev/router'
 
function ListScreen() {
  const navigate = useNavigate()
  // ...
  return <IconButton icon="plus" onPress={() => navigate('edit', { id: null })} />
}
 
render(
  <ThemeProvider colorScheme="system">
    <Router initialRoute="list">
      <Route name="list" component={ListScreen} />
      <Route name="edit" component={EditScreen} />
    </Router>
  </ThemeProvider>
)

glyx.config.json

{
  "window": { "title": "Tasks", "width": 760, "height": 640, "renderMode": "skia" },
  "capabilities": { "db": true },
  "dev": { "entry": "js/app.jsx", "output": "js/dist/app.js", "watch": ["js"] }
}

Note: canvas3d is a build feature, not a capability — never put it under capabilities.

Source

Browse the full source on GitHub: glyx-dev/glyx · examples/tasks (opens in a new tab)

Overview Dashboard