01
Edit
Pick a preset or set each colour, the corner radius, and light or dark mode. Change text your views already show, and switch feature flags on or off.
Try it in your browser
Live
Change your app. Skip the store.
Mobile Studio is a page on your own web app. Change the theme, text, and feature flags of an Android or iOS app that people already have installed, check every screen at a real phone width, and publish in one click.
No store review
Live phone preview
Theme, text, and flags
Works offline
One 204 when nothing changed
Validated before saving
How it works
Edit. Preview. Publish.
Three steps, all in the browser, all on your own server.
01
02
Preview
Every screen renders at a real phone width as you type. Links inside the preview switch screens, and fields with a problem are flagged before you can publish.
03
Publish
One click, or Ctrl+S. Installed apps pick up the new settings the next time they launch or come back to the foreground.
Playground
Try the studio right here.
Change anything on the left and the phone follows. Tap the tabs inside the phone, then publish and watch three installed apps pick it up.
Preset
#7c3aed
12px
Feature flags
Phone width
9:41
● ● ●
Good morning, Sam
Welcome back
Your orders, at a glance.
Orders this month
12
Today only
20% off
Continue
Offers
Today only
20% off
Free delivery
£30+
Bring a friend
£5
No offers right now.
Sam Rivera
Notifications
On
Saved addresses
2
Payment
•••• 4242
Small, medium, and large match common phone widths.
Android phone
UI v12
iPhone
UI v12
Phone on a plane
UI v12 · offline
- Ready. Publishing sends the settings to every installed app.
What travels
Settings, not screens.
Your compiled views stay inside the app. Only the theme, text, and flags travel, so an update is tiny and a check costs almost nothing.
- Apps check at launch and when they return to the foreground.
- Nothing new is a single 204 response.
- The last published UI stays on the device for offline use.
- A fresh install with no network uses the defaults built into the app.
POST /api/mobile//preview # compile, never save
GET /api/mobile//ui # what devices download
PUT /api/mobile//settings # publish
What you control
Everything a release usually waits for.
Theme
Primary, accent, background, surface, text, muted, and border colours, corner radius, and light or dark mode. Presets give you a starting palette.
theme.primary = #7c3aed
Text and content
Any value your views read from render data—a headline, a banner, a support email—edited in place.
h1 headline
Feature flags
Switch a feature on for everyone at once. Flags reach views, scripts, and native builds.
Noderyx.flags.offers
Real phone widths
Preview small, medium, and large screens side by side with what you publish, so nothing surprises you on a real device.
small · medium · large
Validated
Colours must be hex, rgb(), or hsl(), and text must be plain values. A typo cannot break installed apps.
rgb(124 58 237)
Your storage
Settings are saved under storage/mobile-ui/ by default, or in your own database with a get and set pair.
store: { get, set }
Set it up
Five lines in server.js.
Register the mobile UI routes and the studio appears at /mobile-studio on your web app. Without an authorize function it is read-only, so nobody can publish by accident.
- Reading the UI is public, because installed apps have no session.
- bearerToken checks a shared secret of 16 or more characters.
- Or pass any function, such as an admin check on the session.
- Turn it off for one app with remoteUi: false.
import { bearerToken, registerMobileUi } from 'noderyx-framework';
registerMobileUi(app, config, {
authorize: process.env.MOBILE_STUDIO_TOKEN
? bearerToken(process.env.MOBILE_STUDIO_TOKEN)
: null
});
// Or: authorize: ({ session }) => session.role === 'admin'
Questions
Good to know.
Not for theme, text, or flag changes—those are settings the app downloads. New screens or new native code still need a normal build and store release.
It keeps the last UI it downloaded and checks again the next time it launches or comes back to the foreground.
No. Reading the UI is public, but publishing calls your authorize function. Without one, the studio is read-only.
Under storage/mobile-ui/ by default. Pass store with get and set to keep them in your database—useful when the web app runs on more than one server.
Yes. Packaged apps read flags as Noderyx.flags in scripts, and native builds read them from native.flags.
Ship the change today, not next week.
Add Mobile Studio to a Noderyx app with packaged mobile builds, and the next colour, headline, or flag is a publish away.
1. Edit
2. Preview
3. Publish