Playground SwiftUI

Écrivez, exécutez et partagez des extraits de code - sans installation.

ContentView.swift

AperçuAper?u automatique

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")
        }
    }
}

Exécutez SwiftUI en ligne et voyez l'app sur un iPhone

Un playground SwiftUI en ligne et gratuit. Écrivez un ContentView et vos vues apparaissent sur un écran de la taille d'un iPhone, à côté du code. Les boutons, interrupteurs et champs de texte réagissent au toucher, donc les changements de @State s'affichent comme sur un appareil. Pas de Mac, pas de Xcode, pas de simulateur à télécharger.

Votre code est compilé avec swiftc contre l'implémentation de SwiftUI propre à Coddy, celle qui anime l'aperçu en direct des leçons SwiftUI de Coddy. Elle couvre l'API de tous les jours : stacks, Text, Image(systemName:), Button, Toggle, TextField, Slider, Stepper, Picker, List, ForEach, Form, NavigationStack, sheets et alerts, avec @State, @Binding, ObservableObject et @Published. Ce n'est pas le framework d'Apple : les frameworks propres à Apple comme UIKit, MapKit et Core Data ne sont pas disponibles.

Ce qui rend ce playground SwiftUI utile

Un aperçu d'iPhone en direct : l'écran est dessiné à la taille d'un iPhone dans un cadre d'appareil, avec barre d'état et Dynamic Island, pour qu'une mise en page ressemble à ce qu'elle serait sur un téléphone.
Touchez l'app. Les boutons, interrupteurs, steppers et champs de texte réagissent, et l'aperçu rejoue vos touches sur un état neuf, donc @State et @Binding se comportent comme dans une vraie app.
Aperçu automatique : l'écran se reconstruit un instant après que vous arrêtez de taper, et le bouton d'actualisation relance l'app. Les erreurs du compilateur pointent la ligne de votre fichier.
Suggestions de code SwiftUI dans l'éditeur : modificateurs après un point, valeurs qu'accepte un argument (.font(., .foregroundStyle(.), property wrappers après @ et noms de SF Symbols.
Enregistrez une capture de l'écran du téléphone en PNG et téléchargez votre ContentView.swift pour l'ouvrir plus tard dans Xcode. Les fichiers collés depuis Xcode compilent aussi : les blocs #Preview sont ignorés.

Ce que vous pouvez créer dans le playground SwiftUI

Une liste de tâches avec List, ForEach($items) et un Toggle par ligne, plus un TextField et un bouton qui ajoute des lignes.
Un écran de réglages : un Form avec des sections, un Picker, un Stepper et un Slider, tous liés à @State.
La navigation : un NavigationStack avec un titre et des lignes NavigationLink qui ouvrent une vue de détail.
Des essais de mise en page : VStack, HStack et ZStack avec .padding, .frame, .background et des formes arrondies, pour voir comment les modificateurs s'empilent.

Questions fréquentes sur le playground SwiftUI en ligne

Peut-on exécuter SwiftUI sans Mac ?

Oui. Ce playground fonctionne dans n'importe quel navigateur récent, sous Windows, Linux, sur un Chromebook ou un iPad. Votre code est compilé sur les serveurs de Coddy et l'écran est dessiné dans la page : vous n'avez besoin ni de Xcode, ni d'un Mac, ni du simulateur iOS pour essayer SwiftUI.

Le playground SwiftUI en ligne est-il gratuit ?

Oui. Il est gratuit et sans inscription : ouvrez la page, modifiez le code et regardez le téléphone.

Est-ce le SwiftUI d'Apple ?

Non. C'est l'implémentation propre à Coddy des vues, modificateurs et property wrappers de SwiftUI, compilée avec swiftc et dessinée comme un écran d'iPhone. Le code SwiftUI courant fonctionne sans changement, et l'aperçu est celui que les leçons SwiftUI de Coddy utilisent et avec lequel elles sont corrigées. Les frameworks propres à Apple comme UIKit, MapKit et Core Data ne sont pas disponibles, et les animations montrent leur état final.

Puis-je utiliser @Observable ou #Preview ?

Utilisez ObservableObject avec @Published et @StateObject pour les données partagées. La macro @Observable et #Preview ont besoin des plugins de macros de Xcode ; les blocs #Preview sont ignorés, donc un fichier collé depuis Xcode compile quand même et l'app affiche ContentView. Vous pouvez aussi ajouter votre propre struct App avec @main.

Comment apprendre SwiftUI après avoir essayé le playground ?

Modifiez l'app d'exemple et parcourez-la du bout du doigt dans l'aperçu. Pour un parcours structuré, le cours SwiftUI de Coddy enseigne les vues, les modificateurs, les stacks, @State, les listes, la navigation, @Binding et les données observables en leçons courtes, chacune avec le même aperçu d'iPhone en direct.

Outils utiles pour SwiftUI

Outils gratuits dans le navigateur qui s'associent bien avec le Playground SwiftUI - tout fait partie de Coddy.

Intégrer l'éditeur SwiftUI Comparer les plateformes de code