CINXE.COM

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hotwire Native: Hotwire Native is a web-first framework for building native mobile apps.</title> <meta name="description" content="Hotwire Native unlocks mobile apps for web developers. Build your web views once and deploy them across multiple platforms."> <link rel="canonical" href="https://native.hotwired.dev/"> <link rel="alternate icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png"> <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg"> <link rel="mask-icon" href="/assets/favicon.svg" color="#000000"> <link rel="apple-touch-icon" href="/assets/favicon-196x196.png"> <link rel="preload" href="/assets/fonts/Bitter-Roman.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/assets/fonts/Bitter-Italic.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/assets/fonts/Jost-Roman.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/assets/fonts/Jost-Italic.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/assets/fonts/RobotoMono-Roman.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/assets/fonts/RobotoMono-Italic.woff2" as="font" type="font/woff2" crossorigin> <link rel="stylesheet" href="/assets/main.css"> <script src="/assets/main.js" type="module"></script> <script defer data-domain="native.hotwired.dev" src="https://plausible.io/js/script.js"></script> </head> <body> <a class="nav-skip" href="#content">Skip to content</a> <nav class="jump"> <ul class="jump__list"> <li><a class="jump__list-link jump__list-link--hotwire" href="https://hotwired.dev">Hotwire</a></li> <li><a class="jump__list-link hover:color-brand-turbo" href="https://turbo.hotwired.dev">Turbo</a></li> <li><a class="jump__list-link hover:color-brand-stimulus" href="https://stimulus.hotwired.dev">Stimulus</a></li> <li><a class="jump__list-link hover:color-brand-turbo jump__list-link--active" href="https://native.hotwired.dev">Native</a></li> </ul> </nav> <header class="page-header"> <a class="nav-logo" href="/" aria-label="Hotwire Native"> <svg class="logo" width="290" height="60" viewBox="0 0 290 60" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_75_1510)"> <path d="M79.2359 6.19995L70.9399 53.8H83.4859L87.3279 31.734L99.6019 53.8H109.496L117.792 6.19995H105.246L101.37 28.368L89.0619 6.19995H79.2359Z" fill="black"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M112.316 53.8L135.742 6.19995H148.322L155.19 53.8H141.556L140.808 47.952H128.704L125.848 53.8H112.316ZM133.09 38.398H139.856L138.632 26.43L133.09 38.398Z" fill="black"/> <path d="M169.378 18.032L163.122 53.8H176.654L182.91 18.032H193.824L195.864 6.19995H160.504L158.464 18.032H169.378Z" fill="black"/> <path d="M191.178 53.8L199.474 6.19995H213.006L204.71 53.8H191.178Z" fill="black"/> <path d="M215.916 6.19995L223.26 53.8H233.732L257.464 6.19995H243.728L232.338 32.856L229.754 6.19995H215.916Z" fill="black"/> <path d="M260.22 6.19995L251.924 53.8H282.49L284.394 42.852H267.36L268.788 34.658H281.674L283.442 24.492H270.556L271.848 17.148H288.372L290.276 6.19995H260.22Z" fill="black"/> <path d="M60 50.852C60 50.3122 59.7835 49.7936 59.389 49.425C55.084 45.4031 49.8687 42.2528 44.0501 40.288C43.5744 40.1274 43.1945 40.7059 43.504 41.1013C47.458 46.1537 49.9206 52.7203 51.4118 59.2141C51.5171 59.6724 51.923 60.0001 52.3932 60.0001H58C59.1046 60.0001 60 59.1046 60 58.0001V50.852Z" fill="#C18BF4"/> <path d="M43.9965 60C44.6129 60 45.083 59.4476 44.9753 58.8407C43.6865 51.578 41.4054 44.5095 37.5067 39.1855C37.2072 38.7766 36.7538 38.5096 36.252 38.4385C34.2142 38.1497 32.1267 38 30 38C27.8733 38 25.7858 38.1497 23.748 38.4385C23.2462 38.5096 22.7928 38.7766 22.4933 39.1855C18.5946 44.5095 16.3135 51.578 15.0247 58.8407C14.917 59.4476 15.3871 60 16.0035 60H43.9965Z" fill="#C18BF4"/> <path d="M8.5882 59.2141C8.48295 59.6724 8.07703 60.0001 7.60682 60.0001H2C0.895432 60.0001 0 59.1046 0 58.0001V50.852C0 50.3122 0.216551 49.7936 0.61102 49.425C4.91604 45.4031 10.1313 42.2528 15.9499 40.288C16.4256 40.1274 16.8055 40.7059 16.4961 41.1013C12.542 46.1537 10.0795 52.7203 8.5882 59.2141Z" fill="#C18BF4"/> <path d="M37.9182 30.6004C38.2232 30.6471 38.5 30.4124 38.5 30.1038V20C38.5 19.1716 37.8284 18.5 37 18.5H23C22.1716 18.5 21.5 19.1716 21.5 20V30.1038C21.5 30.4124 21.7768 30.6471 22.0818 30.6004C24.6631 30.2052 27.308 30 30 30C32.692 30 35.3369 30.2052 37.9182 30.6004Z" fill="#C18BF4"/> <path d="M27 0C27.5523 0 28 0.447715 28 1V5C28 6.10457 28.8954 7 30 7C31.1046 7 32 6.10457 32 5V1C32 0.447715 32.4477 0 33 0H42.8723C43.274 0 43.5117 0.44992 43.2853 0.781811L39.348 6.55227C38.7254 7.46467 38.9604 8.70901 39.8728 9.33157C40.7852 9.95413 42.0295 9.71916 42.6521 8.80675L48.2145 0.654568C48.494 0.245008 48.9578 0 49.4536 0H58C59.1046 0 60 0.895431 60 2V4.72811C60 5.07166 59.8236 5.39117 59.5329 5.57426L47.2546 13.3076C46.32 13.8963 46.0395 15.1312 46.6282 16.0658C47.2168 17.0004 48.4517 17.2809 49.3864 16.6922L59.2335 10.4901C59.5665 10.2804 60 10.5197 60 10.9132V22C60 22.5523 59.5523 23 59 23H51C49.8954 23 49 23.8954 49 25C49 26.1046 49.8954 27 51 27H59C59.5523 27 60 27.4477 60 28V37.6469C60 38.4621 59.0732 38.9399 58.3937 38.4894C54.1069 35.6473 49.3393 33.4325 44.2389 31.9787C43.8039 31.8548 43.5 31.4598 43.5 31.0075V20C43.5 16.4101 40.5899 13.5 37 13.5H23C19.4101 13.5 16.5 16.4101 16.5 20V31.0075C16.5 31.4598 16.1961 31.8548 15.7611 31.9787C10.6607 33.4325 5.89308 35.6473 1.60631 38.4894C0.926837 38.9399 0 38.4621 0 37.6469V28C0 27.4477 0.447715 27 1 27H9C10.1046 27 11 26.1046 11 25C11 23.8954 10.1046 23 9 23H1C0.447715 23 0 22.5523 0 22V10.9133C0 10.5198 0.43351 10.2805 0.766469 10.4902L10.6136 16.6923C11.5483 17.281 12.7832 17.0005 13.3718 16.0659C13.9605 15.1312 13.68 13.8964 12.7454 13.3077L0.467061 5.57434C0.17636 5.39125 0 5.07175 0 4.72819V2C0 0.895432 0.895431 0 2 0H10.5465C11.0423 0 11.5061 0.245008 11.7855 0.654568L17.3479 8.80675C17.9705 9.71916 19.2148 9.95413 20.1272 9.33157C21.0397 8.70901 21.2746 7.46467 20.6521 6.55226L16.7148 0.781811C16.4883 0.44992 16.726 0 17.1278 0H27Z" fill="#C18BF4"/> </g> <defs> <clipPath id="clip0_75_1510"> <rect width="290" height="60" fill="white"/> </clipPath> </defs> </svg> </a> <input type="checkbox" id="hamburger" class="nav-checkbox"/> <label class="nav-mobile-button" for="hamburger"><span></span> Menu</label> <nav class="nav"> <label class="nav-mobile-button nav-mobile-button--close" for="hamburger"><span></span> close</label> <ul class="nav__list nav__list--horizontal"> <li> <a class="nav__list-link" href="/overview/how-it-works">Overview</a> <ul class="nav__sublist "><li> <a class="nav__sublist-link" href="/overview/how-it-works">1: How it Works </a> </li><li> <a class="nav__sublist-link" href="/overview/basic-navigation">2: Basic Navigation </a> </li><li> <a class="nav__sublist-link" href="/overview/path-configuration">3: Path Configuration </a> </li><li> <a class="nav__sublist-link" href="/overview/bridge-components">4: Bridge Components </a> </li><li> <a class="nav__sublist-link" href="/overview/native-screens">5: Native Screens </a> </li></ul> </li> <li> <a class="nav__list-link" href="/ios/getting-started">iOS</a> <ul class="nav__sublist "><li> <a class="nav__sublist-link" href="/ios/getting-started">1: Getting Started </a> </li><li> <a class="nav__sublist-link" href="/ios/path-configuration">2: Path Configuration </a> </li><li> <a class="nav__sublist-link" href="/ios/bridge-components">3: Bridge Components </a> </li><li> <a class="nav__sublist-link" href="/ios/native-screens">4: Native Screens </a> </li><li> <a class="nav__sublist-link" href="/ios/configuration">5: Configuration </a> </li><li> <a class="nav__sublist-link" href="/ios/reference">6: Reference </a> </li></ul> </li> <li> <a class="nav__list-link" href="/android/getting-started">Android</a> <ul class="nav__sublist "><li> <a class="nav__sublist-link" href="/android/getting-started">1: Getting Started </a> </li><li> <a class="nav__sublist-link" href="/android/path-configuration">2: Path Configuration </a> </li><li> <a class="nav__sublist-link" href="/android/bridge-components">3: Bridge Components </a> </li><li> <a class="nav__sublist-link" href="/android/native-screens">4: Native Screens </a> </li><li> <a class="nav__sublist-link" href="/android/configuration">5: Configuration </a> </li><li> <a class="nav__sublist-link" href="/android/reference">6: Reference </a> </li></ul> </li> <li> <a class="nav__list-link" href="/reference/navigation">Reference</a> <ul class="nav__sublist "><li> <a class="nav__sublist-link" href="/reference/navigation">Navigation </a> </li><li> <a class="nav__sublist-link" href="/reference/path-configuration">Path Configuration </a> </li><li> <a class="nav__sublist-link" href="/reference/bridge-installation">Bridge Installation </a> </li><li> <a class="nav__sublist-link" href="/reference/bridge-components">Bridge Components </a> </li></ul> </li> <li> <a class="nav__list-link" href="/community/discussions">Community</a> <ul class="nav__sublist "><li> <a class="nav__sublist-link" href="/community/discussions">Discussions & Issues </a> </li></ul> </li> </ul> </nav> </header> <main id="content" class="grid"> <div class="landing-intro grid"> <h1 class="landing-intro__text grid__item grid__item--start-2 grid__item--span-10"> Hotwire Native is a web-first framework for building native mobile apps. </h1> </div> <div class="landing-hero grid__item grid__item--span-12"> <div class="landing-hero__step"> <img src="/assets/native-vs-web.jpg" alt="Native + web"> </div> </div> <div class="landing-versions"> <a class="landing-version button" href="https://github.com/hotwired/hotwire-native-ios/releases/tag/1.1.3"> Current iOS version: <em>1.1.3</em> — released Mar 10, 2025 </a> <a class="landing-version button" href="https://github.com/hotwired/hotwire-native-android/releases/tag/1.1.3"> Current Android version: <em>1.1.3</em> — released Mar 6, 2025 </a> </div> <section class="landing-summary"> <p> Building fully native mobile apps can be a real pain. It often looks like this: <ul> <li>The development process is <b>very slow</b></li> <li><b>Large teams</b> of specialized developers are required</li> <li>Each feature must be <b>re-implemented</b> across every platform</li> <li>Every update needs to wind its way through the app store <b>review process</b></li> </ul> </p> <p> <b>Hotwire Native</b> provides an answer to all of these drawbacks with its web-first approach.</b> The framework enables you to build your screens once, in HTML and CSS, and reuse them across every platform. If you already have a <a href="https://hotwired.dev">Hotwire</a> web app, you can use the screens you've already built! </p> <p> It unlocks bug fixes and new features without having to go through app store review. And you have full access to underlying iOS and Android SDKs and APIs as soon as they are released. </p> <p> Small teams can build highly functional, beautiful, and sustainable mobile apps. All without the headache and rigmarole of traditional native development. </p> <p> Hotwire Native is a high-level native framework, available for iOS and Android, that provides you with all the tools you need to leverage your web app and build great mobile apps. It wraps a web view within a native shell and renders HTML from your server. Native navigation and transition animations between screens work automatically out-of-the-box. </p> <p> And for times when the web's not enough, you can upgrade with <a href="/overview/bridge-components">Bridge Components</a> or <a href="/overview/native-screens">fully native screens</a>. </p> <p> Learn <a href="/overview/how-it-works">how it works</a> or get started with an <a href="/ios/getting-started">iOS</a> or <a href="/android/getting-started">Android</a> app. </p> </section> <div class="landing-actions"> <a class="landing-actions__item" href="/overview/how-it-works"> <div class="landing-actions__icon landing-actions__icon--guide" aria-hidden="true"></div> Overview </a> <a class="landing-actions__item" href="/ios/getting-started"> <div class="landing-actions__icon landing-actions__icon--apple" aria-hidden="true"></div> Build an iOS app </a> <a class="landing-actions__item" href="/android/getting-started"> <div class="landing-actions__icon landing-actions__icon--android" aria-hidden="true"></div> Build an Android app </a> </div> <p style="text-align: center; margin-top: 30px"> <a href="https://world.hey.com/hotwired">Subscribe to project updates over email</a>. </p> </main> <footer class="page-footer"> <footer class="footer"> <p class="footer__headline">Brought to you by the makers of:</p> <ul class="footer__links"> <li><a href="https://basecamp.com" target="_blank" rel="noopener"><img width="145" height="32" src="/assets/logo-basecamp.svg" alt="Basecamp"></a></li> <li><a href="https://hey.com" target="_blank" rel="noopener"><img width="123" height="57" src="/assets/logo-hey.svg" alt="HEY"></a></li> <li><a href="https://once.com" target="_blank" rel="noopener"><img width="72" height="72" src="/assets/logo-once.svg" alt="ONCE"></a></li> </ul> <p class="footer__copyright">© 2025 <a href="https://37signals.com" target="_blank" rel="noopener">37signals</a></p> </footer> </footer> </body> </html>