# The tools, and where they run

> The languages, frameworks, browser APIs and build tools ChabuLab uses, and how every product runs as its own Worker on Cloudflare under chabulab.com.

Current, fast tools for each job. Dependencies always track their latest stable versions, and every product runs on Cloudflare's network, close to the people using it.

## Languages and frameworks

One language on the web, a native one on the Mac.

- **TypeScript 7:** Every web project, type-checked by the new native compiler
- **React 19:** Sites, dashboards and games
- **TanStack:** Start, Router, Query, Form and Table
- **Svelte 5:** Lean browser tools with heavy media work
- **Expo · React Native:** LexiLoop on the web, Android and iOS from one codebase
- **Swift:** Ribbon, with AppKit and SwiftUI

## Interface

Accessible primitives, dressed in each product's own design system.

- **Tailwind CSS 4:** Utilities on top of design tokens
- **Radix · shadcn/ui:** Accessible components, restyled from scratch
- **OKLCH tokens:** Colour that stays even across light and dark
- **Commissioner · Literata:** Self-hosted variable fonts with full Vietnamese
- **Motion:** Interruptible animation in games
- **Lucide:** One consistent icon set

## In the browser

What lets hours of audio and video be processed without uploading a byte.

- **WebCodecs:** Hardware encoding and decoding, with WASM fallbacks
- **Web Audio:** Mixing, loudness metering (EBU R128) and limiting
- **Mediabunny:** MP3, AAC, FLAC, WAV and MP4 muxing
- **WebGL2:** Image effects, with a WebGL1 fallback
- **OPFS · IndexedDB:** Long exports and autosaved projects
- **Web Workers:** Heavy work off the main thread

## Build and quality

The fastest tools available, so checks run on every change.

- **Vite 8:** Builds and dev servers, on Rolldown
- **pnpm 12:** Workspaces, with one version of each dependency
- **oxlint · oxfmt:** Linting and formatting in Rust
- **Vitest:** Unit and integration tests
- **Playwright:** Screenshots at three widths, layout checks
- **Lighthouse:** Performance, accessibility and SEO audits

## Servers and data

Small, typed services that run at the edge.

- **Hono:** APIs on Workers
- **Drizzle ORM:** Typed SQL and migrations
- **Zod:** Validation at every boundary
- **Passkeys:** WebAuthn sign-in, no passwords

## Content and discovery

Pages that people, search engines and AI agents can all read.

- **Prerendered HTML:** Every page is static and readable without JavaScript
- **Markdown twins · llms.txt:** A Markdown version of every page for agents
- **JSON-LD:** Structured data, validated in tests
- **unified · Shiki:** Markdown to HTML, code highlighted at build time
- **Takumi:** Social preview images, rendered at build time

## On Cloudflare

The domain was bought through Cloudflare, so DNS, certificates and hosting live in one account. Each product is its own Worker with its own address, deployed and rolled back on its own.

### How chabulab.com is wired

A request reaches Cloudflare's nearest data centre, then the Worker that owns that address. A route on a path always wins over the Worker that owns the whole host, which is how the blog lives inside chabulab.com and each game inside the games hub.

- `chabulab.com`: This site and the stash (Static Assets)
- `chabulab.com/blogs/*`: The blog, its own Worker (Static Assets)
- `ribbon.chabulab.com`: Ribbon's site (Static Assets)
- `ribbon.chabulab.com/v1/*`: Licence API (D1, Rate Limiting)
- `games.chabulab.com`: Games hub (Static Assets)
- `games.chabulab.com/four-fold/*`: Fourfold, its own Worker (Static Assets)
- `lexiloop.chabulab.com`: LexiLoop on the web (Static Assets)
- `tools.chabulab.com`: Tools hub (Static Assets)
- `tools.chabulab.com/convert/*`: File Converter, its own Worker (Static Assets)

### Cloudflare products in use

- **Registrar · DNS:** The domain, at cost, with DNS on the same network
- **Workers:** Every site and API, deployed on its own
- **Static Assets:** Prerendered pages served from the edge
- **D1:** SQL for licences and audit logs
- **Rate Limiting:** Caps on every public API
- **Email Routing:** hello@chabulab.com and friends
- **Analytics Engine:** Cookieless traffic insights, people and bots apart (being switched on)
- **Workers Logs:** Observability for every Worker