# PlayStep

> PlayStep adds step-by-step, video-first guides to web, React and Flutter apps. Each step plays a short looping clip, spotlights the real UI element and completes itself when the user performs the action. Developers add one dependency; guides are built and published from a dashboard.

Full text of every page: https://staging.playstep.app/llms-full.txt

## Docs
- [Quickstart](https://staging.playstep.app/docs/getting-started): Add PlayStep to a website with one script tag, mark a button, and see your first guide in about 10 minutes.
- [Install with npm](https://staging.playstep.app/docs/getting-started/npm): Use @playstep/web from your bundler, for single-page apps and any framework.
- [Install for React](https://staging.playstep.app/docs/getting-started/react): Wrap your app in PlayStepProvider; mark anchors with guideAnchor and report events with useTrack.
- [Install for Flutter](https://staging.playstep.app/docs/getting-started/flutter): Add the playstep package, wrap your app with PlayStep.builder, and anchor guides to widgets with GuideAnchor.
- [Your first guide](https://staging.playstep.app/docs/getting-started/first-guide): From an empty dashboard to a live four-step guide, with clips, in about 10 minutes.
- [Guides](https://staging.playstep.app/docs/concepts/guides): A guide is an ordered set of steps with a trigger, targeting rules and a look.
- [Steps](https://staging.playstep.app/docs/concepts/steps): A step is an anchor, a title, one sentence, a clip and a completion rule.
- [Anchors](https://staging.playstep.app/docs/concepts/anchors): Anchors are explicit ids on the elements guides point at. They survive redesigns that would break CSS selectors.
- [Triggers](https://staging.playstep.app/docs/concepts/triggers): [object Object]
- [Completion rules](https://staging.playstep.app/docs/concepts/completion-rules): [object Object]
- [Clips](https://staging.playstep.app/docs/concepts/clips): Each step can show a short, muted, looping clip. Host it with us, link to your own file, or embed YouTube or Vimeo.
- [Environments](https://staging.playstep.app/docs/concepts/environments): Every app has a development and a production environment, each with its own keys, published guides and kill switch.
- [Web SDK](https://staging.playstep.app/docs/sdk/web): Every method of @playstep/web and the script-tag build, with examples.
- [React](https://staging.playstep.app/docs/sdk/react): PlayStepProvider, usePlayStep, useTrack and guideAnchor from @playstep/react.
- [Flutter](https://staging.playstep.app/docs/sdk/flutter): Every API of the playstep and playstep_embeds packages, with examples.
- [Server API](https://staging.playstep.app/docs/sdk/server-api): Publish guides kept as JSON in your repository, and delete a user's data, with a secret key.
- [Creating guides](https://staging.playstep.app/docs/dashboard/creating-guides): [object Object]
- [Recording and uploading clips](https://staging.playstep.app/docs/dashboard/clips): Upload short screen recordings; the dashboard trims, compresses and stores them, with a poster frame.
- [External video links](https://staging.playstep.app/docs/dashboard/external-links): Use clips you already host, or YouTube and Vimeo videos. They are never counted toward hosted video.
- [Preview and publish](https://staging.playstep.app/docs/dashboard/preview-and-publish): Try a draft safely, publish it to development and production, and switch everything off in an emergency.
- [Versions and rollback](https://staging.playstep.app/docs/dashboard/versions-and-rollback): Every publish saves a version. Roll an environment back to any of them in one click.
- [Analytics](https://staging.playstep.app/docs/dashboard/analytics): Starts, completions, the step funnel and where people drop off, per guide and environment.
- [Generate with AI](https://staging.playstep.app/docs/dashboard/generate-with-ai): Show PlayStep your app, get tours written for it step by step, then record a clip for each step.
- [Plans](https://staging.playstep.app/docs/billing/plans): Free with small hard limits, and one Pro plan at $9.99 a month billed annually.
- [Guided users](https://staging.playstep.app/docs/billing/guided-users): [object Object]
- [Hosted video](https://staging.playstep.app/docs/billing/hosted-video): [object Object]
- [Overage](https://staging.playstep.app/docs/billing/overage): How Pro is billed above the allowance, with worked examples.
- [Spend caps and alerts](https://staging.playstep.app/docs/billing/spend-caps-and-alerts): A monthly limit on overage, and emails before you reach your allowance or cap.
- [Invoices and payments](https://staging.playstep.app/docs/billing/invoices): [object Object]
- [Keys](https://staging.playstep.app/docs/security/keys): Publishable keys go in your app; secret keys stay on your servers. Both are per environment.
- [Content Security Policy](https://staging.playstep.app/docs/security/csp): The directives your CSP needs for the PlayStep web SDK.
- [Data we collect](https://staging.playstep.app/docs/security/data-collected): Exactly what the SDK sends, and what it never touches.
- [Data deletion](https://staging.playstep.app/docs/security/data-deletion): Delete one end user's data, an app, or your whole workspace.
- [Changelog](https://staging.playstep.app/docs/changelog): What changed in the SDKs, the dashboard and the API.
- [PlayStep docs](https://staging.playstep.app/docs): Add playable, video-first guides to your web, React or Flutter app, and build them from a dashboard.

## Guides
- [Build your first onboarding guide in 10 minutes](https://staging.playstep.app/guides/first-onboarding-guide): Install the SDK, mark three buttons, record three clips, and publish a welcome tour that checks itself off.
- [Recording great 5-second clips](https://staging.playstep.app/guides/recording-great-clips): Short, cropped, silent loops that show exactly one action, and stay under 2 MB.
- [Hosting clips on your own CDN](https://staging.playstep.app/guides/hosting-clips-on-your-cdn): Link clips you already host and keep your hosted-video meter at zero, and your bill at $9.99.
- [Adding guides to a Flutter app](https://staging.playstep.app/guides/flutter-app): Install the package, wrap widgets in GuideAnchor, name your routes, and run the same guide on iOS, Android and web.
- [Triggering guides from your own events](https://staging.playstep.app/guides/triggering-from-events): Start a guide at exactly the right moment, and complete steps when work is saved, with track().
- [Measuring guide completion and fixing drop-offs](https://staging.playstep.app/guides/measuring-completion): Read the step funnel, find the step that loses people, and fix the usual three causes.