Vanilla Roblox UI Designer
GitHub Log in Open editor
Overview Features Screenshots Share Gallery Download

Viewport

1280 × 720 · Luau export
Free · runs entirely in your browser

Design Roblox UI
right in your browser

Drag and drop your layout, edit properties the way you would in Studio, build tween animations on a real timeline, then export clean Luau. No downloads, no plugins.

Start designing Get the Android app

In the editor: G grab · Del delete · Ctrl+Z undo · Space play animation

Properties

9 items

Everything you need to ship UI

A full Studio-style workflow, from first frame to exported script.

Design workspace

A drag-and-drop canvas with resize handles, snapping, zoom and pan. Frames, text, image buttons, scrolling frames, Path2D and more.

Explorer and properties

A familiar object tree beside a properties panel for transform, appearance, text and gradients — edited live on the canvas.

Animation maker

Build tweens on a real timeline: draggable keyframes, easing curve previews, auto keyframe while you move objects, and scrubbing that matches runtime.

Path2D editor

Shape Path2D control points with bezier handles, adding and removing points directly on the canvas.

Script editor

Write LocalScripts and ModuleScripts with syntax highlighting and built-in StyLua formatting.

Export

Emit a Luau LocalScript, a JSON project, or a Rojo bundle. Copy to the clipboard in one click.

Adaptive quality

A short GPU probe picks a quality tier for the device, so heavier effects stay smooth on weaker hardware.

Works offline

Install it as an app and keep working without a connection. Projects are saved locally in IndexedDB, in English or Vietnamese.

Built for touch

Touch gestures, pinch to zoom and a landscape fullscreen layout, so phones and tablets are first-class.

Image editor

3 captures

See it in action

Screenshots taken straight from the editor.

Project menu — saved projects and templates
Project menu with saved projects and templates
Design workspace — canvas, grid and properties
Design workspace with the canvas, object tree and properties
Animation maker — easing, keyframes, timeline
Animation maker with a keyframe timeline

Outliner

Link · file · collab

Share a link, a file, or design together

Publish a one-click link from the editor, or hand over a project file when you would rather not sign in at all.

Share in one click

Hit Share in the editor to get a short link like vanillaui.cc.cd/share/… — paste it anywhere.

Live collab sync

While a project is shared, every edit autosaves to the link and remote changes pull in every few seconds — with a clear banner when someone else edited.

Share as a file

Save the project to a .vanilla.json file and open it anywhere. No account, no connection, nothing lost.

Try the demo project

GitHub sign-in

Log in with GitHub to publish share links, rate gallery projects and edit alongside teammates.

Preferences ▸ Install

Android · PWA

Install it, or just open the editor

The Android build is the same editor packaged for offline use. The web app installs as a PWA on every other platform.

Android APK

Signed debug build, published straight from CI.

Release
Version—
Size—
Published—
RequiresAndroid 7.0+
Packagecom.aistudio.robloxuidesigner
Android will warn about installing outside the Play Store. That is expected for a self-hosted build — allow it for your browser once, then install.
Download APK

Install on Android

Three steps, about a minute.

  1. Tap Download APK. Keep the file when the browser asks.
  2. Open it from the notification or your Downloads folder.
  3. Allow installs from your browser if prompted, then confirm.

Web app

Nothing to install, works on desktop and iOS.

Runtime
StorageIndexedDB, local
OfflineService worker
AccountOnly for sharing
Prefer no install? The editor runs in the browser and can be added to your home screen as a PWA.
Open editor