knobkit
fast ai webapps; fully in-browser or on a stateless server
Last verified:
What is knobkit?
Knobkit is a TypeScript widget and event framework designed for building live AI web applications. It allows developers to declare widgets, write event handlers using a simple on(event, handler) API, and run the same file entirely in the browser or on a stateless Node server by swapping just one line. The framework is built on React 19, follows strict TypeScript guidelines, and maintains ESM throughout.
The core architecture features a stateless server model where the browser owns all state management. When using serve(), handlers retrieve widget state as needed through asynchronous round-trips and update it by sending structured edits back. This eliminates session management and enables easy horizontal scaling. The state is organized as uniform structured JSON with each widget having a single attribute map, even layout containers which are treated as widgets.
Knobkit is ideal for developers building AI apps, live web applications, and interactive TypeScript projects. It includes a live playground at knobkit.dev where users can edit code and see it re-run instantly without any installation. Models run in the browser using WebGPU. The framework supports various widgets including recorders, conversation histories, and provides efficient rendering through useSyncExternalStore that only notifies subscribers of affected widgets.
Key use cases include voice transcription apps (like the Whisper transcription demo), chat applications, and any application requiring live updates as users type. The framework is free, open source under MIT license, and available on GitHub and npm.
knobkit pricing
Pricing model: Freemium
Free and open source under MIT license. No paid plans mentioned. Available on GitHub and npm. The playground at knobkit.dev is completely free with nothing to install.
knobkit pros
- Free and open source under MIT license
- Single file runs on both browser and stateless Node server
- Browser owns all state, eliminating session management
- Stateless server enables easy horizontal scaling
- Built on React 19 with strict TypeScript
- ESM throughout the entire codebase
- Live playground with instant code re-runs
- No installation required to try the playground
- Models run in browser using WebGPU
- Simple on(event, handler) API is intuitive
- Uniform structured JSON state for all widgets
- Efficient rendering with useSyncExternalStore
- Only affected widget subscribers get notified
- Layout containers treated as widgets
- Workspace available on GitHub and npm
- Event-driven architecture rather than point-to-point
- Handler can modify any widget with same edits
- Live web apps with changes saved to disk
knobkit cons
- Asynchronous reads can become complicated with frequent updates
- No optimization yet for async read performance with many widgets
- Potential for creating cycles in dependency chains
- Current uniform JSON state not ready for third-party widget libraries
- Lacks verification tooling to prevent cycles
- Async round-trips add latency for server handlers
- Custom widget behavior may require bespoke state shapes
- Cascading changes require manual coordination in single handler
Frequently asked questions about knobkit
What is Knobkit?
Knobkit is a TypeScript widget and event framework for building live web applications. You declare widgets, write event handlers using on(event, handler), and the same file runs entirely in the browser or on a stateless Node server by swapping one line.
How does the stateless server work?
The server does not maintain any state. When using serve(), a handler retrieves widget state as needed (resulting in an asynchronous round-trip like await convo.history()) and updates it by sending structured edits back. This eliminates session management and allows easy horizontal scaling.
Does Knobkit require installation to try?
No. The playground at knobkit.dev is real and requires nothing to install. You can edit the code and it re-runs live with changes saved to disk. Models run in your browser using WebGPU.
What is Knobkit built on?
Knobkit leverages React 19 for the views, adheres to strict TypeScript guidelines, and maintains ESM throughout the entire codebase.
How is state structured in Knobkit?
State is organized as uniform structured JSON with each widget having a single attribute map. Even layout containers are treated as widgets, where their state consists solely of the keys of their children. Handlers can modify UI using the same edits applicable to any other state.
How does Knobkit handle rendering updates?
Changes trigger notifications only for subscribers of the affected widget through useSyncExternalStore, avoiding a global notification for all changes. This provides efficient rendering.
Can I run Knobkit on both browser and server?
Yes. The same file runs entirely in the browser with knob.mount('#root'), or you can switch to app.serve() to run handlers on Node without any other changes. Only one line at the end of the file needs to be swapped.
How do I handle cascading changes between widgets?
Implement a single .on() handler to manage the event (like dropdown change) and update multiple widgets accordingly. Each handler is activated by just one event and can execute custom code or modify any widget. The approach is event-driven rather than point-to-point.
What is the pricing for Knobkit?
Knobkit is free and open source under the MIT license. It is available on GitHub and npm with no paid plans mentioned. The playground is completely free to use.
How do I get started with Knobkit?
You can either visit the live playground at knobkit.dev to experience it directly with an editor and preview, or run npm create knobkit@latest to start a new project. The GitHub repository is at github.com/knobkit/knobkit.