render an html report

screenpipe's in-app viewer can render a standalone .html file as a live page (charts, dashboards, styled reports), but only when you opt in and keep the file self-contained. Otherwise it shows as raw source.

the two rules

1. Opt in. The first line of the file must be the marker:

   <!-- screenpipe:render=human -->
   

   (or <meta name="screenpipe:render" content="human"> inside <head>). Without it the file shows as source, not a rendered page.

2. Self-contained, no network. It renders in a locked-down sandbox with zero network access. So:

   • inline all CSS in a <style> tag and all JS in a <script> tag;
   • embed any images as data: URIs;
   • no external <script src> / <link rel=stylesheet> / CDN, no fetch, no forms that POST.

   Anything that touches the network is silently blocked, a CDN-loaded chart library renders blank. Draw charts with inline SVG or plain HTML/CSS bars instead (see the template).

how the user sees it

Write the file (e.g. ./output/report.html), then link it with an absolute path from your note or notification, e.g. [open report](/Users/me/.../output/report.html). The user clicks it; the viewer offers "preview rendered"; it renders inside the sandbox. Only standalone .html / .htm files render, HTML pasted inside a markdown note does not.

The viewer matches the host light/dark theme; if you care about dark mode, style with @media (prefers-color-scheme: dark).

template (copy, then fill in with real data)