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

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