Dev

Dev is where most building happens. It opens with columns for the iOS (native) preview, the Web preview, the Editor, and Media, the manager for images, fonts, and your splash screen. Both previews render the same project from the same in-browser dev stack, and both follow whichever branch you are on, so they stay in sync with each other and with your work.

#The editor

The editor is CodeMirror 6 backed by a real TypeScript language service, with type-aware completion, hover, and go-to-definition across the whole project. It is scoped to the active branch, so its open files and unsaved changes travel with that branch.

⌘S saves the file you are in, and the editor pane’s header offers Save all files when there are unsaved edits. The rest of the project’s runtime controls live in the Project menu on the left bar:

• Run holds Generate and Migrate for data changes, plus Restart to dispose and reboot the in-browser dev stack.
• Commit writes a snapshot you can restore to later, and Commits lists the ones you have taken.

#Web preview

The web preview renders your app in a browser iframe. It hot-reloads as you type. For source files the bundler rebuilds from your current editor content, debounced, rather than waiting for a save, so a change shows up almost immediately.

#Native preview

The native preview renders the iOS build through rnx, Contrast’s clean-room React Native simulator running inside the browser. You see real native layout and gesture behavior rather than a responsive-web approximation.

Native output is drawn to a single canvas, not DOM nodes. To inspect it, use the Elements DevTools pane or an agent’s app tools. Regular browser DOM queries will not find anything inside it.

The native preview only appears when the project targets iOS. A web-only project like the Website template shows a placeholder pointing you to Project Settings → Runtimes instead of a broken pane. It also waits for the app to render real, visible content before it reports ready, so a blank root or an auth redirect does not count.

#Preview controls

Both preview panes carry a header Reload control. The web pane’s overflow menu adds:

• Appearance: Light, Dark, or System.
• Clear storage: All, LocalStorage, SessionStorage, IndexedDB, or Caches.

The native pane mirrors rnx’s own Window, Device, and Debug menus. Window covers appearance, chrome, and scale controls. Device covers simulator actions and device switching. Debug covers rnx diagnostics and storage clears.

If the native preview stops updating after it has rendered, a watchdog surfaces a preview stopped responding warning; press Reload to bring it back.

#DevTools

A stack of inspectors lives in the top bar for diagnosing what the previews are actually doing. Press ⌘⇧\ to float it over the bottom of the viewport, or drag a pane out to dock it as its own column.

• Signals is the runtime-signal feed, including console output from the preview iframes. Console output shows up here, not inside the preview frame.
• Logs streams structured logs from the dev-stack workers, split into all, zero, and db tabs and filterable by level.
• SQLite is the project database inspector: Browse reads tables, Query runs read-only SELECT, WITH, and EXPLAIN statements, and Search looks across text columns. It is an inspector rather than a shell terminal; Contrast has no terminal pane.
• React, Network, Elements, and Arch give you React DevTools, captured fetch and XHR traffic, an element inspector that covers the native canvas, and a live view of the running architecture.

#Shared state

Both previews share what should be shared, including auth, storage, and deep links, so a flow you exercise in one is generally true in the other. The execution-context architecture behind the native surface is documented in the rnx docs.