PeekShot lets you turn raw HTML into high-quality screenshots without hosting the page anywhere. This guide walks you through the updated Capture HTML Screenshot flow in the dashboard.
Step 1: Open Capture HTML Screenshot
To generate a screenshot from HTML code, navigate through your projects:
From the sidebar, click Projects.
Find the project where you want to store the screenshots and click Proceed.
On the Capture Screenshots page, click Start on the Capture HTML Screenshot card.
Note: There is no direct Capture HTML link in the sidebar menu. You access it from a project via the Proceed button.
Step 2: Paste or Write Your HTML Code
On the Capture HTML Screenshot page:
Locate the HTML Code text area.
Paste your HTML snippet or page template directly into the field.
Optionally, keep an eye on the character counter below the field to understand how large your HTML input is.
Tips:
Include a full HTML skeleton if needed (for example,
<html><head>...</head><body>...</body></html>).You can inline CSS or link to external assets just as you would in a regular page.
Step 3: Choose Image Format and Screen Size
Under Basic Options:
Image Format: Select PNG for maximum quality or JPG for smaller file sizes.
Screen Size & Device: Choose a preset device from the dropdown (desktop, tablet, mobile) or pick Custom (Width x Height) to set your own dimensions.
If you select Custom, two new fields appear:
Width (px): e.g.,
1920Height (px): e.g.,
1080
Step 4: Configure Layout and Timing
Still in Basic Options, configure how the HTML should be captured:
Full Page: Enable this to capture the entire scrollable page created by your HTML layout.
Disable Animation: Turn this on to freeze animations for a cleaner, more consistent screenshot.
Disable JavaScript: Turn this on if your HTML includes scripts you don’t want to run during capture.
Delay (seconds): Use the slider (0–60 seconds) to wait before capture. This is useful if your HTML runs animations or data loading that needs time to complete.
Step 5: Capture the Screenshot
Review your HTML, format, and options.
Click the Capture Screenshot button at the bottom of the form.
PeekShot will create a capture request and show a Processing Screenshot... state in the preview panel.
Once the screenshot is ready, the preview area on the right updates to show the rendered image.
Step 6: Copy or Download the Result
After the capture completes:
Use Copy URL to copy a direct link to the screenshot image (useful for APIs, docs, or sharing).
Click Download Image to save the file to your computer in the format you selected (PNG or JPG).
Step 7: Find the Screenshot Later
The screenshot is saved automatically to the project you started from:
From the sidebar, open File Manager.
Locate the project you used and click View.
Browse the screenshots list and open or download the HTML-based capture whenever you need it.
Common Pitfalls with HTML Screenshots
Missing assets: If your HTML references external CSS or JS that is not publicly available, the rendered result may look different.
Long pages without full page enabled: If you expect a tall layout, enable Full Page so nothing is cut off.
Animations or transitions: Use the Disable Animation toggle or a longer delay so you capture the state you want.