picto records everything a user sees and does in your Flutter app — every draw call, every tap, every navigation, every error — and lets you watch it back later as a real, layout-accurate replay reconstructed from vector data. No screenshots, no video, no server-side rendering: the recording is a compact binary stream of the actual paint commands your app issued, replayed through the same rendering pipeline on the way back out. Text and most images are captured as placeholder shapes by design, not real pixels or characters — see What We Capture for exactly where that line sits.
This documentation is for developers integrating the recording SDK into their own app
and for anyone using the dashboard to manage recordings, teammates, and API keys. It does not cover how the recorder works internally — if you're curious about that, the project's own
todo.md and source comments go deep on it, but nothing here assumes you've read them.
What you get#
- Vector-accurate replay of real sessions — layout, shapes, positioning, animations, dialogs, and scrolling, all reconstructed from the actual paint commands your app made. Text renders as placeholder bars and most images as placeholder rects by default (see What We Capture) — this reconstructs layout and behavior, not pixels.
- Input and lifecycle capture — taps, drags, scrolls, focus changes, app lifecycle transitions, and uncaught errors, all timestamped alongside the visual playback.
-
Custom metadata — tag a whole session (
user segment,experiment variant, ...) or drop a timestamped marker at a specific moment (checkout tapped,payment failed) so you can find what matters in a long recording. - A dashboard to sign in, organize recordings by organization and client app, generate/rotate API keys, invite teammates, and watch replays in the browser.
How the pieces fit together#
-
Your app embeds the recording SDK — the
pictopackage from pub.dev — and uploads finished recordings to your backend. -
Your backend is a deployment of this project's
apps/server— a schema-config app built on zonai that stores organizations, client apps, and recordings, and serves the public API your app and dashboard both talk to. -
The dashboard (
apps/website) is where you sign in, create organizations and client apps, grab API keys, invite collaborators, and click "Watch replay" on any recording.
If you're setting this up for the first time, start with Installation, then Quick Start to get your first recording uploaded end to end.