TUIkit/docs/api/data/documentation/tuikit/gettingstarted.json

{"kind":"article","abstract":[{"type":"text","text":"Create your first terminal user interface in minutes."}],"sections":[],"primaryContentSections":[{"content":[{"anchor":"Installation","text":"Installation","level":2,"type":"heading"},{"anchor":"Using-Swift-Package-Manager","text":"Using Swift Package Manager","level":3,"type":"heading"},{"inlineContent":[{"text":"Add TUIKit to your ","type":"text"},{"type":"codeVoice","code":"Package.swift"},{"text":":","type":"text"}],"type":"paragraph"},{"code":[".package(url: \"https:\/\/github.com\/anthropics\/SwiftTUI.git\", from: \"0.1.0\")"],"syntax":"swift","type":"codeListing"},{"inlineContent":[{"text":"Or via Xcode: File > Add Packages > Enter repository URL","type":"text"}],"type":"paragraph"},{"anchor":"Creating-Your-First-App","text":"Creating Your First App","level":2,"type":"heading"},{"anchor":"1-Define-Your-App","text":"1. Define Your App","level":3,"type":"heading"},{"inlineContent":[{"type":"text","text":"Every TUIKit app needs an "},{"type":"codeVoice","code":"@main"},{"type":"text","text":" entry point that conforms to the "},{"type":"codeVoice","code":"App"},{"type":"text","text":" protocol:"}],"type":"paragraph"},{"code":["import TUIKit","","@main","struct HelloApp: App {","    var body: some Scene {","        WindowGroup {","            Text(\"Hello, TUIKit!\")","        }","    }","}"],"syntax":"swift","type":"codeListing"},{"anchor":"2-Add-Some-Layout","text":"2. Add Some Layout","level":3,"type":"heading"},{"inlineContent":[{"text":"Use ","type":"text"},{"type":"codeVoice","code":"VStack"},{"text":" and ","type":"text"},{"type":"codeVoice","code":"HStack"},{"text":" to organize your content:","type":"text"}],"type":"paragraph"},{"code":["@main","struct LayoutApp: App {","    var body: some Scene {","        WindowGroup {","            VStack(spacing: 1) {","                Text(\"Welcome\")","                    .bold()","","                Text(\"Build terminal UIs in Swift\")","","                Spacer()","","                Text(\"Press 'q' to quit\")","                    .foregroundColor(.theme.foregroundSecondary)","            }","            .padding()","        }","    }","}"],"syntax":"swift","type":"codeListing"},{"anchor":"3-Make-It-Interactive","text":"3. Make It Interactive","level":3,"type":"heading"},{"inlineContent":[{"type":"text","text":"Add buttons and state to create interactive interfaces:"}],"type":"paragraph"},{"code":["import TUIKit","","@main","struct InteractiveApp: App {","    @State var count: Int = 0","","    var body: some Scene {","        WindowGroup {","            VStack(spacing: 1) {","                Text(\"Counter: \\(count)\")","                    .bold()","","                HStack(spacing: 2) {","                    Button(\"Increment\") { count += 1 }","                    Button(\"Decrement\") { count = max(0, count - 1) }","                }","","                Spacer()","            }","            .padding()","        }","    }","}"],"syntax":"swift","type":"codeListing"},{"anchor":"Running-Your-App","text":"Running Your App","level":2,"type":"heading"},{"anchor":"From-Command-Line","text":"From Command Line","level":3,"type":"heading"},{"code":["swift run"],"syntax":"bash","type":"codeListing"},{"anchor":"With-a-Custom-Executable-Name","text":"With a Custom Executable Name","level":3,"type":"heading"},{"inlineContent":[{"text":"Add to ","type":"text"},{"code":"Package.swift","type":"codeVoice"},{"text":":","type":"text"}],"type":"paragraph"},{"code":[".executableTarget(","    name: \"MyApp\",","    dependencies: [.product(name: \"TUIKit\", package: \"SwiftTUI\")]",")"],"syntax":"swift","type":"codeListing"},{"inlineContent":[{"type":"text","text":"Then run:"}],"type":"paragraph"},{"code":["swift run MyApp"],"syntax":"bash","type":"codeListing"},{"anchor":"Understanding-the-Basics","text":"Understanding the Basics","level":2,"type":"heading"},{"anchor":"Views","text":"Views","level":3,"type":"heading"},{"inlineContent":[{"text":"Everything in TUIKit is a ","type":"text"},{"code":"View","type":"codeVoice"},{"text":". Views are lightweight, composable units that render content to the terminal.","type":"text"}],"type":"paragraph"},{"inlineContent":[{"type":"text","text":"Common views:"}],"type":"paragraph"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"code":"Text","type":"codeVoice"}],"type":"strong"},{"text":": Display text with optional styling","type":"text"}]}]},{"content":[{"inlineContent":[{"inlineContent":[{"code":"Button","type":"codeVoice"}],"type":"strong"},{"type":"text","text":": Interactive button with action handler"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"VStack"}]},{"type":"text","text":": Arrange views vertically"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"HStack","type":"codeVoice"}]},{"type":"text","text":": Arrange views horizontally"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"type":"codeVoice","code":"Spacer"}]},{"text":": Fill available space","type":"text"}],"type":"paragraph"}]}],"type":"unorderedList"},{"anchor":"State-Management","text":"State Management","level":3,"type":"heading"},{"inlineContent":[{"type":"text","text":"Use "},{"type":"codeVoice","code":"@State"},{"type":"text","text":" to make your views interactive:"}],"type":"paragraph"},{"code":["@State var isVisible: Bool = true","","VStack {","    if isVisible {","        Text(\"Visible\")","    }","    Button(\"Toggle\") { isVisible.toggle() }","}"],"syntax":"swift","type":"codeListing"},{"anchor":"Modifiers","text":"Modifiers","level":3,"type":"heading"},{"inlineContent":[{"type":"text","text":"Customize views with modifiers:"}],"type":"paragraph"},{"code":["Text(\"Hello\")","    .bold()","    .foregroundColor(.theme.accent)","    .padding(1)","    .border(.rounded)"],"syntax":"swift","type":"codeListing"},{"anchor":"Next-Steps","text":"Next Steps","level":2,"type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Explore the "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy"},{"type":"text","text":" to understand component organization"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Learn "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement"},{"type":"text","text":" for complex state scenarios"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"type":"text","text":"Discover "},{"isActive":true,"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming"},{"type":"text","text":" to customize colors and appearance"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"text":"Check out ","type":"text"},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","isActive":true},{"text":" for all available styling options","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Try "},{"type":"reference","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","isActive":true},{"type":"text","text":" tutorial for step-by-step guidance"}]}]}],"type":"unorderedList"},{"anchor":"Key-Bindings","text":"Key Bindings","level":2,"type":"heading"},{"inlineContent":[{"type":"text","text":"By default, TUIKit apps support:"}],"type":"paragraph"},{"items":[{"content":[{"inlineContent":[{"type":"strong","inlineContent":[{"code":"q","type":"codeVoice"}]},{"text":": Quit the application","type":"text"}],"type":"paragraph"}]},{"content":[{"inlineContent":[{"inlineContent":[{"code":"t","type":"codeVoice"}],"type":"strong"},{"type":"text","text":": Cycle through themes"}],"type":"paragraph"}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"code":"a","type":"codeVoice"}],"type":"strong"},{"text":": Cycle through appearance styles","type":"text"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"inlineContent":[{"type":"codeVoice","code":"?"}],"type":"strong"},{"text":": Show help","type":"text"}]}]}],"type":"unorderedList"},{"inlineContent":[{"text":"See ","type":"text"},{"type":"codeVoice","code":"KeyEvent"},{"text":" for custom keyboard handling.","type":"text"}],"type":"paragraph"},{"anchor":"Terminal-Requirements","text":"Terminal Requirements","level":2,"type":"heading"},{"items":[{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Minimum 80x24 character terminal"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"ANSI color support (256 colors recommended)"}]}]},{"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"UTF-8 encoding"}]}]},{"content":[{"inlineContent":[{"type":"text","text":"Supports: macOS Terminal, iTerm2, Kitty, and Linux terminals (gnome-terminal, konsole, etc.)"}],"type":"paragraph"}]}],"type":"unorderedList"}],"kind":"content"}],"schemaVersion":{"patch":0,"minor":3,"major":0},"hierarchy":{"paths":[["doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit"]]},"metadata":{"roleHeading":"Article","role":"article","title":"Getting Started with TUIKit"},"identifier":{"url":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/GettingStarted","interfaceLanguage":"swift"},"references":{"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Modifiers":{"role":"article","kind":"article","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Modifiers","type":"topic","url":"\/documentation\/tuikit\/modifiers","title":"View Modifiers","abstract":[{"type":"text","text":"Learn how to use modifiers to customize the appearance and behavior of views."}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit":{"title":"TUIKit","role":"collection","abstract":[],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit","type":"topic","kind":"article","url":"\/documentation\/tuikit"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/Theming":{"kind":"article","url":"\/documentation\/tuikit\/theming","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/Theming","role":"article","title":"Theming System","type":"topic","abstract":[{"type":"text","text":"Customize the appearance of your application with TUIKit’s flexible theming system."}]},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/StateManagement":{"abstract":[{"type":"text","text":"Learn how to manage application state and data flow in TUIKit."}],"type":"topic","kind":"article","url":"\/documentation\/tuikit\/statemanagement","title":"State Management","identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/StateManagement","role":"article"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/BuildYourFirstApp":{"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/BuildYourFirstApp","type":"topic","abstract":[{"type":"text","text":"Create a simple counter application to learn TUIKit basics."}],"kind":"article","role":"article","url":"\/documentation\/tuikit\/buildyourfirstapp","title":"Building Your First App"},"doc://com.anthropic.tuikit.documentation/documentation/TUIKit/ViewHierarchy":{"abstract":[{"type":"text","text":"Learn how TUIKit’s declarative view model works and how to compose views effectively."}],"identifier":"doc:\/\/com.anthropic.tuikit.documentation\/documentation\/TUIKit\/ViewHierarchy","role":"article","title":"Understanding the View Hierarchy","type":"topic","url":"\/documentation\/tuikit\/viewhierarchy","kind":"article"}}}