Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

import SwiftUI

// Custom ViewModifier
struct CardStyle: ViewModifier {
    var color: Color = .white

func body(content: Content) -> some View {
        content
            .padding()
            .background(color)
            .cornerRadius(12)
            .shadow(color: .black.opacity(0.1), radius: 4, x: 0, y: 2)
    }
}

extension View {
    func cardStyle(color: Color = .white) -> some View {
        modifier(CardStyle(color: color))
    }
}

// Animated loading button
struct LoadingButton: View {
    @State private var isLoading = false

var body: some View {
        Button {
            withAnimation(.easeInOut(duration: 0.3)) { isLoading = true }
            DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                withAnimation { isLoading = false }
            }
        } label: {
            Group {
                if isLoading {
                    ProgressView().tint(.white)
                } else {
                    Text("Submit")
                }
            }
            .frame(width: 120, height: 44)
        }
        .buttonStyle(.borderedProminent)
        .disabled(isLoading)
    }
}

// Custom drawing with Canvas
struct WaveView: View {
    @State private var phase: Double = 0

var body: some View {
        Canvas { ctx, size in
            let path = Path { p in
                p.move(to: CGPoint(x: 0, y: size.height / 2))
                for x in stride(from: 0, through: size.width, by: 1) {
                    let y = sin(x / 20 + phase) * 30 + size.height / 2
                    p.addLine(to: CGPoint(x: x, y: y))
                }
            }
            ctx.stroke(path, with: .color(.blue), lineWidth: 2)
        }
        .onAppear {
            withAnimation(.linear(duration: 2).repeatForever(autoreverses: false)) {
                phase = .pi * 2
            }
        }
    }
}