windo/Overview
windo · v0.1.1 · Beta

The zero-infra
canvas
for React.

Point Vite at your *.windo.tsx files and get a resizable canvas with live props, variants, contexts, and a typed state machine — no Storybook, no config sprawl.

Get startedLive examplesbun add -D @westopp/windo
Setup1fileOne windo.config.ts names your groups. Drop *.windo.tsx files anywhere and they appear in the canvas.
$bun add -D @westopp/windo
Requires Vite 7 · React 19 · Zod 4
Isolated preview
iframe · postMessage · schema stays put
Every component renders in its own iframe, so its styles and state never leak into the chrome around it.
The chrome drives the frame over a message protocol — props in, logs and events back out.
Your zod schema never crosses the boundary; a serialisable descriptor does the talking.
How it works
Typed state machine
state · actions · ctx.setState
Declare an initial state and the rest follows from it.
Write your render logic against a fully-typed ctx.state.
Fire actions bound to click, hover, enter, and exit.
01

Live props, validated

A zod configurableProps schema becomes a JSON editor in the chrome. Edits are parsed live, then merged on top of your defaults.

Configurable props →
02

Variants gallery

Pin a set of named prop patches and apply any of them with a click — no editing JSON to flip between states.

Variants →
03

Contexts & placement

Wrap a windo in the providers it opts into, and anchor it anywhere in the frame — flush to an edge or centred.

Contexts →

Preview a component in 5 minutes

From windo.config.ts to a live, prop-editable component in the canvas.

Start the tutorial
NextWhy windo →