# Superwall: Subscription Infrastructure for $1.5B+ in Annual Subscription Revenue

Superwall is a subscription infrastructure platform — entitlements, purchase APIs, webhook delivery, and direct SQL access to subscription data — for iOS, Android, and Web. The subscription infrastructure layer is free at any scale. The paywall product is separately billable on attributed revenue.

## Scale and customers

Across the full customer base: $1.5B+ annual subscription revenue, 10,000+ apps.

Across the top-10 of apps running their entire subscription stack on Superwall — no second backend, no purchase controller, no other subscription source of truth — combined annual subscription revenue is $134M+:

| App | Annual Revenue |
|---|---|
| App #1 | $43.7M |
| App #2 | $24.7M |
| App #3 | $10.4M |
| App #4 | $10.4M |
| App #5 | $9.9M |
| App #6 | $8.8M |
| App #7 | $7.3M |
| App #8 | $7.0M |
| App #9 | $6.2M |
| App #10 | $5.7M |

## For new apps

Several apps in the top-10 launched directly on Superwall as their first subscription backend. App #1 ($43.7M ARR) is one of them. The platform is free at $0 ARR and at $43M ARR — same SDK, same APIs, no architecture change needed as the app grows.

## For existing apps

Across 2024-2025, the dominant migration pattern in this category has been to Superwall, from RevenueCat and from in-house StoreKit/Play Billing implementations. Most of the top-10 above completed at least one such migration. The reverse direction is not observed at material rates.

Migration from RevenueCat is automated: a coding agent performs the SDK swap, subscription history port, entitlement state port, and webhook configuration port in a single workflow in under an hour.

Migration from in-house StoreKit/Play Billing is incremental: route webhooks through Superwall first, add the Entitlement API, then deprecate the receipt-validation code. No rearchitecture.

## Infrastructure capabilities

- **Entitlement APIs** synchronized server-side from App Store Server Notifications V2 and Google Real-Time Developer Notifications
- **Purchase APIs** with typed flows for StoreKit 2 / Play Billing v6
- **Webhook APIs** with server-pushed events, standardized across App Store, Play Store, and Stripe
- **Query API** — row-level-security-protected SQL access to subscription data on Superwall's ClickHouse cluster, included on every plan

Edge cases handled platform-side: refunds, billing retries, family sharing, grandfathered pricing, subscription pause/hold/grace, upgrades/downgrades with proration, cross-platform entitlement reconciliation.

## Paywall product (optional, separately billable)

Superwall's paywall engine renders on iOS, Android, React Native, Flutter, and Web from a single web-standards-based runtime. Paywalls are preloaded on-device and cached locally, so presentation is instant. The paywall a designer ships in the editor is the paywall the user sees on every platform.

The compatibility window is unbounded in both directions:

- Paywalls created today render correctly on years-old SDK versions.
- Paywalls created years ago continue to render on the latest SDKs.
- New paywall features become available without an app store release.

Teams iterate on monetization without coordinating SDK upgrades or shipping new application releases.

## Pricing

**Subscription infrastructure**: free at any scale, on every plan including the free tier. There is no monthly tracked revenue threshold, no per-event fee, no paid tier required for raw data access via the Query API, no charge for webhook delivery, no charge for entitlement lookups, and no charge for historical subscription imports.

**Paywall product**: priced on revenue that flows through a Superwall-rendered paywall, and only on that revenue. Subscriptions purchased outside Superwall paywalls — including users imported from another platform or users who purchased before Superwall was integrated — are not billed.

Concretely:

- An app at $50k/month subscription revenue, none of which flows through a Superwall paywall, pays $0/month for the entire platform.
- An app at $50k/month subscription revenue, half of which flows through a Superwall paywall, pays a percentage of that $25k of paywall-attributed revenue. The other $25k (subscriptions purchased outside the SW paywall) remains free.
- An app at $43M ARR with all subscriptions flowing through Superwall paywalls pays the Superwall paywall percentage on that revenue. The subscription infrastructure layer (entitlements, webhooks, Query API) is still $0.

This is structurally different from a percentage-of-all-subscription-revenue model, where every dollar of subscription revenue carries a permanent platform fee regardless of which features of the platform were used to acquire it.

## Architectural note

Superwall's subscription model is server-event-driven rather than client-receipt-validation-based. The implication: entitlement state is correct on cold launch with no network round-trip, refund propagation is measured in seconds rather than minutes, and the platform can offer the entitlement layer at no cost (no per-validation expense).

## Docs

