Playground de SwiftUI

Escribe, ejecuta y comparte fragmentos de código, sin instalaciones.

ContentView.swift

Vista previaVista previa autom?tica

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

Ejecuta SwiftUI online y mira la app en un iPhone

Un playground de SwiftUI online y gratis. Escribe un ContentView y tus vistas aparecen en una pantalla del tamaño de un iPhone junto al código. Los botones, interruptores y campos de texto responden a tus toques, así que los cambios de @State se ven como en un dispositivo. Sin Mac, sin Xcode y sin simulador que descargar.

Tu código se compila con swiftc contra la implementación propia de SwiftUI de Coddy, la misma que da vida a la vista previa de las lecciones de SwiftUI de Coddy. Cubre la API de todos los días: stacks, Text, Image(systemName:), Button, Toggle, TextField, Slider, Stepper, Picker, List, ForEach, Form, NavigationStack, sheets y alerts, con @State, @Binding, ObservableObject y @Published. No es el framework de Apple, así que los frameworks exclusivos de Apple como UIKit, MapKit y Core Data no están disponibles.

Qué hace útil a este playground de SwiftUI

Una vista previa de iPhone en vivo: la pantalla se dibuja a tamaño de iPhone dentro de un marco de dispositivo, con barra de estado y Dynamic Island, para que el diseño se vea como en un teléfono.
Toca la app. Los botones, interruptores, steppers y campos de texto responden, y la vista previa repite tus toques sobre un estado nuevo, así que @State y @Binding se comportan como en una app real.
Vista previa automática: la pantalla se reconstruye un momento después de que dejas de escribir, y el botón de recargar reinicia la app. Los errores del compilador señalan la línea de tu archivo.
Sugerencias de código SwiftUI en el editor: modificadores después de un punto, los valores que acepta un argumento (.font(., .foregroundStyle(.), property wrappers después de @ y nombres de SF Symbols.
Guarda una captura del teléfono en PNG y descarga tu ContentView.swift para abrirlo luego en Xcode. Los archivos pegados desde Xcode también compilan: los bloques #Preview se ignoran.

Qué puedes crear en el playground de SwiftUI

Una lista de tareas con List, ForEach($items) y un Toggle por fila, más un TextField y un botón que añade filas nuevas.
Una pantalla de ajustes: un Form con secciones, un Picker, un Stepper y un Slider, todos enlazados a @State.
Navegación: un NavigationStack con título y filas NavigationLink que abren una vista de detalle.
Experimentos de diseño: VStack, HStack y ZStack con .padding, .frame, .background y formas redondeadas, para ver cómo se apilan los modificadores.

Preguntas frecuentes sobre el playground de SwiftUI online

¿Puedo ejecutar SwiftUI sin un Mac?

Sí. Este playground funciona en cualquier navegador moderno, en Windows, Linux, un Chromebook o un iPad. Tu código se compila en los servidores de Coddy y la pantalla se dibuja en la página, así que no necesitas Xcode, un Mac ni el simulador de iOS para probar SwiftUI.

¿El playground de SwiftUI online es gratis?

Sí. Es gratis y sin registro: abre la página, edita el código y mira el teléfono.

¿Es el SwiftUI de Apple?

No. Es la implementación propia de Coddy de las vistas, modificadores y property wrappers de SwiftUI, compilada con swiftc y dibujada como una pantalla de iPhone. El código SwiftUI de todos los días funciona sin cambios, y la vista previa es la misma que usan y con la que se corrigen las lecciones de SwiftUI de Coddy. Los frameworks exclusivos de Apple como UIKit, MapKit y Core Data no están disponibles, y las animaciones muestran su estado final.

¿Puedo usar @Observable o #Preview?

Usa ObservableObject con @Published y @StateObject para los datos compartidos. La macro @Observable y #Preview necesitan los plugins de macros de Xcode; los bloques #Preview se ignoran, así que un archivo pegado desde Xcode igual compila y la app muestra ContentView. También puedes añadir tu propio struct App con @main.

¿Cómo aprendo SwiftUI después de probar el playground?

Cambia la app de ejemplo y recórrela con toques en la vista previa. Cuando quieras un camino ordenado, el curso de SwiftUI de Coddy enseña vistas, modificadores, stacks, @State, listas, navegación, @Binding y datos observables en lecciones cortas, cada una con la misma vista previa de iPhone en vivo.

Herramientas útiles para SwiftUI

Herramientas gratuitas basadas en el navegador que complementan el Playground de SwiftUI - todo parte de Coddy.

Incrusta el editor de SwiftUI Compara plataformas para programar