SwiftUI-Playground

Code-Snippets schreiben, ausführen und teilen - keine Einrichtung nötig.

ContentView.swift

VorschauAutomatische Vorschau

import SwiftUI

struct TodoItem: Identifiable {
    let id = UUID()
    var title: String
    var done = false
}

struct ContentView: View {
    @State private var items = [
        TodoItem(title: "Run SwiftUI in the browser", done: true),
        TodoItem(title: "Tap a task to check it off"),
        TodoItem(title: "Add a task of your own"),
    ]
    @State private var newTitle = ""

    var remaining: Int {
        items.filter { !$0.done }.count
    }

    var body: some View {
        NavigationStack {
            List {
                Section("\(remaining) left to do") {
                    ForEach($items) { $item in
                        Toggle(item.title, isOn: $item.done)
                    }
                }
                Section {
                    HStack {
                        TextField("New task", text: $newTitle)
                        Button("Add") {
                            items.append(TodoItem(title: newTitle))
                            newTitle = ""
                        }
                        .disabled(newTitle.isEmpty)
                    }
                }
            }
            .navigationTitle("My Tasks")
        }
    }
}

SwiftUI online ausführen und die App auf einem iPhone sehen

Ein kostenloser Online-Playground für SwiftUI. Schreib eine ContentView, und deine Views erscheinen neben dem Code auf einem Bildschirm in iPhone-Größe. Buttons, Schalter und Textfelder reagieren auf Tippen, sodass Änderungen an @State wie auf einem Gerät sichtbar werden. Kein Mac, kein Xcode, kein Simulator zum Herunterladen.

Dein Code wird mit swiftc gegen Coddys eigene SwiftUI-Implementierung kompiliert, dieselbe, die die Live-Vorschau in Coddys SwiftUI-Lektionen antreibt. Sie deckt die alltägliche API ab: Stacks, Text, Image(systemName:), Button, Toggle, TextField, Slider, Stepper, Picker, List, ForEach, Form, NavigationStack, Sheets und Alerts, mit @State, @Binding, ObservableObject und @Published. Es ist nicht Apples Framework, daher sind reine Apple-Frameworks wie UIKit, MapKit und Core Data nicht verfügbar.

Was diesen SwiftUI-Playground nützlich macht

Eine Live-Vorschau auf dem iPhone: Der Bildschirm wird in iPhone-Größe in einem Gerätrahmen gezeichnet, mit Statusleiste und Dynamic Island, damit ein Layout so aussieht wie auf einem Handy.
Tipp die App an. Buttons, Schalter, Stepper und Textfelder reagieren, und die Vorschau spielt deine Eingaben auf frischem Zustand erneut ab, sodass sich @State und @Binding wie in einer echten App verhalten.
Automatische Vorschau: Der Bildschirm baut sich kurz nach deiner letzten Eingabe neu auf, und der Aktualisieren-Button startet die App neu. Compilerfehler zeigen auf die Zeile in deiner Datei.
SwiftUI-Codevorschläge im Editor: Modifier nach einem Punkt, die Werte, die ein Argument annimmt (.font(., .foregroundStyle(.), Property Wrapper nach @ und SF-Symbol-Namen.
Speichere einen Screenshot des Handys als PNG und lade deine ContentView.swift herunter, um sie später in Xcode zu öffnen. Aus Xcode eingefügte Dateien lassen sich ebenfalls bauen: #Preview-Blöcke werden ignoriert.

Was du im SwiftUI-Playground bauen kannst

Eine To-do-Liste mit List, ForEach($items) und einem Toggle pro Zeile, dazu ein TextField und ein Button, der neue Zeilen hinzufügt.
Einen Einstellungsbildschirm: eine Form mit Abschnitten, einem Picker, einem Stepper und einem Slider, alle an @State gebunden.
Navigation: ein NavigationStack mit Titel und NavigationLink-Zeilen, die eine Detailansicht öffnen.
Layout-Experimente: VStack, HStack und ZStack mit .padding, .frame, .background und abgerundeten Formen, um zu sehen, wie sich Modifier stapeln.

Häufige Fragen zum Online-SwiftUI-Playground

Kann ich SwiftUI ohne Mac ausführen?

Ja. Dieser Playground läuft in jedem aktuellen Browser, unter Windows, Linux, auf einem Chromebook oder einem iPad. Dein Code wird auf Coddys Servern kompiliert und der Bildschirm in der Seite gezeichnet, du brauchst also weder Xcode noch einen Mac noch den iOS-Simulator, um SwiftUI auszuprobieren.

Ist der Online-SwiftUI-Playground kostenlos?

Ja. Er ist kostenlos und ohne Anmeldung: Seite öffnen, den Code bearbeiten und aufs Handy schauen.

Ist das Apples SwiftUI?

Nein. Es ist Coddys eigene Implementierung der Views, Modifier und Property Wrapper von SwiftUI, mit swiftc kompiliert und als iPhone-Bildschirm gezeichnet. Alltäglicher SwiftUI-Code läuft unverändert, und die Vorschau ist dieselbe, die Coddys SwiftUI-Lektionen verwenden und mit der sie bewertet werden. Reine Apple-Frameworks wie UIKit, MapKit und Core Data sind nicht verfügbar, und Animationen zeigen ihren Endzustand.

Kann ich @Observable oder #Preview verwenden?

Nutze ObservableObject mit @Published und @StateObject für gemeinsame Daten. Das Makro @Observable und #Preview brauchen die Makro-Plugins von Xcode; #Preview-Blöcke werden ignoriert, eine aus Xcode eingefügte Datei baut also trotzdem, und die App zeigt ContentView. Du kannst auch deinen eigenen App-Struct mit @main hinzufügen.

Wie lerne ich SwiftUI, nachdem ich den Playground ausprobiert habe?

Ändere die Beispiel-App und tipp dich in der Vorschau durch. Wenn du einen strukturierten Weg willst, bringt dir Coddys SwiftUI-Kurs Views, Modifier, Stacks, @State, Listen, Navigation, @Binding und beobachtbare Daten in kurzen Lektionen bei, jede mit derselben Live-Vorschau auf dem iPhone.

Nützliche Tools für SwiftUI

Kostenlose, browserbasierte Tools, die gut zum SwiftUI-Playground passen - alles Teil von Coddy.

SwiftUI-Editor einbetten Programmier-Plattformen vergleichen