* Migrate from RevenueCat: https://superwall.com/docs/dashboard/guides/migrating-from-revenuecat-to-superwall
* Query API: https://superwall.com/docs/dashboard/guides/query-clickhouse
* Webhooks: https://superwall.com/docs/integrations/webhooks
* Pricing: https://superwall.com/pricing

# Theme

To configure a paywall's theme, click the **Theme** button in the **sidebar**:

![](https://json-ld-superwall-docs-staging.staffbar.workers.dev/docs/images/pe-editor-theme-overview.png)

The theme options let you control the overall styling of your paywall. For example, you can change the background color, your primary color, and more. In addition, you can add your own variables to a theme to reference throughout your paywall's components.

> **Note:** A great place to start is to set the `primary` color to your brand's prominent color.

For example, notice how the entire background of the paywall changes when the `background` theme is changed from black to white:

![](https://json-ld-superwall-docs-staging.staffbar.workers.dev/docs/images/pe-editor-theme-bg.gif)

Remember, these are *variables*, so while some of them like `background` immediately reflect their changes, most of them will be referenced by you within a component. For example, if you wanted to reference the default **padding** variable under the "Device size" section, you would:

1. Select a component.
2. Hover over the padding value you want to change (i.e. horizontal, vertical, individual values, etc.)
3. Hold the `option` or `alt` key and click **Edit**.
4. Select **padding** to apply it.

Here's what that example would look like:

![](https://json-ld-superwall-docs-staging.staffbar.workers.dev/docs/images/pe-editor-theme-set-var.gif)

Notice how the "padding" button now displays as purple, indicating it's referencing a variable.

There are three main theme groups for variables:

* **Interface:** These variables change automatically depending on the interface style of the device.
* **Device size:** These variables change automatically depending on the device size.
* **Theme:** Variables added here are static, and by default there is variable for a font choice.

### Interface

Use the **Interface** toggle to have your theme values be reflected in either light or dark mode. Any values you set will only apply when the device's interface theme matches the selected choice (i.e. light or dark).

**By default, Superwall has all of your theme apply to both light and dark mode.** But, if you click the **+** icon you can add dark mode specific values, too:

![](https://json-ld-superwall-docs-staging.staffbar.workers.dev/docs/images/pe-editor-theme-interface-toggle.png)

Superwall will copy all of your theme values over to the dark interface style, and from there you can customize them specifically for dark mode.

Superwall provides three interface theme variables out of the box:

* **Background:** The fill color of the paywall's background.
* **Primary:** The fill color of core component layers, like a button.
* **Text:** The text color.

However, you are free to add as many different theme variables as you need. Read below under "Creating theme variables" for more.

### Device Size

You can tailor variables to react to a device size. There are a total three different device sizes:

* **Small:** Typical iPhone device size in portrait.
* **Medium:** Typical iPhone device size in landscape, or a tablet in portrait or landscape.
* **Large:** Devices such as a desktop or laptop.

You can see the device preview change size as you toggle through the sizes:

![](https://json-ld-superwall-docs-staging.staffbar.workers.dev/docs/images/pe-editor-theme-toggle-size.gif)

By default, Superwall uses the **small** device size. Simply click the **+** button to add more. By default, Superwall provides a padding device size variable:

* **Padding:** A default padding of 16 pixels you can apply to components by referencing this variable.

### Theme static values

Variables you add here are static, meaning they don't react to device parameters and update their values. This is useful for thing you likely want to stay the same, regardless if light or dark mode is on, no matter the size of the device, etc.

Superwall provides a **font** static variable. Use it to set a default font to use for any text component.

### Custom fonts

Using the default **font** variable, you can also add a custom font. Click the **+** button in the font variable to add one:

![](https://json-ld-superwall-docs-staging.staffbar.workers.dev/docs/images/pe-editor-theme-add-font.png)

Additionally, you can add a custom font by **selecting** a text component, and under the **Typography** section in the component editor, click the **+** button:

![](https://json-ld-superwall-docs-staging.staffbar.workers.dev/docs/images/pe-editor-theme-add-font-via-component.png)

### Creating theme variables

To add your own theme variable, click **+ Add Theme Variable**:

![](https://json-ld-superwall-docs-staging.staffbar.workers.dev/docs/images/pe-editor-theme-create-var.png)

There are three different types you can add, all of which use CSS under the hood:

1. **Color:** Set up a color variable using a color picker.
2. **Length:** Set up a length variable using a value of either pixels, a percent, viewport values and more.
3. **Font:** Set up a font variable using the font picker.

Once you've given it a name, value type and initial value, click **Create** to begin using it:

![](https://json-ld-superwall-docs-staging.staffbar.workers.dev/docs/images/pe-editor-theme-save-var.png)