Turn API docs and READMEs into a developer-grade tutorial your users will actually finish.
Paste a reference page, a README, or a markdown SDK guide. ngram reads the endpoints, code blocks, and setup steps, drafts a script that respects them, and renders a branded walkthrough with captions.
Trusted by teams at
How it works
Four steps from a docs page to a tutorial developers finish.
No screen recording, no second pass to clean up code. Paste the page, accept the scene plan, render the walkthrough.
Paste the docs page
Paste markdown, link a public docs URL, or drop a README. ngram preserves code fences, API method names, parameter tables, and step-numbered prerequisites.
The parser respects the syntax
Each H2 becomes a scene. Each fenced code block becomes a syntax-highlighted scene card. Parameter tables become callouts. Curl commands and JSON payloads stay readable on the frame.
Edit in the storyboard
Reorder scenes, rewrite the voiceover line for a specific endpoint, or regenerate one code card without touching the rest. Visual chat handles the per-scene tweaks.
Ship a branded walkthrough
Export 16:9 for the docs site or YouTube embed, 9:16 for the launch announcement. Brand kit, captions, and intro card applied to every render.
Output controls
Built for the way developers read your docs.
Syntax-aware code scenes
Code fences render with the right language theme: TypeScript, Python, Go, curl, JSON, GraphQL. The voiceover narrates the line being highlighted, not just the block.
Endpoint and parameter callouts
HTTP method, path, and required parameters get pulled into framed callouts. Optional parameters stay smaller so the eye lands on what matters first.
Quickstart sequences
Numbered prerequisites become a numbered scene track: install the SDK, set the API key, hit the first endpoint. Each step earns its own frame with a progress indicator.
Technical captions, spelled correctly
Captions handle camelCase, snake_case, package names, and acronyms without autocorrect mishaps. A domain pass keeps function names intact.
Localize the walkthrough
Translate the script and burned-in captions to any of the supported voiceover languages. Code blocks stay in source. Useful for SDK launches in multiple markets.
Three aspect ratios in one render
16:9 for the docs page, 9:16 for the launch post, 1:1 for the LinkedIn announcement, reframed automatically so the code stays on screen across each ratio.
Re-render on every doc update
Paste the diff or the new version, and ngram rebuilds the affected scenes without touching the rest. Keeps a 90-second quickstart in sync with the latest SDK release.
Private repos and unreleased docs
Working with pre-release SDK docs or private endpoints? Talk to sales about security, access controls, and data handling for your team.
The rest of ngram
The docs are one input. ngram does the rest of the workflow.
Script Generation
Reads the docs page and writes a script that opens with the use case, then walks each code block. Keeps method names intact and skips the boilerplate the reference page already covers.
Learn moreAI Voiceover
Pronounces SDK names, camelCase identifiers, and acronyms the way your team says them, not the way TTS guesses. Per-team voices available for branded developer channels.
Learn moreCaptions
Burned-in captions that preserve code identifiers, parameter names, and HTTP verbs. Critical when half your viewers watch muted on the docs page.
Learn moreBrand Kit
Developer-facing videos still represent the product. Logo, color, intro card, and outro CTA applied per export so the API walkthrough matches your docs site.
Learn moreMotion Graphics
Animated callouts, parameter pop-ups, and method highlights generated per scene. Turns a static code block into a frame that holds attention long enough to read.
Learn moreMulti-format Export
Same walkthrough rendered for the docs embed, the changelog post, and the launch tweet. One render, three aspect ratios, code stays legible on each.
Learn moreUse cases
Where a docs-driven walkthrough actually earns its time.
Quickstart videos that cut time to first API call
Embed a 90-second walkthrough above the curl example. Watch-completes correlate with developers reaching the second endpoint without filing a ticket.
See use caseTutorials that match every SDK release
Ship the SDK and the walkthrough video on the same day. Re-render from the new docs page when 1.x ships, no studio re-shoot, no scheduling.
See use caseIntegration walkthroughs your partners actually link to
Each partner integration deserves its own video. Convert the integration guide once per partner; embed on the partner page and in the launch post.
See use caseDeveloper-update videos from the changelog
Pair the GitHub release with a 60-second walkthrough that shows the new endpoint in action. Posts in Discord and developer Slack instead of getting buried.
See use caseConceptual explainers grounded in your real API
Take the “How auth works” page and render an explainer with the actual method signatures. Stays accurate when the auth flow changes.
See use caseHelp articles where the code matters
Support articles that include code snippets get a video version that walks through the snippet. Cuts the back-and-forth tickets that follow copy-paste mistakes.
See use caseLaunch videos for new SDK features
Convert the announcement page, not the marketing brief, into the launch video. Keeps the demo on the real method names and lets PMM publish without a re-shoot.
See use caseOnboarding for technical accounts
Turn the implementation guide into a video that the CSM hands to a new account’s engineering team during kickoff. Fewer “where do I start” emails.
See use caseOther converters
Different source material? Same pipeline.
Product docs to video shares the parser, brand kit, and render stack with the rest of the converters. Pick the input you actually have.
Internal handbooks, PRDs, SOPs, and Google Docs. The non-technical sibling: no code blocks, no method tables, broader prose.
Open converterPair an API quickstart walkthrough with the changelog video that ships alongside it. Same brand kit, different framing.
Open converterCustomer-facing help articles, often a mix of UI screenshots and short snippets. Sits next to product docs in most teams’ stacks.
Open converterTools that pair with this converter
Polish the walkthrough before and after the render.
Generating from the docs
Different entry points to the same parser
URL to Video
Point at a public Mintlify, ReadMe, or Docusaurus page. ngram fetches it, preserves code blocks, and renders the walkthrough.
Open toolText to Video
Paste raw markdown when the docs page isn’t public yet. Same parser, no fetch.
Open toolAI Video Generator
When the docs page doesn’t exist yet, prompt the generator with the endpoint behavior and let it draft the walkthrough.
Open toolText to Speech Video
Paste a snippet of the docs page, pick a voice, get a narrated explainer in one pass.
Open toolEditing the walkthrough further
After the first render lands
Video Editor
Trim a 4-minute walkthrough into a 90-second quickstart. Replace the intro card. Re-record one scene’s voiceover.
Open toolAdd Subtitles to Video
Hand-tune captions where the AI got a SDK name wrong, or burn captions onto a rendered walkthrough from an external source.
Open toolVideo Cutter
Trim by transcript: pick the endpoint demo out of a longer walkthrough to embed in the API reference.
Open toolVideo Translator
Translate the voiceover and captions into a target market’s language while leaving code identifiers untouched.
Open toolPolishing the source first
Before you convert
Screen Recorder
Capture the real terminal output to drop into the rendered walkthrough as a B-roll segment between code scenes.
Open toolAI Image Generator
Generate architecture diagrams or auth-flow visuals to use as scene backgrounds where the docs page has none.
Open toolEye Contact AI
If you record a developer doing the walkthrough first, fix the gaze before the doc pages become scene cards around them.
Open toolBuilt for teams
Who reaches for product-docs-to-video?
Developer Relations
Quickstart walkthroughs that ship with each SDK release. The video is one paste from the docs page, not a Friday calendar block in the studio.
See workflowsProduct Marketing
Launch videos for technical features that use the real method names instead of marketing paraphrase. Same docs page, multiple aspect ratios.
See workflowsProduct Managers
Convert the implementation guide into a 90-second video for the engineering kickoff. Stakeholders watch instead of skimming.
See workflowsCustomer Success
Onboarding videos for technical accounts. Convert the integration guide once per partner, hand to the customer engineering lead.
See workflowsSupport Teams
Help articles with code snippets get a paired video walkthrough. Reduces “my curl returns 401” tickets that have an answer on the auth page.
See workflowsEnterprise
Internal documentation behind SSO can still feed branded walkthroughs. Talk to sales about security, access controls, and data handling for your team.
See workflowsIntegrations
Wire product-docs-to-video into your release pipeline.
Every integration ships with a working recipe. Or build the same flow with the REST API (webhook subscriptions are provisioned by sales).
whenA new docs page is published in Mintlify or ReadMe
thenConvert the page to a walkthrough video and drop the share link in #devrel
whenClaude or ChatGPT is handed an API docs URL during a developer workflow
thenCall product-docs-to-video and return the hosted walkthrough link
whenA self-hosted CI step opens a PR with updated docs
thenTrigger a re-render of the affected walkthrough scenes from your self-hosted workflow
whenA GitHub release tag matches a v* SDK version
thenPull the quickstart docs URL and re-render the walkthrough for that version
whenYou’re on a public docs page in the browser
thenHit “Convert to walkthrough” and get the MP4 back in a new tab
whenA product-docs walkthrough finishes rendering
thenPublish to the developer-channel playlist with the docs URL in the description
How it compares
If you’ve been doing this with something else.
Guidde records and edits a desktop capture. Scribe builds a step guide from clicks. Loom hands you the raw recording and a trim bar. ngram reads the docs page itself, code blocks, headings, parameters, and ships a branded walkthrough without a screen recording.
| Feature | ngram | Guidde | Scribe | Loom |
|---|---|---|---|---|
| Source material | Reads the actual docs page (markdown, MDX, HTML) | Screen recording | Browser click capture | Screen recording |
| Code block treatment | Language-aware syntax-highlighted scene cards | Whatever is on screen | Static screenshot | Whatever is on screen |
| Re-render on docs update | Paste the diff, regenerate affected scenes | Re-record the desktop | Re-record the click flow | Re-record the desktop |
| Storyboard before render | Scene-by-scene preview with editable script | Post-record edit | Step list editor | Trim bar |
| Multi-aspect-ratio export | 16:9, 9:16, 1:1 in one render | 16:9 only | Doc/PDF format | 16:9 only |
| Voiceover that pronounces SDK names | Domain pass for identifiers and acronyms | Your own voice | Text steps | Your own voice |
| Localized voiceover and captions | Translate script and burned-in captions; keep code | Manual re-record | Manual translation | Manual re-record |
| API for the docs pipeline | REST, MCP, webhooks, n8n, Zapier | Limited API | Limited API | Limited API |
| Source handling | Used only to generate your video | Retained | Retained | Retained |
FAQ
Common questions about product docs to video
Still curious?
Product Docs → Video
Ready to ship the walkthrough alongside the docs page?
Paste the page, accept the scene plan, render the branded walkthrough. Roughly the time it takes to write the launch announcement.