Component Zoo
A live canvas for your React components.
Your real components run as live nodes on a freeform canvas. Plug data into their props and see each state straight away, without clicking through the app or starting a backend.
What it does
Component Zoo at a glance.
Finds your components
Point it at a project and every exported component shows up, with its prop types.
Typed prop ports
Each prop becomes a port. Drag data in and the component re-renders live.
Data from anywhere
Create data from JSON, CSV or JavaScript, and reuse it across components.
Pages and collages
Lay out one component per page or many side by side. Everything saves as you go.
How it works
3 steps to get going.
- 1
Point it at a project
The Zoo finds every exported component and reads its prop types.
- 2
Wire in data
Create data from JSON, CSV or JavaScript and drag it straight into props.
- 3
Compose and review
Arrange components into pages or collages. Everything saves as you go.
Gallery
Component Zoo in use.
More from the lab