Open any state of your web app from a link. Direct gives each screen a named scenario with sample data, runs your real interface against it, and tells tests and coding agents when the page has settled.
Published
Drafted with AI from the source code and reviewed by Claude Opus 5.5 (claude-opus-5-5) editorial review.
Direct opens any state of your app from a link
Direct is a free, open-source tool for frontend developers and their coding agents. Give each hard-to-reach screen a name, then open it from a link, the same way every time.
Empty, full, broken: each state is a named scenario with its own sample data. Add ?__direct_scenario= and a name to the address, and your real interface loads in that state.
localhost/direct/?__direct_scenario=todos.empty
Todo exampleToday0 remaining
No tasks in this list.
Error screens stop being hard to reach
Failures are the screens nobody sees until users do. The Todo example declares a write failure as a scenario, so its error message and the tasks it keeps are one link away.
An agent opens a scenario, clicks through the flow, and waits for the page to report that its tracked work finished before it checks the result. No guessed delays.
Coding agent
›Check that completing a task updates the todo list.
Open pagelocalhost/direct/?__direct_scenario=todos.populated
The real Todo interface changed. The fixture claim covers the interface and product port; browser storage still needs evidence from the live adapter.
The page says when it has settled
Every Direct page reports what it is showing: the active scenario, its route, and a signal that turns on once the page has finished its work. Tests and agents wait for that signal instead of guessing.
window.__direct
scenario
"todos.populated"
route
"/"
coverage
"fixture"
pending.todoOperations
0
violations.activityFailures
0
violations.blockedNetworkRequests
0
isQuiescent
true
Your feature code stays the code you ship
Your app talks to the outside world through one interface you own. In production your real code answers it; in development Direct answers with sample data. The screen you test is the screen you ship.
real interface and feature stateproduct-owned portproduction adapterDirect fixtures
Built for frontend teams that test with agents
Direct suits TypeScript web apps where you or a coding agent keep rebuilding the same state by hand. If your app has no outside systems to stand in for, or you need live backend proof, plain end-to-end tests fit better.
The goal is simple: any state a reviewer, a teammate, or an agent needs to see should open from a link, not from ten minutes of setup. Direct starts with the scenarios you name.
Sample data is not your live backend, and Direct says so. The Todo example marks 3 of its 4 claims as fixture evidence and leaves browser storage to a test against the real adapter.
coverage
fixtureThe real todo interface renders an empty deterministic list.
fixtureThe real todo interface loads and completes tasks through the product-owned port.
fixtureThe real todo interface reports a declared persistence failure and retains loaded tasks.
directBrowser local-storage parsing, quota behavior, and persistence require direct production-adapter evidence.
Direct is free and on npm today
Latest release: v0.7.24. Direct is MIT licensed. Add it as a development dependency from npm, and your coding agent can set it up with the Direct Agent Skill.
Scenario
Action
Two deterministic tasks load and can be completed through the product port. The world as the scenario loads it.
Two deterministic tasks load and can be completed through the product port.Illustration. It draws the released Direct Todo example and its fixture data; the browser and agent windows are generic.