UI Design Editor is an interface design tool that opens inside this page. It is built for screens rather than print: you draw frames the size of a phone or a browser window, fill them with rectangles, text and vectors, let auto layout space the elements as their content changes, turn repeated pieces into components, and wire the frames together into a prototype you can click through. Styles and variables keep colours, type and spacing consistent across a whole file, and a dev view shows the measurements and code a developer needs.
Nothing you design leaves your computer unless you choose to share it. The tool runs in your browser tab, the file stays in memory until you save it, and this site only serves the program's files. The first visit downloads about 9 MB, which the browser then caches, so later visits start in a moment.
What this UI design editor can do
The layout will feel familiar if you have used a modern design tool: pages and layers on the left, the canvas in the middle, a Design and a Prototype tab on the right, and a floating toolbar at the bottom with the move, frame, shape, pen, text, comment and component tools. Frames come in device presets and can carry layout grids and constraints. Auto layout works horizontally, vertically, wrapping and in a grid, with padding, gaps, alignment and hug, fill or fixed sizing, so a button grows with its label and a list reflows when an item is added. Main components, instances with overrides, component sets with variants and swappable properties live in an Assets panel with searchable thumbnails.
Shapes take solid, gradient and image fills, several strokes, shadows, blurs, noise and glass effects, masks and blend modes. The pen draws real vector networks with boolean union, subtract, intersect and exclude that stay editable, and text is set in place with mixed styles, OpenType features and right-to-left scripts. On the Prototype tab, frames are linked with triggers, transitions and flows and presented in a device frame. The Inspect side measures distances and generates CSS, HTML, React, SwiftUI and Compose code from the selection, and comment threads and a named version history help when more than one person works on a file. Files are saved in the editor's own format; SVG and images open as layers, and any frame or layer exports to PNG, JPG, WebP, SVG or PDF at the scale you choose.
When to use an online UI design editor
Mock up an app or a landing page
Start from the mobile app, landing page or dashboard template, replace the content, and export the screens as PNG for a pitch or as a clickable prototype to walk a client through the flow. There is nothing to install and no seat to pay for.
Build a small design system
Define colour and text styles, create button, input and card components with variants, and bind colours to variables with a light and a dark mode. Every instance across the file updates when the component changes.
Hand a design to a developer
Mark a frame ready for development, add annotations, and let the developer read sizes, spacing and generated code from the Inspect panel, with assets exported at 1x, 2x and 3x. Both of you can open the same file in a browser.
How the editor runs in your browser
The whole program is compiled to WebAssembly and shown in a frame served from this site, with no outside host involved. The canvas is rasterised on the processor and the interface is drawn with WebGPU or, where that is missing, WebGL2, which is why a desktop browser is required: current Chrome, Edge, Firefox and Safari on a laptop or desktop all qualify. A persistent document model means that edits touch only what changed, so even a file with thousands of layers stays responsive.
Opening a file uses the browser's file picker, and Save and Export are ordinary downloads to your Downloads folder. The one feature that talks to a server is sharing a live session, which uploads the file to a collaboration server so that others can join with a code; it is off until you press Share, and the FAQ below explains what it sends. The build is updated with the rest of the site, so a new version arrives only after it has passed the same checks as every other tool.
Come usare questo strumento
- Let the editor load. The first visit downloads about 9 MB; afterwards it starts from the browser cache.
- Press F and drag a frame, or pick a device size; or start from a template on the home screen. Click into the editor once so keyboard shortcuts reach it.
- Add shapes, text and vectors, press Shift+A for auto layout, make components with Ctrl+Alt+K, and link frames on the Prototype tab to make the flow clickable.
- Save the file with Ctrl+S, or select frames and export them as PNG, JPG, WebP, SVG or PDF with Ctrl+Shift+E. The files land in your Downloads folder.
Limitations
- A desktop browser with WebGL2 or WebGPU is required. Phones show a notice instead of the editor; tablets can open it, but the tools expect a mouse or a trackpad.
- The first load is about 9 MB, so a slow connection takes a moment the first time. Later visits use the browser cache.
- This is a capable editor for everyday work, not a complete replacement for desktop or cloud design tools: files from other design programs open on a best-effort basis, plugins from other tools do not run, and some advanced features are still partial.
- Only the fonts bundled with the editor are available for text, because the browser cannot read the fonts installed on your computer.
- Sharing a live session sends the file to a collaboration server that is not run by this site. Keep private work local: everything except Share stays on your device.
- There is no autosave. Save or export before closing or reloading the page, because the file lives only in the tab's memory.