Can Loki Export Website Screenshots as PDF?
Storybook Loki documents screenshot images and visual diffs, not native PDF export. Here’s how to turn its captures into a PDF and when to capture a page directly.
Short answer: Storybook Loki’s documentation describes capturing screenshots and comparing them with reference images; it does not document a built-in PDF export command. If you need a PDF, add a separate conversion or browser print-to-PDF step. That is a workaround around Loki, not a Loki feature.
This article means Loki for Storybook, the visual-regression tool. Grafana Loki is a separate log-aggregation product, and its documentation concerns logs and queries.
1. What Loki produces
Loki captures Storybook stories and compares the screenshots against references. Its getting-started guide says captures go in loki/current and visual differences in loki/difference. Its CLI reference documents loki test for capture and comparison, loki update for capturing and updating references, and loki approve for approving images.
The configuration documentation describes screenshot-related settings such as a Chrome selector for cropping the screenshot area and image-diff engines including pixelmatch, gm, and looks-same. The documented output is images and diffs; the CLI reference does not list a PDF export command or PDF output format.
This is a statement about the documented interface, not proof that no custom script, plugin, or later release could add a PDF workflow. The Loki pages surfaced by the research report an update date of August 27, 2024, so check the current project documentation for changes relevant to your version.
2. Choose the PDF workflow that matches the deliverable
| What you need | Approach | What the PDF contains |
|---|---|---|
| A record of the exact Loki visual-regression captures | Capture with Loki, then assemble the resulting images into a PDF using a separate image-to-PDF step. | Pages made from screenshots; visual appearance is preserved, but text is generally not selectable. |
| A PDF of a live webpage | Use a browser’s print-to-PDF workflow or a webpage-to-PDF tool separately from Loki. | Browser-rendered page output, which may paginate or differ from a fixed screenshot. |
| A review artifact showing visual changes | Capture the Loki screenshot and include the relevant difference images in a separately assembled PDF. | Both the capture and selected visual diffs, if you add them. |
Use the first workflow when visual fidelity to Loki’s captured pixels matters. Use print-to-PDF when the reader needs document-like page layout or selectable text; a browser print layout can reflow and paginate, so it is not necessarily pixel-identical to the screenshot.
3. Capture with Loki, then make a PDF from the image files
- Run your normal Loki capture or comparison command. For example, use
loki testto capture and compare, orloki updatewhen your intent is to capture and update reference images. Follow your project’s configured Storybook and Loki setup. - Inspect the configured output directories. The getting-started documentation describes current screenshots in
loki/currentand visual differences inloki/difference; paths can depend on project configuration. - Choose the images to include. A PDF containing every story can grow quickly, so include only the captures or diffs needed for the review.
- Use an image-to-PDF converter or a script/library appropriate to your environment. This conversion is a separate step; Loki does not document it as part of its CLI.
The dossier does not establish a particular image-to-PDF library or command, so there is no single safe, portable converter command to prescribe here. Choose a converter that accepts your image formats and gives you control over page size, orientation, scaling, and ordering. For repeatable review artifacts, make the input file list deterministic and record the conversion settings in your own build workflow.
Keep capture and conversion separate
Preserve Loki’s original screenshots and diffs as the source artifacts. Create the PDF as a derived artifact, and do not replace the reference images with PDF pages: Loki’s documented comparison workflow operates on screenshots and image differences. If a PDF conversion fails, you can then rerun only the conversion instead of recapturing every story.
4. Troubleshooting
| Symptom | Likely cause | What to do |
|---|---|---|
| You cannot find a PDF option in Loki. | The documented CLI and configuration describe screenshot images and diffs, not PDF export. | Keep Loki for capture and comparison, then add a separate conversion or print-to-PDF step. |
| The PDF is missing a story or contains an old image. | The selected input directory may not be the current capture output, or the desired capture did not run. | Check the configured screenshot folder and inspect the files and timestamps after the Loki run. The getting-started guide names loki/current for current captures. |
| The PDF shows differences as pages unexpectedly. | The conversion input includes files from the difference output folder. | Choose explicitly whether the PDF should contain current captures, reference images, visual diffs, or a curated set. |
| Images are cropped or scaled in the PDF. | PDF page dimensions and image-fit behavior differ from the source screenshot dimensions. | Set page size and scaling in the converter, or use one screenshot per page with fit-to-page behavior that preserves aspect ratio. |
| PDF text is not selectable. | The PDF was assembled from raster screenshots. | That is expected for an image-based PDF. If selectable text or reflow matters, create a PDF from the live page with a browser print-to-PDF workflow instead. |
| Visual output differs between the screenshot and PDF. | Print-to-PDF can apply print styles, pagination, and browser-specific layout behavior; image conversion can also resize the image. | For pixel-oriented evidence, convert the Loki image files. For a document-style PDF, review the browser’s print output as a distinct deliverable. |
5. Performance, reliability, and cost considerations
A PDF conversion adds work after the screenshot capture: reading image files, encoding PDF pages, and writing the resulting document. Large or numerous screenshots increase processing time and file size. Reduce the input set to the pages needed, avoid unnecessary upscaling, and use consistent page dimensions if the PDF will be regenerated in automation.
For reliable CI output, run conversion only after Loki has finished writing captures, fail the conversion step if expected input files are missing, and keep the PDF separate from Loki’s reference and difference folders. Archive the source images alongside the PDF if reviewers may need to inspect exact captures later. No benchmark or conversion cost figure is established by the available research; actual time and artifact size depend on image count, dimensions, compression, and the chosen converter.
Loki’s documented PDF capability is not a basis for claiming a built-in feature or a specific price. Any separate converter has its own availability, licensing, and operational considerations.
6. Or skip the browser setup
If your goal is to capture a live website directly as a PDF, ScreenshotNeo offers a one-request screenshot API and a PDF capture option. It is separate from Loki and does not turn Loki’s saved images into a PDF. See the ScreenshotNeo API documentation for request options and PDF settings.
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://stripe.com \
-d format=pdf \
-o page.pdfThe supplied ScreenshotNeo example is a direct screenshot request; PDF requests can use the API’s documented format options. The specific endpoint and product facts are available at ScreenshotNeo. Cookie banners, newsletter popups, and chat widgets are removed before the shot; bot checks, blank pages, and failed loads are never billed; an MCP server lets AI agents take screenshots; and 1,000 screenshots per month are free with no card, with paid plans starting at $5 for 3,000. Sign up for 1,000 free screenshots a month, no card required.
7. Frequently asked questions
Does loki test export a PDF?
The documented command captures and compares screenshots. The CLI reference does not document PDF export.
Can I put Loki screenshots into a PDF without changing the visual content?
Yes, by converting the image files into PDF pages while preserving their aspect ratio and avoiding unwanted resizing. The resulting pages are raster images.
Is Grafana Loki the same tool?
No. Grafana Loki is a log-aggregation product; this guide discusses Loki for Storybook visual regression.
Will converting screenshots preserve searchable text?
No. An image-based PDF preserves pixels, not the page’s underlying text structure. Use a webpage-to-PDF workflow if selectable text is required.
Sources
- Loki project documentation: CLI, getting started, and configuration documentation describe capture, reference, and difference images.
- Grafana Loki documentation: documentation for the separate log-aggregation product.
