How-to Guide
Combine Code Screenshots into a Documentation Grid
Written code documentation benefits enormously from visual support. A grid combining your editor, the terminal output, and the rendered result lets readers follow the 'input → process → output' loop at a glance — without needing to run the code themselves.
Try MergeFrame — FreeVisual documentation dramatically reduces the 'getting started' friction for developers using your library, API, or tool. When someone can see what the code looks like, what it outputs to the terminal, and what the result looks like rendered — in one image — comprehension time drops significantly.
Common grid layouts for code documentation: (1) a 1×2 showing code snippet on the left and rendered output on the right — classic for UI component libraries, (2) a 1×3 showing file structure → code → terminal output for CLI tools and scripts, (3) a 2×2 showing the 'before' code, the 'after' refactored code, and their respective outputs — effective for migration guides.
For API documentation, a 2×2 grid of: request body (JSON), response body, rendered in Postman, and your app's resulting UI — communicates the full integration picture in one image and drastically reduces support tickets.
Keep code screenshot backgrounds dark (VS Code dark theme, terminal with dark profile) for readability in documentation pages and GitHub READMEs, which are predominantly dark or neutral-toned.
How to Do It — Step by Step
- 1
Identify the 'input-process-output' sequence
Decide what 3–4 elements best illustrate your documentation flow: code file, terminal command, terminal output, and rendered result.
- 2
Capture screenshots at consistent sizes
Use the same font size and window width across all editor/terminal captures for visual consistency.
- 3
Open MergeFrame
Navigate to mergeframe.com — free, browser-based, no software install.
- 4
Arrange logically (left to right = time)
Input on the left, output on the right. For code docs, left-to-right should always follow execution order.
- 5
Export and embed in your docs
Export as PNG and embed in your Markdown docs, Notion page, Confluence, or GitHub README.
Ready to merge your images?
100% browser-based. No account. No upload. Free.
Frequently Asked Questions
Should I use screenshots or code blocks in documentation?
Use code blocks for copy-paste-able code, and screenshots for showing the visual context (editor setup, terminal output, rendered UI). A grid combining both is the most effective approach.
What's the best font size for code screenshots in a grid?
14–16px at 1x pixel density. Scale up your editor font before taking screenshots — small fonts lose legibility when compressed into a grid cell.
How do I keep dark and light screenshots consistent in a grid?
Choose one theme (dark or light) for all screenshots in a grid. Mixing themes in one grid looks inconsistent. Most dev docs use dark theme screenshots for higher contrast.
MergeFrame — Combine images into a grid. Free. No account. Browser-only.
Try MergeFrame Free →