Browser extension
Each click, page and filled form becomes a step with its screenshot. You place the markers afterwards.
Step-by-step guides, made of real screenshots
Record a flow of your web app, place numbered markers, and people play it like a short video. One Web Component plays the guides in Vue, React, Svelte and plain HTML.
Open source · MIT · Windows and Linux · npmAI agent
Install the skill once, then ask your agent to document a flow. It drives its browser and writes the guide into your project.
Command line
create, capture add, annotate and validate build a guide from screenshot files, in a script or by hand.
Web studio
Open a guide of your project in the browser, drag the markers and write their notes. Each save writes guide.json in place.
Desktop studio
A library on disk and a timeline where you order the steps and set how long each one plays, on Windows and Linux.
One Web Component
The same element plays the guide in any framework, with light and dark themes, keyboard controls and full screen.
A guide is one JSON file and its screenshots
Each step keeps its screenshot, its duration, the cursor and its markers. The player turns them into the timeline of the demo above.
- Demo steps
- 4
- Duration
- 11 s
- Screenshots
- 2560 × 1440
Play it on your site
Install the player and point the element at a guide. Screenshots load from the folder of guide.json.
Player READMEnpm install @interactive-learning/player<interactive-learning
src="/guides/sign-up/guide.json"
></interactive-learning>
<script type="module">
import "@interactive-learning/player/auto";
</script>