Home

stencila snap

Capture screenshots and measurements of documents served by Stencila

The snap command allows programmatic screenshotting and measurement of documents served by Stencila. It can be used to:

  • Iterate on themes and styled elements and verify changes - Capture screenshots for documentation or CI - Assert computed CSS properties and layout metrics - Measure page elements for automated testing

Usage

stencila snap [OPTIONS] [PATH] [OUTPUT]

Examples

# Start server in background
stencila serve --sync in &

# Capture viewport screenshot (default)
stencila snap snaps/viewport.png

# Capture full scrollable page
stencila snap --full snaps/full.png

# Verify computed padding for title
stencila snap --assert "css([slot=title]).paddingTop>=24px"

# Capture mobile viewport of specific element
stencila snap --device mobile --selector "stencila-article [slot=title]" snaps/mobile.png

# Capture full mobile page
stencila snap --device mobile --full snaps/mobile-full.png

# Force light or dark mode
stencila snap --light snaps/light.png
stencila snap --dark snaps/dark.png

# Preview with PDF/print styles (A4 width)
stencila snap --print snaps/print-preview.png

# Multiple assertions without screenshot
stencila snap \
--assert "css([slot=title]).fontSize>=28px" \
--assert "count(section)==5" \
--measure

# Use custom viewport and wait conditions
stencila snap \
--width 1920 --height 1080 \
--wait-until networkidle \
--delay 500 \
snaps/desktop.png

# Capture specific document path
stencila snap docs/guide.md snaps/guide.png

Arguments

NameDescription
[PATH]Path to document or directory.
[OUTPUT]Output screenshot path (.png).

Options

NameDescription
--selectorCSS selector to capture or measure.
--fullCapture full scrollable page. Possible values: true, false.
--deviceDevice preset.
--widthViewport width in pixels.
--heightViewport height in pixels.
--dprDevice pixel ratio.
--lightUse light color scheme. Possible values: true, false.
--darkUse dark color scheme. Possible values: true, false.
--printPreview with print media styles (A4 width, for PDF preview). Possible values: true, false.
--wait-untilWhen to capture: load, domcontentloaded, networkidle. Default value: network-idle.
--wait-forWait for CSS selector to exist before capturing.
--delayAdditional delay in milliseconds after page is ready.
--measureCollect computed CSS and layout metrics. Possible values: true, false.
--assertAssert measurement conditions.
--urlOverride URL (instead of discovering server).

Possible values of --device

ValueDescription
laptopLaptop (1440x900 DPR)
desktopDesktop (1920x1080 DPR)
mobileMobile (390x844 DPR)
tabletTablet (768x1024 DPR)
tablet-landscapeTablet Landscape (1024x768 DPR)

Possible values of --wait-until

ValueDescription
loadWait for 'load' event
dom-content-loadedWait for 'DOMContentLoaded' event
network-idleWait for network idle (default)
© 2026 Stencila