Hibiki – Step-by-Step Guide & Tutorial Maker

About

Turn any browser workflow into a beautiful, step-by-step visual guide instantly. Hibiki records your actions, captures screenshots, and generates professional documentation—100% locally on your machine.

No cloud, no accounts, and absolutely no data leaving your device.

💡 WHY HIBIKI?
Traditional workflow recorders and SOP tools send every click, form input, and screenshot to the cloud. For privacy-conscious professionals, developers, and enterprises, this is a major security risk.

Hibiki is built from the ground up to be local-first. Using your browser's IndexedDB and modern web APIs, all recording, screenshot capturing, editing, local AI enhancement, and exports happen entirely on your computer.

🚀 HOW IT WORKS

🔴 Record: Start recording with one click. Perform your workflow in the browser. Hibiki automatically captures clicks, inputs, and navigations.

🎨 Edit & Annotate: Open the side panel or full-page editor. Draw arrows, highlight key areas, and instantly blur or redact sensitive details.

📄 Export & Share: Download your guide as a PDF, Markdown (perfect for Notion/Obsidian), interactive HTML, or developer-friendly Playwright scripts.

🛠️ KEY FEATURES

🛡️ 100% Privacy by Design • All screenshots and guide data are saved in your browser's secure local storage (IndexedDB) or synced directly to a local folder on your hard drive. • Automatic masking for password inputs, credit cards, and email addresses. • Heavy-duty redaction tools (blur, pixelate, blackout) to easily mask any custom text or visual element before sharing.

📸 Smart Auto-Recording • Captures precise clicks, form changes, and page navigations. • Records robust HTML/CSS selectors, page titles, URLs, timestamps, and scroll positions. • Interactive coordinates-based markers automatically highlight where you clicked on each screenshot.

🤖 Local AI Text & Vision Enhancements (Optional) • Connect to Ollama (localhost) or use WebLLM (directly in the browser via WebGPU) to rewrite step descriptions and summarize workflows. • Use local vision LLMs (like LLaVA) to automatically understand screenshots and suggest helpful annotations or troubleshooting tips. • Zero external API keys or cloud calls required.

🔍 Local OCR Text Search • Search through your entire guide library by typing text that appears inside your screenshots, powered by Tesseract.js running locally in your browser.

💻 Developer-Friendly Exports • Export your workflows as Playwright test scripts or Chrome DevTools Recorder JSON to automate testing instantly. • Download guides as structured JSON files for custom integrations.

🎯 PERFECT FOR

• Teams & SOPs: Build Standard Operating Procedures, onboarding manuals, and reference guides quickly. • QA & Developers: Document bugs, create reproducible bug reports, and generate test scripts on the fly. • Customer Support: Answer customer questions with fast, visual step-by-step tutorials instead of long emails. • Enterprise Security: Empower employees to document internal processes without leaking company data or customer PII to third-party servers.

🔒 TRANSPARENT PERMISSIONS

Hibiki respects your privacy. Here is why we request each permission: • activeTab / scripting: To detect clicks and form actions on the page you choose to record. • storage / unlimitedStorage: To store recorded guides, screenshots, and configuration options locally. • downloads: To allow you to download your finished guides as PDFs, Markdown zip files, or HTML files.