# Step-by-step Guide Builder Turn instructions and local screenshots into annotated guides, printable PDF, standalone HTML and editable project files. > Canonical page: https://elysiatools.com/en/tools/step-by-step-guide-builder - **Category:** Document Tools - **Keywords:** Step-by-step Guide Builder, Steps, PDF, HTML ## Overview Turn instructions and local screenshots into annotated guides, printable PDF, standalone HTML and editable project files. Screenshots stay in this browser. No autosave: download your project before closing, rerunning or opening another result window. Fills empty image slots in step order, then adds steps. Matching is positional, not AI recognition. Masking replaces pixels immediately and cannot be undone. Removing annotations never restores masked content. In the print dialog choose Save as PDF. Disable browser headers/footers if unwanted. 30 steps · PNG/JPEG/WebP · 10 MB/image · processed image budget 20 MB. Long screenshots are tiled for printing. Images: height/width ≤30; at most120 print fragments and35 MB generated image data per report. Large images are resized. ## Inputs - **Starting board** (select) - **Board language** (select) ## When to use - Documenting internal software workflows, IT procedures, or customer support walkthroughs that contain sensitive screen data. - Compiling browser or desktop walkthroughs into self-contained HTML files or clean, paginated PDF documentation. - Drafting repeatable standard operating procedures (SOPs) across up to 30 steps with sequential screenshot matching. ## How it works - Select a starting board (blank or sample guide) and choose the board interface language. - Add or edit sequential steps and drop PNG, JPEG, or WebP screenshots into designated step slots. - Apply visual annotations or permanently mask sensitive screen areas directly within the browser editor. - Export your completed guide as an editable project file, standalone HTML document, or print to PDF using your browser's print dialog. ## Use cases - IT support teams building printable software onboarding guides without leaking proprietary employee data. - Operations leads generating standalone HTML runbooks for quick distribution across intranet knowledge bases. - Quality assurance engineers capturing test failure reproduction steps with positional image annotations. ## Frequently asked questions ### Are my uploaded screenshots sent to a remote server? No. All images are processed and kept entirely within your local browser session. ### Can I undo or remove image redactions after masking? No. Masking immediately replaces underlying pixels and cannot be reversed by clearing annotations. ### What are the step limits and file size restrictions? Guides support up to 30 steps, 10 MB per input image (PNG, JPEG, WebP), and a 20 MB processed image budget. ### How do tall or scrolling screenshots fit onto printed pages? Long screenshots with height-to-width ratios up to 30 are automatically tiled into up to 120 print fragments for PDF export. ### Does the editor autosave my work between sessions? No. There is no autosave, so you must download your editable project file before closing the browser tab or rerunning the tool. ## Related tools - [PDF Table Layout Engine](https://elysiatools.com/en/tools/pdf-table-layout-engine): Render structured table data into a paginated PDF with repeating headers and zebra rows - [HTML to PDF (Precise Layout)](https://elysiatools.com/en/tools/html-to-pdf-precise): Render HTML/CSS to a PDF with precise headers, footers, and print settings - [HTML to PDF Renderer](https://elysiatools.com/en/tools/html-to-pdf-renderer): Render a limited HTML subset into a PDF with a deterministic layout - [PDF Header/Footer Snippets](https://elysiatools.com/en/tools/pdf-header-footer-snippets): Convert HTML to PDF with reusable logo, title, and date snippets - [PDF to HTML](https://elysiatools.com/en/tools/pdf-to-html): Convert PDF documents to HTML web pages with preserved formatting and structure - [HTML/CSS to Print-Ready PDF](https://elysiatools.com/en/tools/pdf-typesetting-html-css-nojs-print): Typeset a multi-page, print-ready PDF straight from HTML and CSS: @page size/margins, running chapter headers, page counters, crop and registration marks, bleed. - [Deep Research PDF to HTML Article](https://elysiatools.com/en/tools/deep-research-pdf-to-html-article): Convert a ChatGPT Deep Research PDF export into a standalone, reading-friendly HTML article — headings, reflowed paragraphs, display equations and every citation automatically linked to its source. No source list to paste: the citations are already inside the PDF. - [HTML Mail to PDF](https://elysiatools.com/en/tools/libreoffice-html-mail-to-pdf): Render email HTML content to PDF with preserved basic formatting using Puppeteer ## Samples - [PDF Samples](https://elysiatools.com/en/samples/pdf-samples): Generated PDF samples from tools dated 2026-02-01 to 2026-02-10 - [Markdown Slide Deck Samples](https://elysiatools.com/en/samples/md-slide-deck-to-pdf): Remark/Marp style Markdown slide decks for testing PDF export layouts - [Test Pyramid Examples - Testing Strategy Guide](https://elysiatools.com/en/samples/test-pyramid-examples): Comprehensive test pyramid implementation examples including unit tests, integration tests, E2E tests, test organization, and strategic testing patterns for balanced software quality assurance - [Contentful Cloud-based CMS Samples](https://elysiatools.com/en/samples/contentful-samples): Comprehensive Contentful examples covering content modeling, API integration, webhooks, migrations, and frontend integration patterns ## Related content - [Screenshot-Based Procedure Guide Review and Handoff](https://elysiatools.com/en/hubs/screenshot-based-procedure-guide-review-and-handoff): Turn one authorized procedure into a tested screenshot guide, verify image-to-step matching and privacy, and deliver reviewed HTML, print-to-PDF output and an editable project.