Building apps

Romit apps are reactive UIs in the SwiftUI style that look native on both iPhone and Android: you describe what the screen shows for the current data, and Romit redraws it whenever the data changes. One .rmt file compiles to one self-contained index.html that runs in any browser, with no build tools, frameworks, or node_modules.

use ui

app Counter
  state
    count is 0

  screen Home
    column center gap 20
      text "{count}" size 72 bold
      row
        button "−" do count -= 1
        button "+" do count += 1
          style prominent

romit run counter.rmt      # live preview at http://127.0.0.1:3847 (refresh after edits)
romit build counter.rmt    # writes dist/index.html
romit check counter.rmt    # errors only, no output

The playground previews apps in the browser too.

The shape of an app

Indent children two spaces. Anything after # or note is a comment.

State

state
  name is ""
  count is 0
  dark is false
  todos is list saved
    title "Try Romit", done true
    title "Build an app", done false

• saved keeps a value on the device between visits (like @AppStorage).
• list starts a list. Indented lines add items. A line like title "x", done false is a record with named fields.
• Names can’t be modifier words (size, color, …). The checker suggests alternatives, such as selectedSize.

Computed values

computed
  left is count of todos where not done
  greeting is "Hello, {name}!"

Computed values update automatically and can’t be assigned (U112).

Showing things

Write an element name, then its content, then any modifiers, all on one line or on indented lines:

text "Welcome back, {name}" bold color secondary
text "Total"
  size 24
  color red if total is below 0

{…} inside text inserts a value; it can hold any expression: "{count of todos} left", "{price as money}".

Layout

Content

Controls

Controls change state through bind (SwiftUI’s $binding):

bind also reaches into records: toggle bind todo.done.

Choices and enums

enum Size small, medium, large

state
  pick is medium

screen Order
  picker "Size" bind pick options Size
  match pick
    small
      text "A little one"
    otherwise
      text "Good choice"

Splitting an app into files

use "components.rmt" at the top pulls in another file’s views, actions, screens and state. Paths are relative to the file.

Showing things conditionally and in loops

if todos is empty
  empty "Nothing to do" icon "checkmark.circle"
otherwise
  list
    for each todo in todos where not done
      TodoRow todo

for each n in 1 to 5 counts. Inside a loop, index is the position (starting at 1).

Modifiers

Modifiers go after the content or on indented lines. Add if <condition> (or unless) to any modifier.

Colors: red orange yellow green mint teal cyan blue indigo purple pink brown gray black white clear, plus primary secondary accent danger success warning, or any "#hex".

Events and actions

button "Add" do add draft to names           # one action
button "Reset"
  on tap                                     # several actions
    count = 0
    toast "Reset"
text "Hold me"
  on long press do vibrate

Events: on tap, on double tap, on long press, on hover, on submit (fields, forms), on change (controls), on delete (list rows), on appear / on disappear (screens), on change of x (screens and the app), every 2 seconds, on start, on background, on foreground, on url (app).

Actions:

Screens and navigation

screen Home "My Notes" subtitle "{count of notes} notes" tab "house"
  toolbar
    button "New" icon "plus" do show Compose
  ...

screen Detail with note titled note.title
  text note.body

screen Compose "New note" inline
  ...

• The first screen is the home screen.
• go to Detail with note pushes a screen with a back button. go back and go home return.
• Screens with tab "icon" form a tab bar (TabView).
• subtitle … adds a line under the title (navigationSubtitle). inline keeps the title small (.navigationBarTitleDisplayMode(.inline)).
• Every screen has an address. The browser’s back and forward buttons work, and a link such as app.html#/Detail~… opens that screen directly (NavigationPath, deep links).

Toolbars

screen Editor
  toolbar                     # trailing (right), the default
    button "Done" do close
  toolbar leading
    button "Cancel" do go back
  toolbar title               # replaces the title (principal)
    picker bind mode options "Edit", "Preview"
  toolbar bottom              # bottom bar
    button "Share" icon "square.and.arrow.up" do share text

Split view (sidebar)

A sidebar block turns a screen into a NavigationSplitView. On wide screens the sidebar sits on the left and links in it fill the detail column. On phones the sidebar is the first page and links push, as on an iPhone.

screen Mailboxes "Mail"
  sidebar
    list
      for each f in folders
        link f to Folder with f
  empty "Pick a mailbox" icon "envelope"      # shown until something is picked

screen Folder with box titled box
  ...

The screen’s toolbars move onto the sidebar in split view.

Sheets, covers, popovers, inspectors

Settings

Add settings to a screen line (screen Prefs "Settings" settings). Romit puts a ⚙ button on the home screen and opens it with ⌘, or Ctrl+, like SwiftUI’s Settings scene.

Windows

open window Message with m opens a screen in a new browser tab or window (openWindow). Values passed with with are linked back to your saved lists, so edits made in either window go to the same item.

Search suggestions and scopes

search "Search mail" bind query suggest "Ada", "Grace" scopes "All", "Starred" scope scope

suggest lists completions (searchSuggestions), and scopes with scope adds a scope bar (searchScopes).

App lifecycle and links

on start                      # once, when the app opens
on background                 # the tab or app was hidden (scenePhase .background)
  lastSeen = now
on foreground                 # back again (scenePhase .active)
  toast "Welcome back"
on url                        # opened with a link the app doesn't route itself (onOpenURL)
  say url

on background and on foreground also work on a single screen.

Files and documents

document notes, title named "Notes.json"      # DocumentGroup: File ▸ New / Open… / Save, ⌘O, ⌘S

button "Import" do open file into notes as json        # fileImporter (text, json, image)
button "Export" do save notes to file "notes.json"     # fileExporter
button "Save" do save document                          # also: open document, new document

document names the state values that make up a document. The home screen gets a File menu, and new document resets those values to their starting state.

Reusable views

view TodoRow with todo
  row
    toggle bind todo.done
      style checkbox
    text todo.title
      strike if todo.done

screen Home
  for each t in todos
    TodoRow t

Expressions

Looks native on iPhone and Android

The same .rmt file looks at home on every device. You don’t change your code:

To pick one look for every device:

theme
  look material        # or: apple, auto (the default)

To preview the other look, add ?look=material or ?look=apple to the app’s address, or use the Look menu in the playground. style fab turns a button into a floating action button (round on Apple, rounded-square on Material).

Theme

theme
  accent purple
  corner 16
  font "Inter"
  dark when darkMode       # or: appearance dark / light / auto

Settings: look accent background surface text muted separator danger success warning corner spacing font titlefont width appearance dark.

Errors

Every mistake gets a code, the line, and a hint. Misspellings get “did you mean”:

error[U101]: unknown name `cuont`; did you mean `count`?
  --> todo.rmt:9:5
   = help: add it to `state` (e.g. `cuont is 0`), or check the spelling

See Error codes for the full list, and SwiftUI → Romit for a side-by-side map.

Examples

• examples/apps/counter.rmt: state, buttons, conditional modifiers
• examples/apps/todos.rmt: saved lists, computed values, navigation, confirmation
• examples/apps/notes.rmt: search, sorting, menus, sheets, dates
• examples/apps/mail.rmt: split view, toolbars, every sheet style, popover, inspector, settings, windows, deep links, files, documents, scene phase
• examples/apps/showcase.rmt: tabs, forms, every control, grids, timers, dark mode