How to Capture a Phoenix/Elixir Web App with a Screenshot API

Phoenix and LiveView are a common choice for teams that want server-rendered interactivity without a heavy JavaScript frontend framework. That combination is great for the app itself, but it introduces its own timing quirks when the goal is a reliable, automated screenshot of what the page actually renders.

Why Phoenix/LiveView Apps Need Careful Timing

• LiveView's WebSocket connection has to establish and push its first render update after the initial HTML arrives, which can lag slightly behind a plain page load.
• Streamed and paginated content in LiveView views can arrive in stages, so a capture taken instantly may miss later updates.
• Dashboards and admin panels built on Phoenix are often long, data-dense pages where a full-page capture matters more than a cropped viewport.

Elixir Example

Using Req:

Req.post!("https://api.prod.ss.snapshot-site.com/api/v1/screenshot",
  headers: [
    {"content-type", "application/json"},
    {"x-snapshotsiteapi-key", "YOUR_API_KEY"}
  ],
  json: %{
    url: "https://app.example.com/dashboard",
    format: "png",
    width: 1440,
    height: 900,
    fullSize: true,
    hideCookie: true,
    delay: 2
  }
)

delay covers the gap between the initial HTML response and LiveView's first post-connect render — without it, a capture risks catching the page before its live updates have arrived.

Practical Recommendations

• Use delay for any LiveView-driven screen. A short delay (1-2 seconds) is usually enough to let the socket connect and push its first update.
• Point the capture at an authenticated session URL for internal dashboards, the same way as any session-protected screen — see How to Screenshot a Login-Protected SaaS App for the general pattern.
• Default to fullSize: true for admin panels. Phoenix-based internal tools tend to be long, table-heavy pages rather than a single fixed screen.
• Strip environment banners with hide. Staging ribbons or build-version footers common in Elixir deployments can be removed cleanly on the v2 endpoint before capture.

Common Use Cases

• Visual QA before deploying a LiveView update
• Weekly dashboard snapshots for stakeholders without direct system access
• Documentation screenshots for internal admin panels
• Feeding a scheduled visual monitor, as described in Visual Uptime Monitoring

Why a Direct API Call Beats a Custom Wallaby Setup

Elixir teams that already use Wallaby for browser-based testing sometimes reach for it to add screenshotting too, since it's already a dependency. That works, but it means owning a headless browser driver and its quirks as a side project. A single HTTP call from the same Elixir codebase hands that rendering concern to a service built specifically for it.

Snapshot Site renders the real Phoenix app the same way a connected user's browser would, without adding a browser driver to your own build.