DocGen Studio tutorial

How to use DocGen Studio

DocGen Studio is a Chrome extension documentation generator for click-by-click SaaS tutorials. Pin it, start recording, click through the product, then stop. You get annotated screenshots, optional AI step copy via OpenRouter, and a PDF or Markdown how-to you can ship to help centers, SOPs, or support macros.

About 8 minutes · Chrome · No account required

  1. How do I find and pin DocGen Studio?

    Open the Chrome puzzle-piece Extensions menu and pin DocGen Studio. Pinning keeps the icon on the toolbar so you can start a recording in one click.

    • Click the Extensions icon in Chrome.
    • Find DocGen Studio.
    • Click the pin so it stays visible.
    Chrome Extensions menu listing DocGen Studio with a pin control next to the purple document icon.
    DocGen Studio in the Chrome Extensions menu. Pin it for one-click access.

    Key takeaway: if you cannot see the icon, it is unpinned, not uninstalled.

  2. Do I need an OpenRouter API key?

    No. The key is optional. Without it, the extension still records clicks and annotated screenshots and uses local fallback text. With a key, the editor can draft a “How to…” title, summary, and step instructions from click labels.

    • Open the popup gear → AI API Settings.
    • Paste your OpenRouter API key (sk-or-v1-…).
    • Set a model. Fast free option: google/gemini-2.0-flash-lite-preview-02-05:free.
    • Click Save Settings, then Back.
    DocGen Studio AI API Settings screen with empty OpenRouter API key and model fields.
    Empty AI API Settings. Skip this screen if you do not want AI copy.
    DocGen Studio AI API Settings with a saved OpenRouter API key and model name filled in.
    Saved key and model. The key stays in Chrome local storage on this device.

    Key takeaway: screenshot images are not sent to OpenRouter. Only click labels go out, and only if you add a key.

  3. How do I start a click-by-click recording?

    Open the popup and click Start Recording. The status bar reads “Recording in progress…” and the toolbar icon shows a red REC badge.

    • Open the tab you want to document.
    • Start recording from the DocGen Studio popup.
    • Confirm the REC badge before you click through the product.
    DocGen Studio popup showing Recording in progress and a red Stop and Open Editor button.
    Active recording. Use the product as a customer would, then stop when the flow is done.
    Chrome toolbar badge showing REC while DocGen Studio is recording.
    The REC badge means capture is on even if the popup is closed.

  4. When do I stop recording?

    Click Stop & Open Editor after the last action in the walkthrough. Recording continues across in-page navigation, so you can move through a real SaaS flow in one session.

    • Click every control you want in the guide.
    • Do not stop between pages unless the walkthrough is finished.
    • Stop & Open Editor builds the step list and opens the documentation suite.

    Key takeaway: extra-thick annotations and arrows are applied to each captured click automatically.

  5. How do I edit the generated SaaS tutorial?

    Use the editor to set the document title, write a short overview, and fix each workflow step. If a key is saved, steps may show “Generating AI…” then “Generated AI.” You can always overwrite the text.

    • Set Document Title (for example, “How to fill out and submit a form”).
    • Add a 1–2 sentence Overview / Summary.
    • For each step, edit Step Title and Instruction / Description.
    • Reorder with the arrows or delete unused steps.
    Editor status pill showing Generating AI while DocGen Studio drafts step text.
    AI is drafting labels. Wait until the pill reads Generated AI, then edit.
    DocGen Studio editor with document title, overview, and a workflow step that includes an annotated screenshot.
    The AI documentation suite: title, summary, and numbered workflow steps.
    Workflow step card with Generated AI status and editable step title and instruction fields.
    Generated AI is a starting point. Rewrite titles and instructions before you export.

  6. What is Focused Crop (60%)?

    Focused Crop zooms the screenshot around the control you clicked. Leave it off to keep the full visible tab. Turn it on when the UI is dense and the click target would otherwise look tiny.

    DocGen Studio popup with Extra-Thick Annotations, Single-Call Multimodal AI, and Focused Crop 60 percent toggle on.
    Focused Crop (60%) on. Extra-thick annotations stay in the cropped frame.

  7. How do I export a PDF or Markdown how-to?

    In the editor header, click Export Markdown or Export PDF. Markdown is best for GitHub, Notion, and help-center repos. PDF is best for email, onboarding packets, and print.

    DocGen Studio editor header with Export Markdown and Export PDF buttons.
    Two export paths: developer-ready Markdown or a printable PDF.
    Chrome download tray showing a completed Markdown file named how_to_fill_out_and_submit_a_form.md from DocGen Studio.
    Markdown export downloads a .md file named from your document title.

    Key takeaway: export is local. The file is saved to your Downloads folder; nothing is uploaded to a DocGen server.

Features explained with screenshots

These are the parts of the Chrome extension documentation generator that show up in the finished SOP.

Extra-thick annotations and arrows

Each click gets a callout, label, and arrow on the real UI. You do not restage screenshots in a design tool.

Annotated screenshot with a white arrow and Click Check Box callout pointing at a sidebar Check Box item.
Auto annotation: the clicked control is labeled so readers know exactly where to click.

Single-call multimodal AI

One request drafts the document title, summary, and step copy from click labels. Images stay on the device. No key means local fallback text only.

Workflow step cards you can reorder or delete

Every recorded action becomes an editable card with screenshot, title, and instruction. Move steps up or down, or drop noise before export.

Workflow Steps view showing step 1 with an annotated Web Tables click, Generating AI status, and editable step title.
A full step card: annotation, AI status, and fields you can rewrite.

PDF vs Markdown

  • Markdown — version-control friendly how-to for docs sites.
  • PDF — shareable SOP for people who will not open a repo.

FAQ

How do I install and find DocGen Studio?

After you load or install the Chrome extension, open the puzzle-piece Extensions menu and pin DocGen Studio so the icon stays on the toolbar.

Do I need an OpenRouter API key?

No. An OpenRouter key is optional. Without it, DocGen Studio still records clicks and screenshots and fills local fallback step text. With a key, the editor can draft titles and instructions from click labels.

What data is sent to OpenRouter?

Only click labels and element types, such as “user clicked a button labeled Save.” Screenshot images are not attached. Your API key stays in Chrome local storage on this device. See the privacy policy.

What is Focused Crop (60%)?

Focused Crop zooms the screenshot around the clicked control so the annotation stays readable. Turn it off to keep the entire visible tab.

Can I export both PDF and Markdown?

Yes. Export Markdown downloads a .md how-to file. Export PDF saves a printable guide with the same steps and annotated images.

Does recording still work after I navigate to a new page?

Yes. Recording continues across in-session navigation on the site you are documenting. Stop recording from the popup when the walkthrough is done.

Can I edit AI-generated step text?

Yes. Every step title and instruction is editable. You can also reorder or delete steps before you export.

Next

Read the product overview or the privacy policy, then record a short flow on a public site to test export.

Install from Chrome Web Store Product page Privacy policy