productivity

Interactive Guide Maker

Build interactive guides from structured blocks, export them as searchable self-contained HTML, and reopen the exported file for later editing.

View on GitHub

Local processing

About your filesFiles and content selected in this tool are processed in your browser and are not uploaded to a Browser Kitty backend.

Operation demo See the basic workflow in a short video.

About this tool

Interactive Guide Maker builds operating procedures, inspection guides, troubleshooting documents, and other instructions from structured blocks such as text, images, headings, steps, callouts, checklists, links, details, tabs, and code.

The finished guide is saved as one self-contained HTML file. Readers can use contents, full-text search, interactive checklists, details, tabs, code copy, image lightbox, theme switching, and print styles, while the same exported HTML can later be reopened in Interactive Guide Maker for editing.

Good for

Create an illustrated operating guide for an internal system
Distribute a work procedure with interactive checklist items
Organize troubleshooting instructions with expandable sections and tabs
Separate Windows, macOS, or other platform-specific steps into tabs
Publish technical commands and settings with convenient copy buttons
Hand off one HTML file without setting up a web server
Reopen the finished HTML later and continue editing without a separate project file

What it can do

Key capabilities available in this tool.

Build guides from Paragraph, Image, Heading, Step, Callout, Checklist, Link, Details, Tabs, Code, and Divider blocks
Start from Blank, How-to guide, Inspection checklist, or Troubleshooting templates
Insert blocks between existing blocks on desktop and use position-aware insertion lines when dragging images
Add PNG, JPEG, WebP, or GIF images by file selection, drag and drop, or clipboard paste
Set image alt text, caption, display width, alignment, filename, dimensions, and size information
Automatically renumber steps and duplicate, delete, move, drag-reorder, Undo / Redo blocks with an Undo toast after deletion
Place multiple Paragraph, Callout, Checklist, Link, Code, or Divider blocks inside Tabs
Configure text size, content width, and Auto / Light / Dark document theme
Export a self-contained HTML viewer with search, interactive checklists, details, tabs, code copy, image lightbox, and print CSS
Reopen an exported Interactive Guide Maker HTML and continue editing from its embedded source data
Autosave locally with IndexedDB first and localStorage fallback when IndexedDB is unavailable
Use dedicated Structure / Edit / Preview bottom navigation and a Bottom Sheet on smartphones
Review block count, image count, and generated file size before export with a large-file warning at 25 MB or more
Use no runtime CDN, API, analytics, or telemetry, with connect-src 'none' in both the app and exported viewer

How to use

Start with Blank, How-to guide, Inspection checklist, or Troubleshooting, then enter the guide title.
Add Paragraph, Image, Heading, Step, Callout, Checklist, Link, Details, Tabs, Code, or Divider blocks.
On desktop use the between-block + control, or use the mobile editing UI to insert blocks where they belong.
Add images by file selection, drag and drop, or clipboard paste, then adjust alt text, caption, display width, and alignment.
Organize optional or platform-specific content with Details, 2–5 Tabs, Checklists, Code blocks, and other supported blocks.
Reorder blocks by dragging or using move controls. Step numbers update automatically and Undo / Redo is available.
Adjust text size, content width, and theme in Document settings, then preview the reader experience.
Before exporting, review block count, image count, generated size, and filename. Files at 25 MB or more trigger a large-file warning.
Save the HTML and confirm the generated filename and size in the completion state.
To revise the guide later, choose Open HTML, select an HTML previously exported by Interactive Guide Maker, edit the restored content, and export again.

Supported

Start templates: Blank, How-to guide, Inspection checklist, and Troubleshooting.
Blocks: Paragraph, Image, Heading, Step, Callout, Checklist, Link, Divider, Details, Tabs, and Code.
Images: PNG, JPEG, WebP, and GIF through file selection, drag and drop, or clipboard paste.
Tabs: 2–5 tabs. Each tab can contain multiple Paragraph, Callout, Checklist, Link, Code, or Divider blocks. Tabs are not nested inside Tabs.
Editing: duplicate, delete, move, drag-reorder, Undo / Redo, and an Undo toast after deletion. Step numbers update with the current order.
Autosave: IndexedDB is preferred, with localStorage fallback when IndexedDB is unavailable.
HTML export: self-contained viewer with automatic contents, full-text search, checklists, details, tabs, code copy, image lightbox, theme switching, and print CSS.
Round-trip editing: validates schemaVersion and app identity in HTML exported by Interactive Guide Maker and restores the embedded source data without executing scripts from the imported HTML.
Mobile: fixed Structure / Edit / Preview bottom navigation with a Bottom Sheet.
Export size: shows generated size before saving and warns at 25 MB or more. 25 MB is a warning threshold, not a hard application export limit.
Runtime networking: no external CDN, API, analytics, or telemetry; the default CSP uses connect-src 'none'.

Limitations and notes

This is not a general-purpose HTML editor. Round-trip editing is for compatible HTML files exported by Interactive Guide Maker.
Clearing browser site data can remove drafts autosaved in IndexedDB or localStorage. Export important guides as HTML.
Images are embedded in the exported HTML, so guides with many images can become large. The app warns at 25 MB or more, while email, chat, or storage services may impose their own limits.
Tabs support 2–5 tabs and do not support nested Tabs inside Tabs.
Paragraph styling focuses on lightweight helpers such as bold, links, and inline code rather than free-form word-processor or DTP layout.
Autosave availability and capacity depend on browser storage behavior and available space.
The app warns about unsafe URL schemes, but it does not verify the content or availability of external destinations used in guide links.

Frequently asked questions

How do I share a finished guide?

Export it as one self-contained HTML file and send that file. The recipient can open it in a supported browser and use contents, search, checklists, tabs, and other viewer features.

Can I edit an exported HTML later?

Yes. HTML exported by Interactive Guide Maker contains embedded editable source data. Use Open HTML to restore it and continue editing.

Can I import and edit any HTML file?

No. It is not a general HTML editor. Round-trip import validates and restores compatible HTML exported by Interactive Guide Maker.

Can I include images in a guide?

Yes. Add PNG, JPEG, WebP, or GIF images using file selection, drag and drop, or clipboard paste, then set alt text, caption, display width, and alignment.

Can I create an inspection guide with checkable items?

Yes. Use Checklist blocks. Readers can check items directly in the exported HTML viewer.

Are guide content or images uploaded to a server?

No. Titles, block content, and images are processed in the browser. The hosted version needs the initial HTML request, but the app does not upload user data and the runtime CSP uses connect-src 'none'.

Offline version and source code

The normal standalone app is designed to open directly via file:// and uses no runtime CDN, API, analytics, or telemetry. Guides can be created from the saved app HTML, and exported viewer HTML is also self-contained with connect-src 'none'.

View source on GitHub