CINXE.COM

<!DOCTYPE html> <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta charset="utf-8" /> <meta name="Author" content="Apple Inc." /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" /> <link rel="mask-icon" href="/apple-logo.svg" color="#333333"> <link rel="stylesheet" href="/assets/styles/global.dist.css?01172423298" type="text/css" /> <link rel="stylesheet" href="/assets/styles/dark-mode.css?17182448067" type="text/css" media="(prefers-color-scheme: dark)" data-color-scheme="dark" /> <link rel="stylesheet" href="/assets/styles/localization.css?39172414191" type="text/css" /> <script src="/assets/scripts/lib/jquery/jquery-3.6.0.min.js?17182448067"></script> <script src="/assets/scripts/settings.js?17182448067"></script> <script src="/assets/scripts/language-locales.js?17182448067"></script> <script src="/assets/scripts/DeveloperBreadcrumbs.js?05182434080"></script> <script async src="/assets/scripts/lib/jquery/jquery.retinate.js?17182448067"></script> <script async src="/assets/scripts/global.js?17182448067"></script> <script async src="/assets/scripts/global-logout.js?17182448067"></script> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Pro&v=2" type="text/css" /> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Pro+Icons&v=1" type="text/css" /> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=SF+Mono&v=2" type="text/css" /> <link rel="stylesheet" href="https://www.apple.com/wss/fonts?family=Apple+Icons&v=1" type="text/css" /> <title>Swift Playgrounds - Apple Developer</title> <meta name="omni_page" content="Swift Playgrounds - (English)" /> <meta name="Description" content="Swift Playgrounds is a revolutionary app for iPad and Mac that helps you learn and explore coding in Swift, the same powerful language used to create world-class apps for the App Store." /> <meta name="search_icon" content="/assets/elements/icons/swift-playgrounds/swift-playgrounds-96x96_2x.png" /> <meta property="og:locale" content="en_US" /> <meta property="og:site_name" content="Apple Developer" /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://developer.apple.com/news/images/og/swift-playgrounds-og.jpg" /> <meta property="og:title" content="Swift Playgrounds - Apple Developer" /> <meta property="og:description" content="Swift Playgrounds is a revolutionary app for iPad and Mac that helps you learn and explore coding in Swift, the same powerful language used to create world-class apps for the App Store." /> <meta property="og:url" content="https://developer.apple.com/swift-playgrounds/" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://developer.apple.com/news/images/og/swift-playgrounds-og-twitter.jpg" /> <meta name="twitter:title" content="Swift Playgrounds - Apple Developer" /> <meta name="twitter:description" content="Swift Playgrounds is a revolutionary app for iPad and Mac that helps you learn and explore coding in Swift, the same powerful language used to create world-class apps for the App Store." /> <meta name="twitter:url" content="https://developer.apple.com/swift-playgrounds/" /> <link rel="alternate" type="application/rss+xml" title="RSS" href="feed://developer.apple.com/swift/blog/news.rss" /> <link rel="shortcut icon" href="/swift/favicon.ico/" /> <link rel="icon" href="/swift/favicon.ico/" /> <link rel="mask-icon" href="/swift/swift-logo.svg/" color="#fd6e33" /> <link rel="apple-touch-icon" href="/swift/images/swift-touch-icon.png/" /> <link rel="alternate" href="https://developer.apple.com/kr/swift-playgrounds/" hreflang="ko-KR" /> <link rel="alternate" href="https://developer.apple.com/jp/swift-playgrounds/" hreflang="ja-JP" /> <link rel="alternate" href="https://developer.apple.com/cn/swift-playgrounds/" hreflang="zh-CN" /> <link rel="alternate" href="https://developer.apple.com/swift-playgrounds/" hreflang="en" /> <link rel="canonical" href="https://developer.apple.com/swift-playgrounds/" /> <link rel="stylesheet" href="/assets/styles/router-strip.css" type="text/css" /> <link rel="stylesheet" href="/swift-playgrounds/styles/swift-playgrounds.css" type="text/css" /> <link rel="stylesheet" href="/swift-playgrounds/styles/overview-en.css" type="text/css" /> <link rel="stylesheet" href="/swift-playgrounds/styles/gallery.css" type="text/css" /> </head> <body id="overview" class="dmf"> <script> const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; if (window.Settings.preferredColorScheme) { const colorTheme = (window.Settings.preferredColorScheme === 'auto') && !prefersDark ? 'light' : (window.Settings.preferredColorScheme === 'light') ? 'light' : 'dark' document.body.setAttribute('data-color-scheme', colorTheme); } else { document.body.setAttribute('data-color-scheme', prefersDark ? 'dark' : 'light'); } </script> <style> /* footer */ html body[data-color-scheme='dark'] #main section.section.section-resources.bg-alt {background-color:var(--fill-tertiary);color:var(--glyph-gray);} html body[data-color-scheme='dark'] .developer-router-links {background-color:var(--fill-tertiary);color:var(--glyph-gray);} html body[data-color-scheme='dark'] .footer {background-color:var(--fill-tertiary);color:var(--glyph-gray-tertiary);} /* body backgrounds */ body[data-color-scheme='dark'].dmf {background-color: #000;} html body[data-color-scheme='dark'].dmf .bg-alt {background-color:var(--fill-tertiary);} html body[data-color-scheme='dark'].dmf .bg-blue {background-color:var(--fill-blue-secondary);} html body[data-color-scheme='dark'].dmf .bg-green-blue {background:linear-gradient(135deg, #65976d 0%, #588ea4 100%)} html body[data-color-scheme='dark'].dmf .bg-yellow {background: linear-gradient(to bottom, var(--fill-tertiary) 0%, var(--fill-tertiary-alt) 100%);} html body[data-color-scheme='dark'].dmf .bg-light {background-color:var(--fill-secondary-alt);} html body[data-color-scheme='dark'].dmf .bg-gradient, html body[data-color-scheme='dark'].dmf .bg-grad {background:linear-gradient(to bottom, var(--dark) 0%, var(--fill-gray-secondary-alt) 100%);} html body[data-color-scheme='dark'].dmf .bg-grad-down {background:linear-gradient(to bottom, var(--dark) 0%, var(--fill-gray-secondary-alt) 100%);} html body[data-color-scheme='dark'].dmf .bg-grad-up {background:linear-gradient(to bottom, var(--fill-gray-secondary-alt) 0%, var(--dark) 100%);} html body[data-color-scheme='dark'].dmf .bg-blue-gradient, html body[data-color-scheme='dark'].dmf .bg-gradient-blue {background:linear-gradient(to bottom, var(--fill-blue-gradient-light) 0%, var(--fill-blue-gradient-dark) 100%);} html body[data-color-scheme='dark'].dmf .bg-blue-gradient-alt {background: linear-gradient(90deg, #061830 0%, #102d48 100%);} /* globalNav */ html body[data-color-scheme='dark'] #ac-globalnav {background: var(--fill-tertiary);} /* localNav */ html body[data-color-scheme='dark'] .localnav.localnav-scrim .localnav-background, html body[data-color-scheme='dark'] .localnav-scrim.localnav.localnav-background { background-color: rgba(29, 29, 31, 0.9); } @supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) { html body[data-color-scheme='dark'] .localnav.localnav-scrim .localnav-background, html body[data-color-scheme='dark'] .localnav-scrim.localnav.localnav-background { background-color: rgba(29, 29, 31, 0.72); } } </style> <link rel="stylesheet" href="/assets/styles/globalnav.css?55202406207" type="text/css" /> <link rel="stylesheet" href="/assets/styles/suggest-lang.css?17182448067" type="text/css" /> <div id="suggest-lang" class="ribbon hide" lang="en"> <div class="ribbon-content-wrapper"> <div class="ribbon-content row"> <div class="column large-12 large-centered"> <p><a href="#" id="suggest-link" class="ribbon-link more">View in English</a></p> <button id="suggest-closer" class="icon icon-after icon-reset" aria-label="Dismiss language suggestion" tabindex="0"></button> </div> </div> </div> </div> <script src="/assets/scripts/suggest-lang.js?17182448067"></script> <aside id="ac-gn-segmentbar" class="ac-gn-segmentbar" lang="en-US" dir="ltr"> </aside> <input type="checkbox" id="ac-gn-menustate" class="ac-gn-menustate" /> <nav id="ac-globalnav" class="no-js" role="navigation" aria-label="Global" data-hires="false" data-analytics-region="global nav" lang="en-US" dir="ltr" data-www-domain="www.apple.com" data-store-locale="us" data-store-root-path="/us" data-store-api="/[storefront]/shop/bag/status" data-search-locale="en_US" data-search-suggestions-api="/search-services/suggestions/" data-search-defaultlinks-api="/search-services/suggestions/defaultlinks/" data-search-suggestions-enabled="false"> <div class="ac-gn-content"> <ul class="ac-gn-header"> <li class="ac-gn-item ac-gn-menuicon"> <label class="ac-gn-menuicon-label" for="ac-gn-menustate" aria-hidden="true"> <span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-top"> <span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-top"></span> </span> <span class="ac-gn-menuicon-bread ac-gn-menuicon-bread-bottom"> <span class="ac-gn-menuicon-bread-crust ac-gn-menuicon-bread-crust-bottom"></span> </span> </label> <a href="#ac-gn-menustate" role="button" class="ac-gn-menuanchor ac-gn-menuanchor-open" id="ac-gn-menuanchor-open"> <span class="ac-gn-menuanchor-label">Global Nav Open Menu</span> </a> <a href="#" role="button" class="ac-gn-menuanchor ac-gn-menuanchor-close" id="ac-gn-menuanchor-close"> <span class="ac-gn-menuanchor-label">Global Nav Close Menu</span> </a> </li> <li class="ac-gn-item ac-gn-apple"> <a class="ac-gn-link ac-gn-link-apple-developer" href="/" data-analytics-title="appledeveloper home" id="ac-gn-firstfocus-small"> <span class="ac-gn-link-text">Apple Developer</span> </a> </li> </ul> <div class="ac-gn-search-placeholder-container" role="search"> <div class="ac-gn-search ac-gn-search-small"> <a id="ac-gn-link-search-small" class="ac-gn-link" href="/search/" data-analytics-title="search" data-analytics-click="search" data-analytics-intrapage-link aria-label="Search"> <div class="ac-gn-search-placeholder-bar"> <div class="ac-gn-search-placeholder-input"> <div class="ac-gn-search-placeholder-input-text" aria-hidden="true"> <div class="ac-gn-link-search ac-gn-search-placeholder-input-icon"></div> <span class="ac-gn-search-placeholder">Search</span> </div> </div> <div class="ac-gn-searchview-close ac-gn-searchview-close-small ac-gn-search-placeholder-searchview-close"> <span class="ac-gn-searchview-close-cancel" aria-hidden="true">Cancel</span> </div> </div> </a> </div> </div> <ul class="ac-gn-list"> <li class="ac-gn-item ac-gn-apple"> <a class="ac-gn-link ac-gn-link-apple-developer" href="/" data-analytics-title="appledeveloper home" id="ac-gn-firstfocus"> <span class="ac-gn-link-text">Apple Developer</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-news"> <a class="ac-gn-link ac-gn-link-news" href="/news/" data-analytics-title="news"> <span class="ac-gn-link-text">News</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-discover"> <a class="ac-gn-link ac-gn-link-discover" href="/discover/" data-analytics-title="discover"> <span class="ac-gn-link-text">Discover</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-design"> <a class="ac-gn-link ac-gn-link-design" href="/design/" data-analytics-title="design"> <span class="ac-gn-link-text">Design</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-develop"> <a class="ac-gn-link ac-gn-link-develop" href="/develop/" data-analytics-title="develop"> <span class="ac-gn-link-text">Develop</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-distribute"> <a class="ac-gn-link ac-gn-link-distribute" href="/distribute/" data-analytics-title="distribute"> <span class="ac-gn-link-text">Distribute</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-dsupport"> <a class="ac-gn-link ac-gn-link-dsupport" href="/support/" data-analytics-title="dsupport"> <span class="ac-gn-link-text">Support</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-account"> <a class="ac-gn-link ac-gn-link-account" href="/account/" data-analytics-title="account"> <span class="ac-gn-link-text">Account</span> </a> </li> <li class="ac-gn-item ac-gn-item-menu ac-gn-search" role="search"> <a id="ac-gn-link-search" class="ac-gn-link ac-gn-link-search" href="/search/" data-analytics-title="search" data-analytics-click="search" data-analytics-intrapage-link aria-label="Search"></a> </li> </ul> <aside id="ac-gn-searchview" class="ac-gn-searchview" role="search" data-analytics-region="search"> <div class="ac-gn-searchview-content"> <div class="ac-gn-searchview-bar"> <div class="ac-gn-searchview-bar-wrapper"> <form id="ac-gn-searchform" class="ac-gn-searchform" action="/search/" method="get"> <div class="ac-gn-searchform-wrapper"> <input id="ac-gn-searchform-input" class="ac-gn-searchform-input" type="text" name="q" aria-label="Search" placeholder="Search" autocorrect="off" autocapitalize="off" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="true" aria-owns="quicklinks suggestions" /> <button id="ac-gn-searchform-submit" class="ac-gn-searchform-submit" type="submit" disabled aria-label="Submit Search"></button> <button id="ac-gn-searchform-reset" class="ac-gn-searchform-reset" type="reset" disabled aria-label="Clear Search"> <span class="ac-gn-searchform-reset-background"></span> </button> </div> </form> <button id="ac-gn-searchview-close-small" class="ac-gn-searchview-close ac-gn-searchview-close-small" aria-label="Cancel Search"> <span class="ac-gn-searchview-close-cancel" aria-hidden="true"> Cancel </span> </button> </div> </div> <aside id="ac-gn-searchresults" class="ac-gn-searchresults hidden" data-string-quicklinks="Quick Links" data-string-suggestions="Suggested Searches" data-string-noresults=""> <section class="ac-gn-searchresults-section ac-gn-searchresults-section-defaultlinks"> <div class="ac-gn-searchresults-section-wrapper"> <div class="search-group-checkbox hidden"><input id="group-input" type="checkbox" name="group-filter" checked>Only search within “<span id="group-search-label"></span>”</div> <h3 class="ac-gn-searchresults-header ac-gn-searchresults-animated">Quick Links</h3> <ul class="ac-gn-searchresults-list" id="defaultlinks" role="listbox"> </ul> <span role="status" class="ac-gn-searchresults-count" aria-live="polite">5 Quick Links</span> </div> </section> </aside> </div> <button id="ac-gn-searchview-close" class="ac-gn-searchview-close" aria-label="Cancel Search"> <span class="ac-gn-searchview-close-wrapper"> <span class="ac-gn-searchview-close-left"></span> <span class="ac-gn-searchview-close-right"></span> </span> </button> </aside> </div> </nav> <div class="ac-gn-blur"></div> <div id="ac-gn-curtain" class="ac-gn-curtain"></div> <div id="ac-gn-placeholder" class="ac-nav-placeholder"></div> <script src="/assets/scripts/ac-globalnav.built.js?17182448067"></script> <link rel="stylesheet" href="/assets/styles/search.css?17182448067"> <script src="/assets/scripts/search.js?17182448067"></script>  <script> /* RSID: */ var s_account="awdappledeveloper" </script> <script src="/assets/metrics/scripts/analytics.js?072620243"></script> <script> s.pageName= AC && AC.Tracking && AC.Tracking.pageName(); s.channel="www.en.developer" s.channel="www.en.developer"; /************* DO NOT ALTER ANYTHING BELOW THIS LINE ! **************/ var s_code=s.t();if(s_code)document.write(s_code) </script>  <link rel="stylesheet" property="stylesheet" href="/assets/styles/localnav.css" type="text/css" /> <link rel="stylesheet" href="/swift-playgrounds/styles/btnMulti.css" type="text/css" /> <input type="checkbox" id="localnav-menustate" class="localnav-menustate" /> <nav id="localnav" class="localnav localnav-scrim" data-sticky role="navigation"> <div class="localnav-wrapper"> <div class="localnav-background"></div> <div class="localnav-content"> <h2 class="localnav-title"> <a href="/swift-playgrounds/">Swift Playgrounds</a> </h2> <div class="localnav-menu"> <a href="#localnav-menustate" class="localnav-menucta-anchor localnav-menucta-anchor-open" id="localnav-menustate-open"> <span class="localnav-menucta-anchor-label">Open Menu</span> </a> <a href="#" class="localnav-menucta-anchor localnav-menucta-anchor-close" id="localnav-menustate-close"> <span class="localnav-menucta-anchor-label">Close Menu</span> </a> <div class="localnav-menu-tray"> <ul class="localnav-menu-items"> <li class="localnav-menu-item"> <span class="localnav-menu-link current" role="link" aria-disabled="true">Overview</span> </li> <li class="localnav-menu-item"> <a href="/swift-playgrounds/release-notes/" class="localnav-menu-link">Release Notes</a> </li> </ul> </div> <div class="localnav-actions localnav-actions"> <div class="localnav-action localnav-action-menucta" aria-hidden="true"> <label for="localnav-menustate" class="localnav-menucta"> <span class="localnav-menucta-chevron"></span> </label> </div> <div class="localnav-action localnav-action-button"> <div class="button-multi-container"> <a href="#" class="localnav-button button button-compact button-pill button-multi icon icon-chevrondown" id="button-multi-1" aria-haspopup="true" aria-expanded="false">Download </a> <div class="button-multi-content button-multi-content-right button-multi-content-slide" role="menu"> <a href="https://apps.apple.com/app/id908519492" class="button-multi-option" role="menuitem" tabindex="0">Swift Playgrounds for iPad</a> <a href="https://apps.apple.com/app/id1496833156" class="button-multi-option" role="menuitem" tabindex="0">Swift Playgrounds for Mac</a> </div> </div> </div> </div> </div> </div> </div> </nav> <label id="localnav-curtain" for="localnav-menustate"></label> <script src="/assets/scripts/ac-localnav.built.js"></script> <script src="/swift-playgrounds/scripts/btnMulti.js"></script> <main id="main" class="main" role="main"> <section class="section section-hero bg-grad-up"> <div class="section-content"> <div class="row"> <div class="column large-11 large-centered small-12 text-center margin-bottom-small"> <img class="block center" src="/assets/elements/icons/swift-playgrounds/swift-playgrounds-96x96.png" width="96" height="96" alt="" /> <h1 class="typography-headline">Learn to code with <span class="nowrap">Swift Playgrounds</span></h1> <p class="typography-intro"><span class="nowrap">Swift Playgrounds</span> is a revolutionary app for iPad and Mac that helps you learn to code and build apps using Swift, the same powerful language used to create world-class apps for the <span class="nowrap">App Store.</span> Engaging lessons and walkthroughs demonstrate the core concepts of coding and building apps as you write real Swift code in an interactive environment.</p> </div> </div> <div class="row"> <div class="lockup-image-container"> <picture> <source media="(max-width: 1068px)" srcset="/swift-playgrounds/images/hero-mac5-ipad-medium_2x.webp" type="image/webp" /> <source media="(max-width: 1068px)" srcset="/swift-playgrounds/images/hero-mac5-ipad-medium_2x.png" /> <source srcset="/swift-playgrounds/images/hero-mac5-ipad-large_2x.webp" type="image/webp" /> <img src="/swift-playgrounds/images/hero-mac5-ipad-large_2x.png" width="100%" class="hero-image" alt="Mac and iPad using Swift Playground’s interactive code lessons." /> </picture> </div> </div> </div> </section> <section class="section section-learn-and-explore bg-light"> <div class="section-content"> <div class="row"> <div class="column large-9 small-12 large-centered"> <h2>Learn and explore</h2> <p>In <span class="nowrap">Swift Playgrounds,</span> a single line of code can make amazing things happen. You’ll start with small programs called “playgrounds” to learn the basics. Interactive lessons teach key coding concepts, and additional challenges encourage you to explore code in exciting new ways. When you’re ready, you can start coding with SwiftUI, a modern, powerful framework for making great-looking apps. The results of your code appear instantly as you type, making learning to code even easier. And when you’re done, it’s easy to share your creations with friends, or even submit your app to <span class="nowrap"><a href="/app-store-connect/">App Store Connect</a>.</span></p> </div> <div class="ipad-image-container"> <picture> <source media="(max-width: 1068px)" srcset="/swift-playgrounds/images/screen-learn-explore-medium_2x.webp" type="image/webp" /> <source media="(max-width: 1068px)" srcset="/swift-playgrounds/images/screen-learn-explore-medium_2x.png" /> <source srcset="/swift-playgrounds/images/screen-learn-explore-large_2x.webp" type="image/webp" /> <img src="/swift-playgrounds/images/screen-learn-explore-large_2x.png" width="100%" alt="iPad using Swift Playgrounds." /> </picture> </div> </div> </div> </section> <section class="section section-coding-concepts"> <div class="section-content"> <div class="row"> <div class="column large-9 small-12 large-centered"> <h2>Coding concepts</h2> <p><span class="nowrap">Swift Playgrounds</span> includes interactive lessons that use puzzles and experimentation to teach the following core coding concepts, and more:</p> <div class="grid-box margin-top"> <div class="row"> <img src="/swift-playgrounds/images/code-icons/commands.svg" width="100%" class="code-icon align-self-center" alt="" /> <span>Commands</span> </div> <div class="row"> <img src="/swift-playgrounds/images/code-icons/loops.svg" width="100%" class="code-icon align-self-center" alt="" /> <span>Loops</span> </div> <div class="row"> <img src="/swift-playgrounds/images/code-icons/operators.svg" width="100%" class="code-icon align-self-center" alt="" /> <span>Operators</span> </div> <div class="row"> <img src="/swift-playgrounds/images/code-icons/functions.svg" width="100%" class="code-icon align-self-center" alt="" /> <span>Functions</span> </div> <div class="row nowrap"> <img src="/swift-playgrounds/images/code-icons/conditional-code.svg" width="100%" class="code-icon align-self-center" alt="" /> <span>Conditional statements</span> </div> <div class="row"> <img src="/swift-playgrounds/images/code-icons/parameters.svg" width="100%" class="code-icon align-self-center" alt="" /> <span>Parameters</span> </div> <div class="row"> <img src="/swift-playgrounds/images/code-icons/types.svg" width="100%" class="code-icon align-self-center" alt="" /> <span>Types</span> </div> <div class="row"> <img src="/swift-playgrounds/images/code-icons/variables.svg" width="100%" class="code-icon align-self-center" alt="" /> <span>Variables</span> </div> <div class="row"> <img src="/swift-playgrounds/images/code-icons/initialization.svg" width="100%" class="code-icon align-self-center" alt="" /> <span>Initialization</span> </div> </div> </div> </div> </div> </section> <section class="section section-swift"> <div class="section-content"> <div class="row"> <div class="column large-9 small-12 large-centered"> <h2>Real Swift. Real frameworks.</h2> <p>The Swift programming language was designed to be approachable enough to be your very first programming language. Swift is also incredibly powerful, used by professional developers to create over half a million apps on the <span class="nowrap">App Store.</span> Using <span class="nowrap">Swift Playgrounds,</span> you’ll be coding within minutes. Even as you become more proficient, you’ll never outgrow Swift.</p> </div> <div class="ipad-image-container"> <picture> <source media="(max-width: 1068px)" srcset="/swift-playgrounds/images/screen-real-swift-medium_2x.webp" type="image/webp" /> <source media="(max-width: 1068px)" srcset="/swift-playgrounds/images/screen-real-swift-medium_2x.png" /> <source srcset="/swift-playgrounds/images/screen-real-swift-large_2x.webp" type="image/webp" /> <img src="/swift-playgrounds/images/screen-real-swift-large_2x.png" width="100%" alt="iPad using Swift Playgrounds." /> </picture> </div> <div class="column large-9 small-12 large-centered margin-top"> <div class="row"> <div> <img src="/assets/elements/icons/swiftui/swiftui-64x64_2x.png" width="100%" class="icon-app" alt="" /> <img src="/assets/elements/icons/metal/metal-64x64_2x.png" width="100%" class="icon-app" alt="" /> <img src="/assets/elements/icons/accelerometer/accelerometer-64x64_2x.png" width="100%" class="icon-app" alt="" /> <img src="/assets/elements/icons/camera/camera-64x64_2x.png" width="100%" class="icon-app" alt="iPad using Swift Playgrounds." /> </div> </div> <div class="row"> <p>With <span class="nowrap">Swift Playgrounds</span> you build apps using SwiftUI, the powerful, modern user interface framework used by developers worldwide to power their app experiences. SwiftUI makes it easy to quickly create elegant app experiences and express your ideas. You can also access key frameworks, such as SpriteKit, Bluetooth, and Metal. Your code can interact directly with the iPad or Mac on which it runs. For instance, on iPad your playgrounds respond to touch gestures and interact with hardware, such as the accelerometer, gyroscope, and camera.</p> <p>With support for Swift Packages, <span class="nowrap">Swift Playgrounds</span> makes it easier than ever to code your creations. Packages are bundles of reusable code that can be created by you or other developers and included in your projects. With the power of packages, you can quickly write code which formats data, queries databases, communicates over a network, and so much more.</p> </div> </div> </div> </div> </section> <section class="section section-experiment"> <div class="section-content"> <div class="row"> <div class="column large-9 small-12 large-centered"> <h2>Experiment with code</h2> <p>Sometimes the best way to learn is to explore on your own, and <span class="nowrap">Swift Playgrounds</span> is a great place to let your imagination run wild. In addition to the guided Get Started with Code lessons, <span class="nowrap">Swift Playgrounds</span> includes many challenges so you can keep coming back to try something new. Some challenges encourage you to play with code to create interesting effects, while others include engrossing puzzles that require all of your coding skills to solve.</p> </div> </div> <div class="ipad-image-container"> <picture> <source media="(max-width: 1068px)" srcset="/swift-playgrounds/images/screen-experiment-medium_2x.webp" type="image/webp" /> <source media="(max-width: 1068px)" srcset="/swift-playgrounds/images/screen-experiment-medium_2x.png" /> <source srcset="/swift-playgrounds/images/screen-experiment-large_2x.webp" type="image/webp" /> <img src="/swift-playgrounds/images/screen-experiment-large_2x.png" width="100%" alt="" /> </picture> </div> <div class="row"> <div class="column large-9 small-12 large-centered"> <p>Additional starting points included in <span class="nowrap">Swift Playgrounds</span> help you create playgrounds from scratch. With access to thousands of APIs in the iOS and macOS SDKs, you can create amazing playgrounds that explore the web, generate 3D worlds, experiment with physics, and much more.</p> <p><span class="nowrap">Swift Playgrounds</span> includes the App Gallery to demonstrate common app concepts such as tabbed navigation and downloading data. Guided walkthroughs show you interesting and relevant areas of code and help you learn about the powerful SDKs involved. You can also create your own apps with multiple Swift files, along with image and audio assets, and leverage the ecosystem of thousands of existing Swift packages. Send your app projects to friends and collaborate to bring your creations to life.</p> </div> </div> </div> </section> <section class="section section-touch bg-light"> <div class="section-content margin-bottom"> <div class="row"> <div class="column large-9 small-12 large-centered no-padding-bottom"> <h2>Built for touch</h2> <p><span class="nowrap">Swift Playgrounds</span> offers tools to make coding easier and reduce mistakes. On iPad, you can take advantage of touch to create entire programs with only a few taps on the screen. <span class="nowrap">Swift Playgrounds</span> helps you write correct code by identifying mistakes as you type and offering suggestions to help correct the errors.</p> </div> </div> </div> <div id="gallery-fade" data-analytics-gallery-id="gallery-fade" aria-label="gallery-fade" class="gallery"> <div class="tablist-wrapper"> <div data-analytics-gallery-interaction-type="dotnav" class="dotnav"> <ul role="tablist" class="dotnav-items"> <li role="presentation"> <a href="#gallery-fade-item-1" id="gallery-fade-item-1-trigger" data-ac-gallery-trigger="gallery-fade-item-1" class="dotnav-item" aria-labelledby="figure-1"><span class="visuallyhidden">Item 1</span></a> </li> <li role="presentation"> <a href="#gallery-fade-item-2" id="gallery-fade-item-2-trigger" data-ac-gallery-trigger="gallery-fade-item-2" class="dotnav-item" aria-labelledby="figure-2"><span class="visuallyhidden">Item 2</span></a> </li> <li role="presentation"> <a href="#gallery-fade-item-3" id="gallery-fade-item-3-trigger" data-ac-gallery-trigger="gallery-fade-item-3" class="dotnav-item" aria-labelledby="figure-3"><span class="visuallyhidden">Item 3</span></a> </li> </ul> </div> </div> <div class="item-container"> <div id="gallery-fade-item-1" data-analytics-gallery-item-id="gallery-fade item 1" data-ac-gallery-item="" class="gallery-item"> <figure role="img" class="gallery-image image1"><span>1</span></figure> </div> <div id="gallery-fade-item-2" data-analytics-gallery-item-id="gallery-fade item 2" data-ac-gallery-item="" class="gallery-item"> <figure role="img" class="gallery-image image2"><span>2</span></figure> </div> <div id="gallery-fade-item-3" data-analytics-gallery-item-id="gallery-fade item 3" data-ac-gallery-item="" class="gallery-item"> <figure role="img" class="gallery-image image3"><span>3</span></figure> </div> </div> <div class="gallery-captions-container"> <div class="gallery-caption text-center center" id="my-gallery-caption-1"> <p class="slide-description text-left large-8 small-10 large-centered" id="figure-1"><span class="slide-title">Coding keyboard.</span> When the time comes for typing, enter numbers and symbols commonly used in Swift coding by dragging your finger across a key to select one of the alternate symbols.</p> </div> <div class="gallery-caption text-center center" id="my-gallery-caption-2"> <p class="slide-description text-left large-8 small-10 large-centered" id="figure-2"><span class="slide-title">Inline code completion.</span> Suggestions intelligently present the most likely next commands or values based on context. It’s easy to write entire lines of code with just a few keystrokes.</p> </div> <div class="gallery-caption text-center center" id="my-gallery-caption-3"> <p class="slide-description text-left large-8 small-10 large-centered" id="figure-3"><span class="slide-title">Touch to edit.</span> Tap a color value to display a color picker or tap an image value to choose a photo from your library. You can even restructure your code by simply dragging a brace to wrap around the surrounding code.</p> </div> </div> <div data-analytics-gallery-interaction-type="paddlenav" class="paddlenav paddlenav-framed"> <ul class="paddlenav-container"> <li class="paddlenav-compact paddlenav-left"><button aria-label="Previous" class="paddlenav-arrow paddlenav-arrow-previous"></button></li> <li class="paddlenav-compact paddlenav-right"><button aria-label="Next" class="paddlenav-arrow paddlenav-arrow-next"></button></li> </ul> </div> </div> </section> <section class="section section-shared"> <div class="section-content"> <div class="row"> <div class="column large-9 small-12 large-centered no-padding-bottom"> <h2>Share across devices</h2> <p><span class="nowrap">Swift Playgrounds</span> for Mac is built with <span class="nowrap"><a href="/mac-catalyst/">Mac Catalyst</a>,</span> giving you the ability to edit the exact same code on iPad and Mac. <span class="nowrap">iCloud Drive</span> seamlessly shares your files, and the changes you make on either iPad or Mac immediately appear on your other devices. It’s easy to start a project on iPad and open the file on Mac to keep coding. You can also open app projects in Xcode on Mac for a more advanced editing experience.</p> </div> </div> <div class="row margin-top-small"> <div class="lockup-image-container"> <picture> <source media="(max-width: 1068px)" srcset="/swift-playgrounds/images/lockup-shared-medium_2x.webp" type="image/webp" /> <source media="(max-width: 1068px)" srcset="/swift-playgrounds/images/lockup-shared-medium_2x.png" /> <source srcset="/swift-playgrounds/images/lockup-shared-large_2x.webp" type="image/webp" /> <img src="/swift-playgrounds/images/lockup-shared-large_2x.png" width="100%" alt="Mac and iPad using Swift Playground’s sharing code across devices." /> </picture> </div> </div> </div> </section> </main> <aside class="section developer-router-links"> <div class="section-content"> <div class="row"> <div class="column large-3 medium-6 small-12"> <a href="https://apps.apple.com/us/app/swift-playgrounds/id908519492/" class="block text-center"> <figure class="router-icon router-icon-downloads"></figure> <p><strong>Swift Playgrounds for iPad</strong></p> <p class="typography-subbody">Download the <span class="nowrap">Swift Playgrounds</span> iPad app from the <span class="nowrap">App Store</span> for free.</p> <p class="typography-subbody"> <span class="block-link more">Download now</span> </p> </a> </div> <div class="column large-3 medium-6 small-12"> <a href="https://apps.apple.com/app/id1496833156/" class="block text-center"> <figure class="router-icon router-icon-downloads"></figure> <p><strong>Swift Playgrounds for Mac</strong></p> <p class="typography-subbody">Download the <span class="nowrap">Swift Playgrounds</span> Mac app from the <span class="nowrap">App Store</span> for free.</p> <p class="typography-subbody"> <span class="block-link more">Download now</span> </p> </a> </div> <div class="column large-3 medium-6 small-12"> <a href="/documentation/swift-playgrounds" class="block text-center"> <figure class="router-icon router-icon-document"></figure> <p><strong>Documentation</strong></p> <p class="typography-subbody">Learn to write apps, repurpose sample code, create, and share learning experiences.</p> <p class="typography-subbody"> <span class="block-link more">Learn more</span> </p> </a> </div> <div class="column large-3 medium-6 small-12"> <a href="/forums/tags/swift-playgrounds/" class="block text-center"> <figure class="router-icon router-icon-forum"></figure> <p><strong>Developer Forums</strong></p> <p class="typography-subbody">Ask questions and discuss with Apple experts and other Apple developers.</p> <p class="typography-subbody"> <span class="block-link more">View forums</span> </p> </a> </div> </div> </div> </aside> <link rel="stylesheet" href="/assets/styles/footer.dist.css?17182448067"> <footer id="footer" class="footer" role="contentinfo" aria-labelledby="footer-label"> <div class="footer-content"> <h2 class="footer-label" id="footer-label">Developer Footer</h2> <developer-breadcrumbs> <li><a href="/swift/">Swift</a></li> <li>Swift Playgrounds</li> </developer-breadcrumbs> <nav class="footer-directory" aria-label="Apple Developer Directory" role="navigation">  <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-platform" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-platform"> <h3 class="footer-directory-column-section-title">Platforms</h3> </label> <a href="#footer-directory-column-section-state-platform" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/ios/">iOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/ipados/">iPadOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/macos/">macOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/tvos/">tvOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/visionos/">visionOS</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/watchos/">watchOS</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-tools" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-tools"> <h3 class="footer-directory-column-section-title">Tools</h3> </label> <a href="#footer-directory-column-section-state-tools" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swift/">Swift</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swiftui/">SwiftUI</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/swift-playgrounds/">Swift Playgrounds</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/testflight/">TestFlight</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/xcode/">Xcode</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/xcode-cloud/">Xcode Cloud</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/sf-symbols/">SF Symbols</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-topics" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-topics"> <h3 class="footer-directory-column-section-title">Topics & Technologies</h3> </label> <a href="#footer-directory-column-section-state-topics" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/accessibility/">Accessibility</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/accessories/">Accessories</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-extensions/">App Extensions</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/">App Store</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/audio/">Audio & Video</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/augmented-reality/">Augmented Reality</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/design/">Design</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/distribute/">Distribution</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/education/">Education</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/fonts/">Fonts</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/games/">Games</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/health-fitness/">Health & Fitness</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/in-app-purchase/">In-App Purchase</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/localization/">Localization</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/maps/">Maps & Location</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/machine-learning/">Machine Learning</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://opensource.apple.com">Open Source</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/security/">Security</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/safari/">Safari & Web</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-resources" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-resources"> <h3 class="footer-directory-column-section-title">Resources</h3> </label> <a href="#footer-directory-column-section-state-resources" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/documentation/">Documentation</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/learn/">Tutorials</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/download/">Downloads</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/forums/">Forums</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/videos/">Videos</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-support" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-support"> <h3 class="footer-directory-column-section-title">Support</h3> </label> <a href="#footer-directory-column-section-state-support" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/support/articles/">Support Articles</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/contact/">Contact Us</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/bug-reporting/">Bug Reporting</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/system-status/">System Status</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-account" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-account"> <h3 class="footer-directory-column-section-title">Account</h3> </label> <a href="#footer-directory-column-section-state-account" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/">Apple Developer</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://appstoreconnect.apple.com/">App Store Connect</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/account/ios/certificate/">Certificates, IDs, & Profiles</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://feedbackassistant.apple.com/">Feedback Assistant</a></li> </ul> </div> </div> <div class="footer-directory-column"> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-programs" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-programs"> <h3 class="footer-directory-column-section-title">Programs</h3> </label> <a href="#footer-directory-column-section-state-programs" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/">Apple Developer Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/enterprise/">Apple Developer Enterprise Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/small-business-program/">App Store Small Business Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="https://mfi.apple.com/">MFi Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/news-partner/">News Partner Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/video-partner/">Video Partner Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/security-bounty/">Security Bounty Program</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/programs/security-research-device/">Security Research Device Program</a></li> </ul> </div> <input class="footer-directory-column-section-state" type="checkbox" id="footer-directory-column-section-state-events" /> <div class="footer-directory-column-section"> <label class="footer-directory-column-section-label" for="footer-directory-column-section-state-events"> <h3 class="footer-directory-column-section-title">Events</h3> </label> <a href="#footer-directory-column-section-state-events" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-open"> <span class="footer-directory-column-section-anchor-label">Open Menu</span> </a> <a href="#" class="footer-directory-column-section-anchor footer-directory-column-section-anchor-close"> <span class="footer-directory-column-section-anchor-label">Close Menu</span> </a> <ul class="footer-directory-column-section-list"> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/events/">Meet with Apple</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/events/developer-centers/">Apple Developer Centers</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/app-store/app-store-awards/">App Store Awards</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/design/awards/">Apple Design Awards</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/academies/">Apple Developer Academies</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/entrepreneur-camp/">Entrepreneur Camp</a></li> <li class="footer-directory-column-section-item"><a class="footer-directory-column-section-link" href="/wwdc/">WWDC</a></li> </ul> </div> </div>  </nav> <section class="footer-mini" vocab="http://schema.org/" typeof="Organization"> <div class="footer-mini-news"> <div class="copy"> Get the <a href="https://apps.apple.com/us/app/apple-developer/id640199958">Apple Developer app</a>. </div> <div class="content"> <div class="color-scheme-toggle" role="radiogroup" tabindex="0" aria-label="Select a color scheme preference"> <label data-color-scheme-option="light"> <input type="radio" value="light" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Light</div> </label> <label data-color-scheme-option="dark"> <input type="radio" value="dark" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Dark</div> </label> <label data-color-scheme-option="auto"> <input type="radio" value="auto" autocomplete="off" onchange="window.setPreferredColorScheme(event.target.value)" /> <div class="text">Auto</div> </label> </div> <script async src="/assets/scripts/color-scheme-toggle.js"></script> </div> </div> <link rel="stylesheet" href="/assets/styles/language-dropdown.css?17182448067"> <div class="language-dropdown dropdown-container legacy-form hidden"> <select class="dropdown" aria-label="Language Dropdown"></select> <span class="dropdown-icon icon icon-chevrondown" aria-hidden="true"></span> </div> <script src="/assets/scripts/language-dropdown.js?17182448067"></script> <div class="footer-mini-legal"> <div class="footer-mini-legal-copyright">Copyright © 2024 <a href="https://www.apple.com">Apple Inc.</a> All rights reserved.</div> <div class="footer-mini-legal-links"> <a class="footer-mini-legal-link" href="https://www.apple.com/legal/internet-services/terms/site.html" class="first">Terms of Use</a> <a class="footer-mini-legal-link" href="https://www.apple.com/legal/privacy/">Privacy Policy</a> <a class="footer-mini-legal-link" href="/support/terms/">Agreements and Guidelines</a> </div> </div> </section> </div> </footer> <script src="/swift-playgrounds/scripts/gallery.js" type="text/javascript" charset="utf-8"></script> </body> </html>