ToolRobinNo account needed

Interactive Tutorial Builder

Build a clickable, step-by-step tutorial from screenshots and export a self-contained HTML file.

Add screenshots, write each instruction and position the click marker. Preview the tutorial, then download HTML or save a project to edit later.

0 / 0Drag the marker or use arrow keys.

Add screenshots to begin, or try the example.

Click the numbered marker to continue.

Changes stay in this tab until you save a project.
How to use

Interactive Tutorial Builder

Build a clickable, step-by-step tutorial from screenshots and export a self-contained HTML file.

Step by step

  1. Provide the source using: Add screenshots.
  2. Set: Tutorial title / Step title / Instruction / Horizontal position % / Vertical position %. Use the reference below to choose the options that fit your task.
  3. Choose: Preview. Inspect the result before copying, downloading or using it elsewhere.
  4. Add screenshots, write each instruction and position the click marker. Preview the tutorial, then download HTML or save a project to edit later.

Choosing the settings

OptionWhat changes
Horizontal position %Preview every step and click its marker before sharing the HTML. If a marker is misplaced, adjust its percentage position on that screenshot. Save the editable project as well as the exported tutorial; the HTML is the viewing output.
Download HTML / Save projectUp to 20 steps, 8 MB per PNG, JPEG or WebP image, 40 MB total, 16 million pixels and 8192 pixels per side. Animated images are not supported. Project files are limited to 58 MB. Recording, automatic step detection and automatic text translation are not included.

Example and expected result

Try the three-step JSON example: load sample data, format it and copy the result. The exported HTML contains all three screenshots and works without an internet connection.

If it is not working

  • Up to 20 steps, 8 MB per PNG, JPEG or WebP image, 40 MB total, 16 million pixels and 8192 pixels per side. Animated images are not supported. Project files are limited to 58 MB. Recording, automatic step detection and automatic text translation are not included.
  • Preview every step and click its marker before sharing the HTML. If a marker is misplaced, adjust its percentage position on that screenshot. Save the editable project as well as the exported tutorial; the HTML is the viewing output.
  • If an image is rejected, check its decoded dimensions as well as its file size. Export a supported still image from the original app and retry with fewer pixels; renaming an extension does not convert the file.

Limits and cancellation

Up to 20 steps, 8 MB per PNG, JPEG or WebP image, 40 MB total, 16 million pixels and 8192 pixels per side. Animated images are not supported. Project files are limited to 58 MB. Recording, automatic step detection and automatic text translation are not included.

You might also need