Playground SwiftUI

Tulis, jalankan, dan bagikan potongan kode. Tanpa setup.

ContentView.swift

PratinjauPratinjau otomatis

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

Jalankan SwiftUI online dan lihat aplikasinya di iPhone

Playground SwiftUI online gratis. Tulis sebuah ContentView dan view-mu muncul di layar seukuran iPhone di samping kode. Tombol, toggle, dan text field merespons sentuhan, jadi perubahan @State terlihat seperti di perangkat sungguhan. Tanpa Mac, tanpa Xcode, tanpa simulator yang perlu diunduh.

Kodemu dikompilasi dengan swiftc terhadap implementasi SwiftUI buatan Coddy sendiri, yang juga menjalankan pratinjau langsung di pelajaran SwiftUI Coddy. Implementasi ini mencakup API sehari-hari: stack, Text, Image(systemName:), Button, Toggle, TextField, Slider, Stepper, Picker, List, ForEach, Form, NavigationStack, sheet, dan alert, dengan @State, @Binding, ObservableObject, dan @Published. Ini bukan framework milik Apple, jadi framework khusus Apple seperti UIKit, MapKit, dan Core Data tidak tersedia.

Kenapa playground SwiftUI ini berguna

Pratinjau iPhone langsung: layarnya dirender seukuran iPhone di dalam bingkai perangkat, dengan status bar dan Dynamic Island, jadi layout terlihat seperti di ponsel.
Sentuh aplikasinya. Tombol, toggle, stepper, dan text field merespons, dan pratinjaunya memutar ulang sentuhanmu pada state yang baru, jadi @State dan @Binding berperilaku seperti di aplikasi sungguhan.
Pratinjau otomatis: layarnya dibangun ulang sesaat setelah kamu berhenti mengetik, dan tombol refresh memulai aplikasinya dari awal. Error compiler menunjuk ke baris di file-mu.
Saran kode SwiftUI di editor: modifier setelah titik, nilai yang diterima sebuah argumen (.font(., .foregroundStyle(.), property wrapper setelah @, dan nama SF Symbol.
Simpan screenshot ponsel sebagai PNG, dan unduh ContentView.swift milikmu untuk dibuka di Xcode nanti. File yang ditempel dari Xcode juga bisa di-build: blok #Preview diabaikan.

Yang bisa kamu buat di playground SwiftUI

Daftar tugas dengan List, ForEach($items), dan sebuah Toggle di setiap baris, plus TextField dan tombol yang menambah baris baru.
Layar pengaturan: Form dengan beberapa section, Picker, Stepper, dan Slider, semuanya terikat ke @State.
Navigasi: NavigationStack dengan judul dan baris NavigationLink yang membuka tampilan detail.
Eksperimen layout: VStack, HStack, dan ZStack dengan .padding, .frame, .background, dan bentuk bersudut bulat, untuk melihat bagaimana modifier bertumpuk.

FAQ playground SwiftUI online

Bisakah aku menjalankan SwiftUI tanpa Mac?

Bisa. Playground ini berjalan di browser modern apa pun, di Windows, Linux, Chromebook, atau iPad. Kodemu dikompilasi di server Coddy dan layarnya digambar di halaman, jadi kamu tidak butuh Xcode, Mac, atau simulator iOS untuk mencoba SwiftUI.

Apakah playground SwiftUI online ini gratis?

Ya. Gratis tanpa daftar: buka halamannya, edit kodenya, dan lihat ponselnya.

Apakah ini SwiftUI milik Apple?

Bukan. Ini implementasi buatan Coddy sendiri untuk view, modifier, dan property wrapper SwiftUI, dikompilasi dengan swiftc dan digambar sebagai layar iPhone. Kode SwiftUI sehari-hari berjalan tanpa perubahan, dan pratinjaunya sama dengan yang dipakai pelajaran SwiftUI Coddy untuk menilai. Framework khusus Apple seperti UIKit, MapKit, dan Core Data tidak tersedia, dan animasi hanya menampilkan kondisi akhirnya.

Bisakah aku memakai @Observable atau #Preview?

Pakai ObservableObject dengan @Published dan @StateObject untuk data bersama. Macro @Observable dan #Preview butuh plugin macro milik Xcode; blok #Preview diabaikan, jadi file yang ditempel dari Xcode tetap bisa di-build, dan aplikasinya menampilkan ContentView. Kamu juga bisa menambahkan struct App @main milikmu sendiri.

Bagaimana cara belajar SwiftUI setelah mencoba playground ini?

Ubah aplikasi contohnya dan coba sentuh-sentuh di pratinjau. Saat kamu ingin jalur yang terstruktur, kursus SwiftUI Coddy mengajarkan view, modifier, stack, @State, list, navigasi, @Binding, dan data observable dalam pelajaran singkat, masing-masing dengan pratinjau iPhone langsung yang sama.

Alat berguna untuk SwiftUI

Alat gratis berbasis browser yang cocok dipakai bersama Playground SwiftUI, semuanya bagian dari Coddy.

Sematkan editor SwiftUI Bandingkan platform coding