Step-by-Step Guide Maker (SOPs from Screenshots)
Screenshots in, a clear how-to guide out — with secrets blacked out for good.
Steps
Screen capture
Work in the shared tab as usual: each new screen becomes a step once it stops changing. The browser does not tell this page where you click, so add the click markers afterwards.
Guide
Export settings
Step
Your guide has no steps yet. Paste a screenshot (Ctrl+V or ⌘V), drop images on the page, choose screenshots, or capture your screen.
Use the tools above to annotate. Without a mouse, choose a tool and press Add in the middle under the image. With an annotation selected: the arrow keys move it (Shift for bigger steps), Alt with the arrow keys changes its size (for an arrow, moves its tip), Delete removes it, Escape deselects. The list below the image names every annotation and takes the same keys.
Annotations
Before you export
About the Step-by-Step Guide Maker (SOPs from Screenshots)
Make a step-by-step guide — a standard operating procedure (SOP), work instruction, onboarding guide or help article — from screenshots. Paste them (Ctrl+V or ⌘V), drop them, or capture your screen: share a tab or window and each new screen becomes a step, automatically or at a press. Then mark where to click, draw arrows and highlights, dim everything but one area with a spotlight, crop, and redact passwords and personal data. Write what to do in each step and add your logo and brand colour.
Export the guide as a PDF, a Word document, a single HTML page (the screenshots inside) or Markdown with an images folder. Redactions are burned in: the exported images are new images in which the covered pixels are gone. Everything happens in your browser.
How to use it
- Add screenshots: paste with Ctrl+V (⌘V on a Mac), drop image files, choose them, or press Capture screen and share a tab or window. Each image becomes a step, in order.
- For each step, pick a tool: Click puts a numbered ring where people should click, Arrow, Highlight and Spotlight point things out, Redact covers secrets, Crop keeps only the useful part.
- Type what to do (for example “Click New claim”) and any details. Suggest from the screenshot reads the words next to a click marker on your device and writes the step for you.
- Reorder steps by dragging their handles (or with the arrow keys), add text-only steps where no screenshot is needed, and set the title, introduction, logo and brand colour.
- Export: PDF, Word, HTML page or Markdown + images. Use Save project to keep the guide and edit it later.
Examples
Step 3: Click “New claim” The screenshot shows a red ring with the number 1 around the New claim button.
# Submit an expense claim ## Step 1: Open Expenses 
The ZIP has guide.md and an images folder, ready for a wiki, a Git repository or a documentation site.
Redact → Solid box over the password field
The exported screenshot has a dark box where the password was; the original pixels are not in the file.
Common uses
- Standard operating procedures and work instructions for an office, a clinic or a shop.
- Onboarding guides for new employees: how to fill in a timesheet, book leave or file an expense claim.
- Help articles for customers, with personal data redacted from real screenshots.
- Instructions for family or clients: how to pay a bill online or set up a phone.
Redaction that holds
Every export is drawn again from your screenshot with the redactions painted over its pixels first, at full resolution, and only then scaled and saved as a new PNG or JPEG. Nothing of what was under a redaction is in the exported file, whichever format you choose.
- Solid box (the default) replaces the area with one colour: use it for passwords, account numbers, names, emails and anything personal.
- Pixelate and Blur keep the look of the screen. They hide text at normal sizes, but blurred or pixelated short text can sometimes be guessed back, so they are for things that only look untidy, not for secrets.
The project file is different: it keeps your original screenshots so you can edit later. Share the exported guide, not the project file.
Capturing your screen
Press Capture screen, choose a tab, window or screen, and work as usual. Press Capture this screen whenever you want a step, or turn on Capture automatically: about once a second the tool compares a tiny thumbnail of the shared screen with the last capture, and takes a new step when the screen has changed and stopped changing (so half-loaded pages are skipped). A small change — one word, or only a colour — may not count as a new screen: press Capture this screen for those. It uses the browser’s screen-sharing API (W3C Screen Capture); the browser always asks first and shows that you are sharing. Browsers do not tell a web page where you click in another tab, so add the click markers afterwards. Screen sharing works in desktop browsers (Chrome, Edge, Firefox, Safari); on phones and tablets, take screenshots and add them.
Suggested step text
With a click marker on a button or link, Suggest from the screenshot reads the words around it with on-device text recognition (Tesseract) and writes the step as “Click “Save changes”.” The engine and the language data download once from this site (about 7 MB for English) and run in your browser; the screenshot is not sent anywhere. Check the suggestion: it reads text, it does not understand the screen.
Exports
- PDF: A4 or US Letter, your logo and title on the first page, each step with its heading, text and screenshot kept together, page numbers at the foot.
- Word (.docx): headings and text you can still edit, each screenshot with its description for screen readers; opens in Word, LibreOffice and Google Docs.
- HTML page: one file with the screenshots inside — email it, put it on an intranet, or print it.
- Markdown + images: guide.md and an images folder for wikis, Git and documentation sites.
Screenshots are saved as PNG (sharp text) or JPEG (smaller), no wider than you choose in Export settings.
Limitations
- The tool does not record clicks or keystrokes in other tabs (no browser can, from a web page): click markers are placed by you, or suggested from the words next to them.
- Your guide is not saved in the browser: use Save project to keep it and open it later. The page warns before you leave with unsaved changes.
- Very long guides with large screenshots make large files; choose JPEG or a smaller largest width in Export settings.
- The PDF’s font covers Latin scripts (with accents, ₹ and €); text in other scripts, such as Hindi or Arabic, shows correctly in the Word, HTML and Markdown exports.
- Screen sharing needs a desktop browser; text recognition works best on clear screenshots at their real size.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot. Only for “Suggest from the screenshot”: the text-recognition engine and its language data download once from MySmartCoPilot (about 7 MB for English). Your screenshots stay on your device.
Frequently asked questions
Are my screenshots uploaded?
No. Screenshots are read, annotated and exported in your browser. Only the text-recognition engine is downloaded from this site the first time you use Suggest from the screenshot; your images are not sent anywhere.
Is a redacted area really gone from the exported file?
Yes. The export is a new image drawn from your screenshot with the redactions painted over its pixels first, so what was under them is not in the PDF, Word, HTML or Markdown files. Use the solid box for secrets: pixelated or blurred short text can sometimes be guessed. The project file keeps the original screenshots — do not share it.
Can it record my clicks automatically, like a browser extension?
No. A web page cannot see what you click in other tabs. Capture screen takes the screenshots for you (automatically when the screen changes), and you add a click marker with one press per step; Suggest from the screenshot then writes the step’s text from the words next to the marker.
Which export should I choose?
PDF to share or print a finished guide; Word if others will edit the text; the HTML page for an intranet or email; Markdown + images for a wiki, Notion import or a documentation site.
How do I edit a guide later?
Press Save project to download a .guide.zip with the steps, annotations and original screenshots. Open it here later with Open project and carry on.
Can I use it with the keyboard?
Yes. Every tool is a labelled button; with the screenshot focused, V, C, A, H, S, R and K choose the tools. Add … in the middle under the screenshot places a click marker, arrow, highlight, spotlight or redaction of the chosen tool; the arrow keys move the selected annotation (Shift for bigger steps), Alt with the arrow keys changes its size (for an arrow, moves its tip) and Delete removes it. The list of annotations under the screenshot names each one and takes the same keys. Steps move with the arrow keys on their handles. Only cropping needs a mouse, pen or finger.