Quickstart

This guide takes you from nothing to a live paywall: scaffold a project inside your app, preview it locally, and push it to Superwall.

Before you start

You'll need:

• Node 20.12+ (or Bun) and git.
• A Superwall account with an application to push to.
• The Superwall CLI:

bun add -g superwall

npm install -g superwall

• SUPERWALL_CHANNEL=next in your shell. The CLI's next channel is where experimental and beta features live, and the framework is on it; without the variable the CLI has no create. Add export SUPERWALL_CHANNEL=next to your shell profile (for example ~/.zshrc) so every later command, yours or your agent's, stays on the channel. See Channel.

1. 1

   Create the project

   From the root of your app's repo:

   superwall create

   This scaffolds a self-contained superwall/ directory, its own package.json, a starter paywall, and everything wired up, then connects it to your Superwall app and installs dependencies. Your app itself needs no npm setup.

   To skip the app picker, pass the app's id: superwall create --app <id>. superwall apps list shows every app with its id.

   To start from a working pattern instead, scaffold any example. Each is a complete project:

   superwall create --example multi-page

2. 2

   Preview in the studio

   superwall dev

   This opens the studio at http://localhost:6100: every paywall as a card with a live preview, and an editor per paywall with a device-frame view at exact logical size. Switch devices, toggle light and dark, rotate, change locales, and buy: the studio hosts the paywall the way the SDK does and asks you to pick each purchase outcome, so you can test every branch of your flow. See The studio for the full tour.

   Edits hot-reload as you save. Warnings about project problems (a stray file in app/, a duplicate route) appear here too. They're the same checks that block a push, so fix them as they come up.

3. 3

   Make it yours

   Open superwall/paywalls/<id>/ and edit. A paywall is ordinary React:

   // app/index.tsx
   import { useProducts, usePurchase, useActions, useHaptics } from "superwall/hooks";
   
   export default function Paywall() {
     const { getProduct } = useProducts();
     const { purchase } = usePurchase();
     const { close } = useActions();
     const haptics = useHaptics();
     const annual = getProduct("annual");
   
     return (
       <main>
         <button aria-label="Close" onClick={() => { haptics.light(); close(); }}>×</button>
         <h1>Go Pro</h1>
         <button
           onClick={async () => {
             haptics.light();
             const result = await purchase("annual");
             if (result.status === "completed") haptics.success();
           }}
         >
           {annual?.variables.price ? `Subscribe · ${annual.variables.price}` : "Subscribe"}
         </button>
       </main>
     );
   }

   One thing to know from day one: product data arrives at runtime. Prices come from the store on a device and from your dashboard in the studio, and either host can deliver a product before its data, so guard every read rather than assuming a number is there. See Products.

4. 4

   Point at real products

   config.ts declares product slots. The key is the name your code uses; the value is the store identifier:

   import { definePaywall } from "superwall/config";
   
   export default definePaywall({
     name: "Pro — Annual",
     products: {
       annual: "pro_5999_year",
     },
   });

   The identifiers must exist as products on your Superwall dashboard. A push refuses otherwise. Create them in the dashboard, or from the CLI with superwall products create. See Products.

5. 5

   Push, then promote

   superwall push       # build + seal an immutable version — production untouched
   superwall promote    # point production at the latest push

   Push saves, promote ships: the same split as git push and a deploy. superwall publish does both in one step. The first push binds each paywall to your dashboard and records the binding in superwall.lock; commit that file so every machine and CI push to the same paywalls. See Push, promote & publish.

6. 6

   Show it in your app

   Nothing changes on the app side: add the paywall to a campaign in the dashboard, and your existing register / placement calls present it. If you're new to Superwall, follow your platform's quickstart, iOS, Android, Expo, or Flutter, to get the SDK configured and a placement registered.

Where to next