Swift Web Studio app iconSwift Web Studio app icon

Swift Web Studio

Design SwiftUI in the browser. Keep the Swift.

Visual editing, a Swift code editor and an interactive device preview in one workspace. Start with a template or your own Swift files, refine the design, and export a project for native development.

Open the live demo GitHub
Swift Web Studio

Most design tools draw pictures of apps. Swift Web Studio edits the app itself: every change on the canvas is a change to the Swift source, so the hand-off is the code.

Get the highlights.

  • Design with Swift. Edit text, color, spacing, layout and interactions on the canvas, and the Swift source changes with them.

    Swift Web Studio

  • Reusable designs. Components with inputs and saved variants, plus shared colors, spacing and text styles.

    Swift Web Studio

  • Real content. Edit collection records and their shared row design; try preview scenarios without changing the app’s data.

    Swift Web Studio

  • Review and present. Compare devices, appearance and text sizes, and check contrast, touch targets and overflow.

    Swift Web Studio

  • Into the code. A Swift editor with diagnostics, completion, symbol navigation and rename.

    Swift Web Studio

  • Hand it off. Export an Xcode project, a Swift Playgrounds app, a Swift package or an XcodeGen spec.

    Swift Web Studio

A designer’s tool that speaks Swift.

  • Source-preserving edits. Visual changes are made on the underlying Swift; anything the canvas can’t edit stays editable in code.

  • Components. Instance inputs, saved variants, and shared colors, spacing and text styles.

  • Collections. Records with a shared row design, and preview scenarios for trying content.

  • Device preview. An interactive preview across device sizes, appearances and text sizes.

  • Checks. Flags potential contrast, touch-target and overflow issues.

  • Present. Show screens, or export PNGs and contact sheets.

  • Shared undo. Organize screens and layers with undo and redo across both.

  • Images. Import PNG and JPEG, with optional dark variants.

  • Autosave and archives. Projects save in the browser; download an editable archive any time.

Under the hood.

The compiler, interpreter and layout packages are independent of React and the DOM. The preview runs in a Web Worker.

Editor
apps/webNext.js workspace, editor, dialogs and worker host
Language
swift-syntaxLexer, parser, syntax tree and source edits
swift-semaName resolution, semantic analysis and design edits
Runtime
swift-runtimeA Swift interpreter
swiftui-runtimeSwiftUI state, view composition and interactions
Rendering
swiftui-layoutLayout and text measurement
swiftui-render-domRender-tree presentation
Projects
project-modelProjects, files, templates, persistence and sharing
exporterProject scaffolding and ZIP import and export
shared · sim-shellShared types and device specifications

The preview interprets a supported subset of Swift and SwiftUI. It does not run Apple’s compiler or the iOS Simulator, so exported apps are built and reviewed in Xcode before release.

Six ways out.

Swift source is preserved in every format.

  • Xcode project

    A ready-to-open project for native development.

  • Swift Playgrounds app

    Open and run it on iPad or Mac.

  • Swift package

    Drop the views into an existing app.

  • XcodeGen spec

    Generate the project from a specification.

  • Editable archive

    A portable .swiftstudio.zip with source, images, settings and designer metadata.

  • Share link

    Image-free projects travel in the URL itself.

Tech specs

Stack
TypeScript; a Next.js workspace with independent language, runtime and layout packages
Preview
A Swift and SwiftUI interpreter in a Web Worker, covering a documented subset
Storage
Autosave in the browser (IndexedDB); editable .swiftstudio.zip archives
Export
Xcode project, Swift Playgrounds app, Swift package, XcodeGen specification
Prompts
Optional prompt-based creation, with your own provider key
Quality
CI with type checks, lint and unit tests; Playwright end-to-end tests; a bundle-size budget
Run it
Live demo, or locally with Node.js 22 and npm 11 · GitHub

More artifacts

NextAlmanacEvery day, as the ancients counted it.