Build Quill — Overview

Quill is a notes app. You’ll build it over eleven chapters. By the end you will have:

• A working notes app with create, read, update, delete, and a command palette
• localStorage persistence behind a clean module boundary
• An audit log that tracks every meaningful change
• Toast notifications driven by a built-in module
• A delete-confirmation dialog using native <dialog>
• A Cmd-K command palette using the native popover API
• An analytics module that observes the runtime and tracks product events

And — the structural payoff — every UI component will be ignorant of every cross-cutting concern. The button that saves a note doesn’t import storage, audit, analytics, or notifications. The form that creates a note doesn’t import any of them either. They emit events and commands. Modules handle the rest.

When you’re done, you will know how to use Kitsune to ship a real frontend without React, with a smaller bundle, better accessibility defaults, and code that’s structurally cleaner than the equivalent framework codebase.

What you’ll learn, chapter by chapter

Chapter	What appears in the app	What you learn
1. The Shell	A page with <kit-shell> boots up	Shell, runtime, debug module
2. Boundaries and the List	A static list of notes	Nested boundaries, surface stacking
3. Note Cards	Click a card to open a note	meta-event, payloads from DOM
4. The Form	A new-note form with title and body	kit-field, native form validation
5. Persistence Module	Notes survive a refresh	Authoring a module with state and a provider
6. Audit Module	A “Recent activity” panel	Subscribing to multiple events
7. Confirm with kit-dialog	A “Delete?” dialog before destruction	Native <dialog>, dialogModule, return values
8. Toasts	Saved/deleted/restored toasts	kit-toast-region, notificationModule
9. Command Palette	Cmd-K opens a fuzzy command bar	Native popover, dispatching commands programmatically
10. Analytics, Without Touching the UI	A [analytics] console stream	Adding capability without changing components
11. Where to Take Quill Next	—	Sync, search, multi-user, desktop, mobile

You can read the chapters straight through, or skip to one once you have the project set up.

Prerequisites

You’ll need:

• Node 24+ and pnpm
• Comfort with TypeScript and HTML
• Familiarity with the runtime loop (read this first if it’s still fuzzy)

You don’t need:

• React
• A bundler beyond Vite (the default)
• Any non-trivial frontend tooling

Setting up the project

pnpm create vite quill --template vanilla-ts
cd quill
pnpm install
pnpm add @atheory-ai/kitsune-core @atheory-ai/kitsune-app @atheory-ai/kitsune-ui @atheory-ai/kitsune-theme
pnpm add -D @atheory-ai/kitsune-dev
pnpm dev

Open the dev server. You should see Vite’s default page. We’ll replace it in the next chapter.

How chapters work

Each chapter:

• Starts with What we want — a one-paragraph goal.
• Walks through the code changes inline.
• Ends with What we have now and What’s next.

Code is shown as it appears in the project at the end of the chapter. Diffs aren’t called out explicitly; you’ll either be writing new files or editing ones from earlier chapters in obvious ways.

Each chapter is short. The whole tutorial is meant to fit in an afternoon if you’re typing along.

Start: Chapter 1 — The Shell →