How-to Guide
Combine Screenshots into a Grid for Technical Documentation
Technical documentation lives or dies by its visuals. A single grid showing input, command, and output teaches a developer in seconds — faster than paragraphs of prose and separate screenshot attachments.
Try MergeFrame — FreeDeveloper documentation needs to communicate input, process, and output simultaneously. A 1×3 grid (code → terminal → result) maps exactly to how developers think.
For API docs, use 2×2: request (top-left), response (top-right), auth (bottom-left), error handling (bottom-right). For CLI tools: install → usage → output. For onboarding: file structure → config → first run → dashboard.
Keep all screenshots in dark theme for readability on dark-background platforms like GitHub. Use consistent font size (14–16px).
How to Do It — Step by Step
- 1
Plan your doc grid story
What's the input-process-output? Code → terminal → result, or request → response → UI.
- 2
Capture at consistent size
Same terminal width, same editor font size, same zoom level.
- 3
Open MergeFrame
Visit mergeframe.com — free, no signup, instant.
- 4
Choose 1×3 or 2×2 layout
1×3 for workflows, 2×2 for API references.
- 5
Export and embed
Download PNG at 1920px. Embed in README, wiki, Notion, or Confluence.
Ready to merge your images?
100% browser-based. No account. No upload. Free.
Frequently Asked Questions
Screenshots or code blocks?
Both. Code blocks for copy-paste, screenshots for visual context. A grid gives readers both.
Best format for API docs?
2×2: request, response, auth headers, error response — the four things every API consumer needs.
Works with static site generators?
Yes. Export PNG, place in /static/img/, reference in Markdown/MDX.
MergeFrame — Combine images into a grid. Free. No account. Browser-only.
Try MergeFrame Free →