The Studio
Preview every paywall locally with superwall dev — devices, themes, locales, live variables, and simulated purchases.
superwall dev hosts the studio at http://localhost:6100: every paywall in your project as a card with a live miniature, and an editor per paywall with a device-frame preview at exact logical size. It's where you check everything you can't check in code.
superwall dev # the current project
superwall dev examples/* # several projects at oncedev needs no login, regenerates superwall.d.ts first (so route and product types are always current), and takes --port/-p (default 6100, moving to the next free port) and --host.
Project problems — a stray file in app/, a duplicate route — print as warnings in dev. They're the same checks that block a push, so fix them as they appear rather than discovering them at ship time.
What you can check
- Devices — iPhone SE through iPad Pro, plus Pixel. Switching devices also changes what the paywall sees as platform, model, and OS version, so platform-conditional code is testable too.
- Light and dark — the studio's theme toggle drives the same
darkclass the SDK stamps on device. Check both, always. - Locale — switch languages to proof every catalog. See Localization.
- Rotation — portrait and landscape, live. See
useDevice().orientationin the hooks reference. - Trial eligibility — a toggle that flips the store's answer, so both versions of a trial paywall are one click apart. See Free trials.
- Variables — edit user attributes, device properties, placement params, and per-product variables live in the Variables panel. Values are seeded from your app's real sample data and products, so the preview reflects what production will see. See Variables & personalization.
Simulated outcomes
In dev, everything that would normally resolve from the host — purchases, restores, permission prompts, callbacks — prompts you to pick the outcome instead, so both branches of every flow are testable. Decline your own purchase to check the abandoned path; deny your own permission request to check the fallback copy.
Alongside it runs the event log: every message the paywall sends — haptics, page views, purchase attempts — as it happens. It's where you confirm that a tap fired its haptic, or that an action reached the host.
Dev vs device
The same paywall runs against a simulated host in dev and the real SDK on device. What differs:
superwall dev | Real device | |
|---|---|---|
| Product variables | undefined until the studio injects your dashboard products | Delivered by the SDK |
purchase() / restore() | Simulated — you pick the outcome | Real store |
close(), openUrl(), haptics | Logged in the event log | Acted on by the host |
| Permissions / callbacks | Studio prompts you | OS prompt / your app's code |
| Numeric variables | Numbers | Strings — always Number() first |
Presentation (paywall_open) | Immediate | After preload, when actually shown |
| Web checkout sheet | Not mounted — verify on a pushed version | Works |
A published paywall never falls back to simulated data — the simulation exists only in previews.
The Push, Publish, and Promote buttons
The studio has buttons for the same operations as the CLI — good for quick iteration. For actually shipping, prefer the CLI: the buttons skip the diagnostics gate and the dashboard product check, can't resolve renames, and take no -m note. See Push, promote & publish.
How is this guide?