HotLayout

HotLayout is a visual editor for server-driven UI. A product team builds an app screen in the editor and publishes it; the app shows the new screen the next time it loads — no build, no store review, no release.

_{Two apps built in the same editor. Both are published documents drawn by an SDK — try them live at hotlayout.com.}

▶ Watch the product overview — the whole flow in under two minutes.

1. Build. Screens are assembled from widgets in a visual editor: layout, text, lists from data, forms, navigation, translations, a theme with your brand tokens.
2. Publish. The screen becomes a JSON document. It is delivered from our storage or by a signed webhook to your own backend.
3. Render. Your app draws the document natively with an open-source SDK. Every tap arrives in your code, and your users' data never passes through us.

Platform	Package	Source
React (web, Next.js)	@hotlayout/react	hotlayout-react
Flutter (iOS, Android)	hotlayout_flutter	hotlayout-flutter
iOS (SwiftUI)	HotLayout via Swift Package Manager	hotlayout-ios
Android (Kotlin, Jetpack Compose)	com.hotlayout:hotlayout-android	hotlayout-android

All four SDKs are open source under Apache 2.0 and read the same document: one screen, built once, drawn natively on the web, in Flutter, on iOS and on Android. The contract they implement — the schemas, sample documents and the shared case tables every SDK must pass — is open too: hotlayout/contract.

import { HotlayoutScreen } from '@hotlayout/react'

<HotlayoutScreen
  document={layout} // the layout document, parsed JSON
  theme={theme} // the project theme, parsed JSON
  data={{ 'user.firstName': 'Ada', 'user.points': 1250 }}
  locale="en"
  onAction={(action, source) => {
    console.log('the user asked for', action.type, action.params, 'on', source.nodeId)
  }}
/>

• Website — hotlayout.com
• Video — product overview and more on the YouTube channel
• Documentation — hotlayout.com/docs: integration guides for developers and a user guide for the editor
• Contact — [email protected]