HotLayout user guide
This guide is for the people who build screens in HotLayout: product managers, designers and content editors. You assemble a screen from widgets, connect it to data, look at it on a device and publish it — the app shows the new screen without a release. No programming is needed.
If you are a developer who connects an app or a backend to HotLayout, read the Integration section of these docs instead.
New to HotLayout? Watch the product overview — the whole flow in under two minutes, from an edit in the editor to a new screen in the app.
Ready to try it? Your first screen in 3 minutes — build a screen and publish it, step by step.
Videos#
- Your first screen in 3 minutes (3 min) — build and publish a screen, no code.
- Build a coffee-shop rewards screen without code (3 min) — a complete rewards screen from an empty document.
- Layout: columns, rows, stacks and pinned parts (3 min)
- Data on a screen (4 min)
- What is server-driven UI? Explained in two minutes (2 min)
How HotLayout is organised#
| Level | What it is |
|---|---|
| Organization | Your team. Members, roles and the licence belong to it. |
| Project | One app. It holds the documents, the theme, the data dictionary and the media library. |
| Document | A screen, or a flow of screens, that the app shows. You edit a draft and publish it. |
| Screen | One page of a document, built from widgets. |
You work in two places: the admin, where you manage organizations, projects, documents and people, and the editor, which opens when you open a document.
Where to start#
- Getting started — create an account, a workspace and the first document.
- The editor at a glance — what is where.
- Building a screen — widgets, containers, the app bar and the bottom of the screen.
- Publishing — how a screen reaches your apps.
All topics#
- Style and the theme — how screens look.
- Data — values that come from your backend.
- Actions and navigation — what a press does, screens and forms.
- Languages — translations and right-to-left scripts.
- Screen widths — one document for phone, tablet and desktop.
- Preview and prototype — checking a screen before it is published.
- Media library — images of the project.
- Team and roles, project settings, trial and licence.
- Troubleshooting — what a message means and what to do.