Preview flows

You have two ways to preview your flow on different screen types:

Preview on devices: Check how your flow looks on real devices at any stage of development.
Preview in the Adapty dashboard: Preview your flow while designing it.

Preview on devices

To preview your flow on a real device:

Download the Adapty mobile app for iOS or Android.
In the flow builder, click Test on device.

Test on device button in the flow builder

Select the flow locale.
Scan the QR code with the device camera or open the link. This opens your flow in the Adapty mobile app.

Note

In the test mode, Adapty can’t access your products in stores, so the prices displayed in the flow are not real.

Locale selector and QR code in the Test on device dialog

Troubleshooting

If the flow won’t open in the preview, an incomplete action, an empty screen, or an unattached product is the usual cause. See Common issues for the full list.

Preview in the Adapty dashboard

Tip

To make sure your flow is ready to publish, preview it on a real device and confirm it renders without errors.

You can preview your flow on different screen types using the preview area in the flow builder. This helps ensure your flow looks great across various devices and screen sizes.

Using the preview controls below the preview, you can:

Select the device to preview your flow on.
Switch between horizontal and vertical preview modes.
Switch between light and dark modes.
Switch between locales.

Tip

Always preview different locales, because different languages might have different word length, and the screen layout might look differently for them.
To preview custom variables, set initial values for them. For example, if you add a name variable, you can set the initial value to Jane Doe to preview it.

Preview products and offers

The preview reads product variables from your Adapty catalog, which covers only part of what a device resolves:

prod_title shows the product title as it’s stored in Adapty. prod_price and the prod_price_per_* variables show the price stored in Adapty, in US dollars — users see the localized store price instead.
offer_price, offer_billing_period, and offer_full_duration stay unresolved, so the preview shows the variable name in braces — for example, {{products.selectedProduct.offer_price}}. These values reach the flow when the SDK renders it in your app.
is_free_trial, is_pay_up_front, and is_pay_as_you_go follow the offer selected on the product card. With no offer, all three are false. With an offer, the preview treats it as pay-as-you-go.

Conditions on the offer type therefore switch in the preview, but only the pay-as-you-go branch appears by default. To see the other branches, simulate the payment mode:

On the canvas, select the product card that has the offer.
In the right panel, under Product, open the offer dropdown.
Under Preview as, select Free trial, Pay up front, or Pay as you go.

Every condition on those three variables re-renders in the selected mode for that card. Preview as applies to one product card at a time, changes nothing in the flow you publish, and resets when you change the card’s offer.