App-Symbol von Swift Web StudioApp-Symbol von Swift Web Studio

Swift Web Studio

SwiftUI im Browser gestalten. Swift behalten.

Visuelles Bearbeiten, ein Swift-Code-Editor und eine interaktive Gerätevorschau in einem Arbeitsbereich. Mit einer Vorlage oder eigenen Swift-Dateien beginnen, das Design verfeinern und ein Projekt für die native Entwicklung exportieren.

Live-Demo öffnen GitHub
Swift Web Studio

Die meisten Designtools zeichnen Bilder von Apps. Swift Web Studio bearbeitet die App selbst: Jede Änderung auf dem Canvas ist eine Änderung am Swift-Quellcode, und so ist die Übergabe der Code.

Die Highlights.

  • Mit Swift gestalten. Text, Farbe, Abstände, Layout und Interaktionen auf dem Canvas bearbeiten, und der Swift-Quellcode ändert sich mit.

    Swift Web Studio

  • Wiederverwendbare Designs. Komponenten mit Eingaben und gespeicherten Varianten, dazu gemeinsame Farben, Abstände und Textstile.

    Swift Web Studio

  • Echte Inhalte. Datensätze einer Collection und ihr gemeinsames Zeilendesign bearbeiten. Vorschauszenarien ausprobieren, ohne die Daten der App zu verändern.

    Swift Web Studio

  • Prüfen und präsentieren. Geräte, Erscheinungsbild und Textgrößen vergleichen sowie Kontrast, Touch-Ziele und Überlauf prüfen.

    Swift Web Studio

  • Ab in den Code. Ein Swift-Editor mit Diagnosen, Autovervollständigung, Symbolnavigation und Umbenennen.

    Swift Web Studio

  • Übergeben. Ein Xcode-Projekt, eine Swift Playgrounds-App, ein Swift-Paket oder eine XcodeGen-Spezifikation exportieren.

    Swift Web Studio

Ein Designtool, das Swift spricht.

  • Quellcode bleibt erhalten. Visuelle Änderungen werden direkt am zugrunde liegenden Swift vorgenommen. Was der Canvas nicht bearbeiten kann, bleibt im Code bearbeitbar.

  • Komponenten. Instanz-Eingaben, gespeicherte Varianten sowie gemeinsame Farben, Abstände und Textstile.

  • Collections. Datensätze mit gemeinsamem Zeilendesign und Vorschauszenarien zum Ausprobieren von Inhalten.

  • Gerätevorschau. Eine interaktive Vorschau über Gerätegrößen, Erscheinungsbilder und Textgrößen hinweg.

  • Prüfungen. Weist auf mögliche Probleme bei Kontrast, Touch-Zielen und Überlauf hin.

  • Präsentieren. Screens zeigen oder als PNGs und Kontaktbögen exportieren.

  • Gemeinsames Widerrufen. Screens und Ebenen organisieren, mit Widerrufen und Wiederholen für beides.

  • Bilder. PNG und JPEG importieren, optional mit Varianten für den Dark Mode.

  • Automatisches Sichern und Archive. Projekte werden im Browser gesichert. Ein bearbeitbares Archiv lässt sich jederzeit herunterladen.

Unter der Haube.

Die Pakete für Compiler, Interpreter und Layout sind unabhängig von React und dem DOM. Die Vorschau läuft in einem Web Worker.

Editor
apps/webNext.js-Arbeitsbereich, Editor, Dialoge und Worker-Host
Sprache
swift-syntaxLexer, Parser, Syntaxbaum und Quellcode-Änderungen
swift-semaNamensauflösung, semantische Analyse und Design-Änderungen
Laufzeit
swift-runtimeEin Swift-Interpreter
swiftui-runtimeSwiftUI-State, View-Komposition und Interaktionen
Rendering
swiftui-layoutLayout und Textvermessung
swiftui-render-domDarstellung des Render-Baums
Projekte
project-modelProjekte, Dateien, Vorlagen, Persistenz und Teilen
exporterProjektgerüst sowie Import und Export als ZIP
shared · sim-shellGemeinsame Typen und Gerätespezifikationen

Die Vorschau interpretiert eine unterstützte Teilmenge von Swift und SwiftUI. Sie nutzt weder den Compiler von Apple noch den iOS Simulator, daher werden exportierte Apps vor der Veröffentlichung in Xcode gebaut und geprüft.

Sechs Wege nach draußen.

Der Swift-Quellcode bleibt in jedem Format erhalten.

  • Xcode-Projekt

    Ein Projekt, das sich sofort für die native Entwicklung öffnen lässt.

  • Swift Playgrounds-App

    Auf dem iPad oder Mac öffnen und ausführen.

  • Swift-Paket

    Die Views in eine bestehende App einfügen.

  • XcodeGen-Spezifikation

    Das Projekt aus einer Spezifikation erzeugen.

  • Bearbeitbares Archiv

    Eine portable .swiftstudio.zip mit Quellcode, Bildern, Einstellungen und Designer-Metadaten.

  • Link teilen

    Projekte ohne Bilder reisen direkt in der URL mit.

Technische Daten

Stack
TypeScript; ein Next.js-Arbeitsbereich mit unabhängigen Paketen für Sprache, Laufzeit und Layout
Vorschau
Ein Swift- und SwiftUI-Interpreter in einem Web Worker, der eine dokumentierte Teilmenge abdeckt
Speicher
Automatisches Sichern im Browser (IndexedDB); bearbeitbare .swiftstudio.zip-Archive
Export
Xcode-Projekt, Swift Playgrounds-App, Swift-Paket, XcodeGen-Spezifikation
Prompts
Optionales Erstellen per Prompt, mit Ihrem eigenen Anbieterschlüssel
Qualität
CI mit Typprüfung, Linting und Unit-Tests; End-to-End-Tests mit Playwright; ein Budget für die Bundle-Größe
Ausführen
Live-Demo oder lokal mit Node.js 22 und npm 11 · GitHub

Weitere Tools

WeiterAlmanacJeder Tag, so wie ihn die Alten zählten.