Chapter 5 — Developer Experience
Developer tools that make debugging easy
Debug panel, type safety showcase, event timeline, system controls — everything you need to understand what's happening under the hood. Great DX is part of the product.
The Demos
Debug Panel
IntermediateReal-time event overlay
An overlay that shows every SSE event as it arrives — tag name, matched queries, timestamp, and source.
SSE eventsdebug overlayType Safety
IntermediateEnd-to-end inference
TypeScript catches tag errors at compile time. Misspell a tag name and see the error before the browser does.
TypeScriptdefineTagsTimeline
IntermediateVisual event history
A scrollable timeline of every invalidation event, with query matching highlighted and timestamps.
timelineevent historyControls
IntermediatePause, resume, disable
Pause the SSE listener, queue invalidations, then resume and watch them all flush at once.
pause()resume()Connection
IntermediateSSE status monitoring
Monitor SSE connection health, reconnect attempts, and latency. Know exactly when the system is live.
connection statusSSE healthTypeScript Safety Preview
// defineTags() creates a fully-typed tag tree
const appTags = defineTags({
todos: {
list: () => ["todos", "list"],
byId: (id: string) => ["todos", id],
}
})
// TypeScript knows every valid tag
appTags.todos.list() // OK
appTags.todos.byId("1") // OK
appTags.todos.typo() // Error: property 'typo' does not exist