Loyalty · Promotions · Gamification
Ship screens, not releases.
Your product team builds a screen in a visual editor and publishes it. The app shows the new screen right away — no build, no store review.
- No store release
- Your users’ data never passes through us
- SDKs for React, Flutter, iOS and Android
Live screen
Tap the screen — it’s live
What your code receives
Tap a button on the screen. Every action, analytics event and screen change arrives in your code — the document never runs anything by itself.
Not a picture: a published document, drawn by the same React SDK an app would ship.
How it works
Three steps, and none of them is a release.
Compose
A manager assembles the screen from 28 widgets on a phone-sized canvas, binds them to data your backend already returns, and sets when each part shows.
Publish
One button, for the people allowed to press it. The document is checked against the contract first; every publication is kept, compared with the draft and can be rolled back.
The app shows it
The reader inside your app draws the published document in your theme and your user’s language. Nothing is rebuilt, and nothing waits for a store.
Ways to run it
Where the editor runs, and where your screens live.
HotLayout has two parts: the editor, where your team builds and publishes screens, and a reader SDK inside your app that draws them. Here is where the editor runs.
Available now
HotLayout Cloud
You sign in to a workspace we host: an organisation, projects, roles, the editor, publishing and history. There is nothing to install.
Layouts, themes and media are stored in HotLayout Cloud.
With a pilot
The editor inside your admin
The same editor, embedded in your own back office as a web component. Sign-in, language and theme come from you, so your team never sees a second login.
<hotlayout-builder>Only the editor moves into your page. Layouts, themes and media are still stored in HotLayout Cloud.
Either way, your app can show screens without our cloud.
Turn on the webhook, and every publication is sent to your backend with a signature. Your app then gets screens from your own servers, together with your users’ data — and none of that data passes through HotLayout.
The editor
Built for the person who owns the screen.
Not a form over JSON. A canvas, a phone and the properties of whatever is selected — the screenshots below are the editor itself, with a rewards screen open.
Drag widgets onto the phone. Style comes from your theme tokens first; a custom value is one step away when a design needs it.
What a screen can do today
Enough to build the screen your designer drew.
28 widgets
Layout, text, images, lists, grids, tabs, carousels, progress bars and rings, an app bar and a bottom navigation bar.
Data from your backend
Bind text, images and conditions to fields you already return. One template draws a whole list from a collection.
Conditions and states
Show a block, or restyle it, when a task is locked, in progress or done — without duplicating the screen.
Themes and tokens
Light and dark themes, your own tokens, and a custom value where a token does not fit.
Languages and right-to-left
Translations and plural forms in the document; numbers, dates and currency in the user’s locale; a mirrored layout for right-to-left scripts.
Actions and navigation
Screens, modal layers, deep links and analytics events. What an action does stays in your code.
Forms
Text and number fields, switches, checkboxes and choice groups, with required fields and a button that waits for them.
History and rollback
Every publication is a snapshot. Compare it with the draft in plain words and bring any version back.
Roles and access
Owners, admins, publishers, editors and viewers in an organisation: editors prepare, publishers release.
For developers
One component in your app. The rest is data.
The reader takes a document, a theme and your data. Navigation, analytics and whatever a button does stay in your code — the document only says which action was asked for.
A contract, not a canvas
The editor and the readers follow one versioned JSON Schema. What the schema cannot say does not exist in the editor, so it cannot produce a document your app cannot draw.
Readers for web, Flutter, iOS and Android
The same document is drawn by a React package, a Flutter package and native readers for iOS (Swift, SwiftUI) and Android (Kotlin, Jetpack Compose), all checked against shared tables of cases. The React and Flutter packages are open under Apache 2.0: npm install @hotlayout/react and flutter pub add hotlayout_flutter. The native readers are available to customers on request.
Old apps, newer documents
Schema, theme and data dictionary are versioned separately. What an installed app does with a document newer than itself is decided by the compatibility policy, not by chance.
Documents are untrusted input
The reader never opens an address by itself, checks every value that becomes a style or an image source, and keeps a broken document from taking your app down.
Delivery through your backend
Each publication can be sent to your server as a signed webhook (HMAC-SHA256). Your app gets screens from you, together with the user’s data — nothing about your users passes through us.
import { HotlayoutScreen } from '@hotlayout/react'
import type { ThemeContract, UiDocument } from '@hotlayout/react'
export function Rewards({ layout, theme }: { layout: UiDocument; theme: ThemeContract }) {
return (
<HotlayoutScreen
document={layout} // the layout document, parsed JSON
theme={theme} // the project theme, parsed JSON; omit it to use the built-in one
data={{ 'user.firstName': 'Ada', 'user.points': 1250 }}
collections={{ items: [{ name: 'Coffee', price: 300 }] }}
locale="en"
style={{ minBlockSize: '100dvh' }}
onAction={(action, source) => {
console.log('the user asked for', action.type, action.params, 'on', source.nodeId)
}}
/>
)
}
POST /your-webhook
x-webhook-event: document.published
x-webhook-delivery: <documentId>/<stamp>
x-webhook-signature: t=<seconds>,v1=<hex>
{
"event": "document.published",
"documentId": "autumn-rewards",
"document": { … },
"dataContract": { … }
}
Where teams use it
Screens that change more often than the app does.
Gamification
Quests, rewards, levels and streaks — the case HotLayout was first built for.
Promotions and offers
A campaign screen that starts on the day marketing planned, and ends when it ends.
Surveys and forms
Questions, choices and inputs that write back to your app, changed without a build.
Onboarding
Steps you can rewrite, reorder and translate while the same app version is in users’ hands.
What it does not do
Honest limits.
It does not ship code.
A document describes layout, content, conditions and named actions. Logic stays in your app.
It does not fetch your data.
The reader takes data from your app and never calls your backend by itself.
It does not describe animation.
The contract says what to show; how it appears is the reader’s business.
Pricing
One price per app. No per-user fees.
A licence is counted by the apps that read your screens, not by the people who use them. The price depends on where the editor runs: in our cloud, inside your own admin, or on your own servers.
Pilot
€2,500
one-off, 8 weeks
A real integration into your app. On day one we write down the one sentence that means success — for example, “the promo screen is in production, and marketing changes it without a release”.
- 1 app, up to 3 screens in production
- Up to 30 hours of our work on the integration
- Credited in full if you take a licence within 30 days
Cloud
€4,800
per year for one app
The editor in HotLayout Cloud. Your team builds, publishes and rolls back the screens of one app — however many people use that app.
- Up to 10 people in the editor
- No limit on screens, publications or audience
- Roles, version history and rollback
- Delivery from our storage or by signed webhook
- SDKs for React, Flutter, iOS and Android
Embedded
€9,600
per year for one app, after a pilot
The same editor inside your own admin, with your sign-in, language and theme. Layouts are still stored in HotLayout Cloud.
- Everything in Cloud
- Up to 25 people in the editor
- The editor opens only on your domains
- 16 hours of our work on embedding and training
Want to try it yourself first? Ask for access, and we will open a workspace for 14 days: your team gets the admin and the editor and can build and preview screens on its own.
Prices are per year, in euros, excluding VAT. Each further app of the same company is 30% less. People who only view and approve screens are not counted. Published screens keep working even if a licence ends: you pay for the ability to change them.
FAQ
Frequently asked questions.
Short answers about data, availability, security and control.
Does our customers’ data pass through HotLayout?
No. A screen document names data paths such as user.firstName; the values travel from your own backend to your own app at the moment the screen is shown. HotLayout stores layouts, themes, media and the data dictionary, which is a description of fields. One caveat: the dictionary holds sample values that your team types in for the preview, so use made-up ones.
What happens to our app if HotLayout is unavailable?
Your app does not have to ask us for anything when it shows a screen. With the webhook, every published document is sent to your backend and served from your own infrastructure. The readers expect a bad day too: the Flutter reader draws a copy bundled with the app when the network gives nothing usable, and the React loading example keeps the screen it already has. While HotLayout is down you cannot publish a change; what is already published keeps working. The direct address, meant for prototypes and small apps, is the exception: it reads from our storage.
Can a layout run arbitrary code in our app?
No. A document is data: a closed vocabulary of widgets and named actions, checked against a JSON Schema — not a script. The reader treats the document and the theme as untrusted input: every value is checked by its form before it becomes a style or an image address. It never opens a link by itself; addresses and deep links are handed to your code, which decides what is allowed.
What happens to older versions of our app when a layout is updated?
Every document carries the version of the contract it was made for. Within one major version an older app draws a newer document: a minor version only adds optional things, and what a reader does with anything it does not know is written down in the compatibility policy. A document of another major version is not drawn at all — the Flutter reader falls back to the copy bundled with the app — so a breaking change does not reach an app that cannot read it.
How do we know a published document really comes from you?
Every webhook request is signed with HMAC-SHA256 using the secret of your project. The secret is shown once, when the webhook is turned on, and cannot be read back afterwards. Your backend checks the signature over the timestamp and the raw body before it accepts a document.
What about languages, right-to-left scripts and accessibility?
Translations and plural forms live in the document; numbers and dates follow the user’s locale, and the layout mirrors for right-to-left scripts. The web reader draws real buttons, inputs, tabs and dialogs, with keyboard support, a visible focus ring and ARIA roles, and the editor does not publish a button without an accessible name. Colour contrast depends on your theme, and alternative texts on whoever builds the screen.
Can we run HotLayout in our own infrastructure?
On request. For banks with security and procurement requirements we set HotLayout up inside your own infrastructure: the editor runs in your network and keeps documents on your own servers, with no request to HotLayout or Google. Write to us, and we will go through what your team needs.
How much does it cost?
A licence for one app is €4,800 per year with the editor in our cloud, or €9,600 with the editor inside your own admin — however many people use the app. We start with an 8-week paid pilot for €2,500: it includes integrating the SDK into your app together with us and is credited in full if you take a licence within 30 days. Each further app of the same company is 30% less.
See it on your own screen.
Tell us which screen you keep releasing for. We will show how it is built in HotLayout and what the integration takes in your app.