DRAFT: Your UI on a Real Device, as You Type

Slint's live preview reloads your UI the moment you save a .slint file. On the desktop that already shrinks the edit-and-look loop to nothing. But the desktop is not where many UIs end up.

A phone has a different screen size, a different pixel density, a different set of system fonts, and a touch screen instead of a mouse. An emulator gets some of that right and lies about the rest. The only way to know how a layout really feels under your thumb is to put it on the actual hardware, and until now that meant building and deploying an app just to look at a screen.

Slint 1.17 adds a remote viewer that closes the gap. You run a small viewer app on the device, keep editing on your computer, and the design shows up on the phone in your hand, reloading as you type.

The remote viewer running on a phone, waiting for the editor to connect and showing the address to enter.

How It Works

The remote viewer is the regular slint-viewer started with a new flag:

slint-viewer --remote

Instead of loading a file, it waits. It shows an idle screen with the device's name and an address, and advertises itself on the local network so editors can find it.

On your computer you open the live preview of a .slint file the way you normally would, in VS Code or another editor with the Slint extension. Pick Remote from the combobox in the top-right corner of the preview, choose the device, and that's it.

From then on the editor compiles the .slint file and streams the result to the device, which renders it with the same Slint runtime your shipped app would use. What you see on the phone is the real thing, not a mock-up: real fonts, real density, real touch targets. Edit, save, and the device updates. Any debug() output from the running UI travels back to your editor.

Discovery happens over mDNS, the same zero-configuration mechanism behind AirPlay and network printers, so a device on the same Wi-Fi just appears in the list. If it doesn't, you can type the host:port the viewer shows by hand. The connection survives the app being backgrounded and reconnects on its own, so you can put the phone down and pick it back up without re-pairing.

What It's Good For

The obvious use is checking that a layout works on a real screen before you commit to it. A button that looks comfortable on a 27-inch monitor can be a cramped tap target at phone density, and a column that fits on the desktop can overflow on a narrower display. Seeing it on the device is faster than reasoning about it.

It also helps when the device is not a phone you own. Hand the tablet to a designer or a customer, keep the keyboard, and iterate on the UI live while they watch and react. Because the device only needs the viewer app and a network connection, anyone can hold the "screen" while you drive.

The viewer isn't tied to one platform either. It previews on Android and iOS today, and the same --remote mode works desktop-to-desktop, so you can drive one machine's preview from another.

See the remote viewer documentation for the full set of options.

The Viewer Is a Slint App

The mobile viewer is not a special build with a native shell around it. It's the slint-viewer itself, compiled for the phone, with its entire UI, the idle screen, the device name, the address, written in Slint.

The interface is deliberately small, but it's a real mobile application built end to end with Slint, on the app stores, doing actual work over the network. Slint runs on phones, and the viewer is the proof you can install.

You can get it here:

• iOS through TestFlight while the App Store review is underway.
• Android on Google Play, or as a direct APK.
• Android on F-Droid, built from source.

If you want to build a mobile app of your own with Slint, start with the Android and iOS guides. And if you just want to see your current design on a real device, install the viewer, run --remote, and pick it from the list.