eaves-panel
Switch scenarios live. Leave feedback right on the screen.
What it does
A hideable control panel for coded usability-test prototypes. Switch scenarios and variants live, without touching the UI a participant sees, then leave visual feedback for the designer with a click after the session ends.
What you give it
- Scenario list
A list of the scenarios to test. Each one gets a name and a short description.
- onSelect handler
Code that runs each time someone picks a scenario. Use it to swap copy or reset state.
What you get back
- Live control panel
A small bar that switches scenarios. Drag it, hide it, or keep it out of your screen recording.
- Exported feedback
Every note from the session. Copy or download them all as one file.
How to use it
Eaves.init({
scenarios: [
{ id: 'happy', label: 'Happy path' },
{ id: 'error', label: 'Error state', description: 'Incomplete policy on file' },
{ id: 'empty', label: 'Empty state' }
],
onSelect: function (id, scenario) {
// your prototype reacts here: swap copy, toggle a class, reset state, etc.
}
}); Get this tool
Free and open source. Drop it into your next prototype.
How to install
Script tag
<script src="https://unpkg.com/eaves-panel/src/eaves.js"></script>
npm
npm install eaves-panel import Eaves from 'eaves-panel';
From the README
eaves-panel
Eaves is a hideable control panel for coded usability-test prototypes. It switches scenarios and variants live, without touching the interface a participant sees.
Why it exists
A usability test often needs more than one screen. A prototype has to show the happy path, an error, an empty state, maybe a variant B too. Build all of that into the UI, and a participant sees controls that were never part of the real design.
Eaves keeps that switching logic in its own layer, at the edge of the prototype, not inside it, the way a roof’s eaves sit at the edge of a house. Drag the panel by its grip handle. Hide it completely with a keyboard shortcut. It never shows up in a recording unless you choose to show it.
No code? Ask your AI agent
Building the prototype in Cursor, Claude Code, or another AI coding agent? You don’t
have to write the Eaves.init() call yourself. Describe the scenarios you want, like
“wire up Eaves with a happy path, an error state, and an empty state,” and let the
agent read the docs and wire it in for you.
Comments, for the designer
During the session, a facilitator can click anywhere on the prototype to drop a pin and write a note. This is private feedback for the designer. A participant never sees it. Every note stays scoped to the scenario it was left on.
When the session ends, copy or download every note as one Markdown file, grouped by scenario. Turn on screenshot saving once, and Eaves quietly saves a snapshot of the page next to each new comment. No server, nothing to run.
Keyboard shortcuts
All three shortcuts use Cmd on a Mac and Ctrl everywhere else. Override any of them per project.
| Shortcut | What it does |
|---|---|
Cmd/Ctrl + Shift + U | Open or close the Scenarios menu |
Cmd/Ctrl + Shift + Y | Hide the bar completely, or bring it back |
Cmd/Ctrl + Shift + M | Hide or show comment pins on the page |
Delete or Backspace | Remove the selected comment |
Esc | Close whichever menu is open |
Screenshots, not screen photos
Each saved snapshot is a copy of the page’s markup, not a picture of the screen. Eaves saves the full page HTML next to every comment. It works in Chrome and Edge today, not yet in Firefox or Safari, and needs a secure page, like https or localhost.
Status
Eaves is early, at version 0.4. It handles one common shape well: a flat list of named scenarios. Grouped or nested variants, and a React wrapper, may come next.
License
MIT license. Free to use, fork, and ship.