Registry / testing / choo

choo

JSON →
library7.1.0jsnpmunverified

Choo is a 4kB frontend framework for building sturdy applications using event-based architecture and functional programming principles. Current stable version is 7.1.0, released periodically with a focus on minimalism. It is designed to be tiny (4KB), with a small API (6 methods), event-driven state management, and isomorphic rendering (browser and Node). Unlike larger frameworks like React or Vue, Choo emphasizes minimal tooling (e.g., works with browserify), no virtual DOM diffing (uses morphdom), and a straightforward event system. Its ecosystem includes plugins and a CLI via choo-cli.

testing
npm install choo
github ↗package ↗homepage ↗
INSTALL
IMPORT
SIG · CHOO
C
choo
testingjavascriptv7.1.0
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

choo
✓ import choo from 'choo'
✗ const { choo } = require('choo')
Default export is the app factory; named export does not exist.
html
✓ import html from 'choo/html'
✗ import { html } from 'choo'
html is a submodule export, not a named export from main entry.
app
✓ const app = choo(); app.route('/', view); app.mount('body')
✗ new choo()
choo() is a factory function, not a constructor.
state
✓ function view(state, emit) { return html`...` }
✗ when using class components (Choo uses functions)
State is passed as first argument to route handlers and plugins.

Sets up a minimal Choo app with a counter, demonstrating state, events, and routing.

const html = require('choo/html'); const choo = require('choo'); const app = choo(); app.use((state, emitter) => { state.count = 0; emitter.on('increment', (by) => { state.count += by; emitter.emit('render'); }); }); app.route('/', (state, emit) => html` <body> <h1>Count: ${state.count}</h1> <button onclick=${() => emit('increment', 1)}>+1</button> </body> `); app.mount('body');
Debug
Known issues
breakingVersion 7 dropped support for custom element wrappers (choo/components) in favor of simpler function components.
fix
Rewrite components as pure functions using html template literals; remove choo/components import.
affects: >=7.0.0
breakingVersion 7 replaced choo/view with choo/html submodule; imports changed.
fix
Change 'require('choo/view')' to 'require('choo/html')' or 'import html from 'choo/html''.
affects: >=7.0.0
deprecatedThe built-in logger plugin (choo-log) is deprecated. Use choo-devtools for development.
fix
Replace choo-log with choo-devtools (npm install choo-devtools) and app.use(devtools()).
affects: >=6.0.0
gotchaChoo uses nanobus for events; emitter.emit('render') must be called manually after state changes to trigger rerender.
fix
Always call emitter.emit('render') after mutating state inside event handlers.
affects: >=7.0.0
Errors
Common errors & fixes
TypeError: Cannot read property 'emit' of undefined
emitter is not available in route handler (second argument is emit, not emitter).
fix
Use the second argument (emit) to emit events; emitter is only available in plugins.
Error: Could not find module 'choo/html'
Using choo version <7 where html was in choo/view.
fix
Install choo@7 or use 'require('choo/view')' for older versions.
Uncaught Error: choo() is not a constructor
Calling 'new choo()' instead of 'choo()' factory.
fix
Remove 'new' keyword: const app = choo();
Upgrade
Version history
7.1.0latest on npm
Audit
Dependencies
nanomorphrequiredDOM morphing (replaces virtual DOM diffing)
sheet-routerrequiredClient-side routing
nanobusrequiredEvent bus for app-level events
Agent activity
14 hits · last 30 days
node
12
OpenAI (training)
1
Resources
githubhttps://github.com/choojs/choo ↗
packagechoo ↗
homepagehttps://github.com/choojs/choo#readme ↗
choo — npm install choo · libregistry