Clickable prototype
Screens you can tap through in a browser, running on made-up data, so people can try the product before anything real is built behind it.
Updated October 2026 · with examples from our own builds
What does clickable prototype mean in practice?
A clickable prototype looks and moves like the product but has no real backend. Buttons go to the next screen, lists show sample records and nothing is saved. Its job is to let the people who will use the system walk through their working day and say what's missing.
Prototypes catch the expensive misunderstandings early: a role that needs a screen nobody drew, a number one team must never see, a step that happens on a phone in a basement with no signal. Fixing those on a board is quick; fixing them in production code is not.
The trap is mistaking a prototype for progress on the build. Invented data hides messy imports, odd edge cases and performance, and a prototype that looks finished can make the remaining work seem smaller than it is.
Clickable prototype at a glance
- Runs on
- Invented seed data, in a browser
- Best audience
- The people who will use each role day to day
- Doesn't prove
- That real data, integrations or volumes will behave
Where has clickable prototype come up in our builds?
A launcher opens 17 role panels, from the super-admin dashboard to the librarian's issue desk and the parent app, as a static React 18 app on mock data with no backend, so the academy's team could click through their working day before any production work was priced.
Nine clickable prototypes, one per internal role and one with every role together, sit alongside 12 design boards. They run on invented seed data, and the figures on the screens are not Firetrix's.
The full nine-role workflow, from quotation approval to stores, runs as an HTML prototype on one shared model with 389 passing verification checks. It is the reference the real Next.js and Express app is built against, slice by slice.
Common questions about clickable prototype
Should a prototype use real data?
Not at first, and never real customer records. Invented data keeps it safe to share and quick to change. Once the flow is agreed, check the design against a couple of real documents, the way QKE's product model was checked against two of its real quotations.
How is a prototype different from an MVP?
A prototype shows how the product would work and keeps nothing; an MVP is real software that real users rely on. The prototype comes first and helps decide what the MVP needs.
Related terms
Planning a product and not sure where clickable prototype fits? Ask us, or browse all 116 terms in the glossary.