How to Build a Mobile App with Hotwire

In this blog we will discuss about How to Build a Mobile App with Hotwire.

Introduction

Hotwire is a web framework that reduces the need for JavaScript by sending updated HTML from the server to the browser.

It uses tools like Turbo for navigation and updates, and Stimulus for small JavaScript features.

Turbo Native integrates web views with native navigation, enabling mobile apps to reuse web pages while maintaining a native look and feel.

What is Hotwire?

Hotwire is a framework that helps build modern web and mobile apps without writing a lot of JavaScript.

Instead of making the browser do most of the work, it shifts more work to the server.

When something changes, the server sends ready-to-use HTML to the browser or app, instead of raw data like JSON that needs extra processing with JavaScript.

How Does It Work?

Hotwire consists of three main below mention tools:

Turbo:

Handles page navigation and real-time updates.

a) Instead of fully reloading the page, Turbo can replace just the parts of the page that need updating, making it fast and smooth.

b) For example, when you click a link or submit a form, Turbo updates the page instantly without reloading.

Stimulus:

Stimulus is a small JavaScript library that adds interactive features to your app, like expanding menus, showing popups, or handling button clicks.

It helps you keep your JavaScript simple and organized by connecting small behaviors to your HTML.

Strada (Experimental):

In Hotwire Strada is a tools that connects web apps with native apps.

It lets web pages talk to native app features, like accessing the camera or sending notifications, so you can combine the best of web and native functionality.

Why we use Hotwire ?

Below is the some reason why we use Hotwire to develop iOS and Android apps.

Seamless Integration:

Hotwire allows you to integrate web content (like HTML) with native app features, making it easier to combine the performance and feel of a native app with the flexibility of web content.

Faster Updates:

Hotwire sends ready-to-use HTML from the server to the app, so the app can get real-time updates without extra work on the client side. This keeps the app fast and up-to-date.

Reduced Complexity:

Hotwire makes app development easier by reducing the need for complex JavaScript. This means you don’t have to worry about managing complicated code or APIs for the user interface.

Better Performance:

With Hotwire, the app loads content faster because the server does most of the work, which lightens the load on the device and improves the user experience.

Reuse Web Pages:

Hotwire allows you to reuse existing web pages in a mobile app, reducing the need to duplicate effort by rebuilding web-based content from scratch for mobile platforms.

Hotwire for iOS and Android

On mobile platforms, Hotwire works with Turbo Native, which integrates web views for content with native navigation.

This hybrid approach allows developers to:

Reuse existing web pages in mobile apps without rebuilding them from scratch.

Provide a native-like user experience with smooth navigation and performance.

Hotwire Example for iOS

Please follow below mention steps to create app using Hotwire in iOS.

Add Hotwire dependency in your iOS Project:

Add Hotwire dependency to your iOS project:

First, you need to add the Hotwire package dependency to your iOS project. Follow these steps:

Go to File → Add Packages Dependencies in Xcode.
Enter the following URL in the search field:
https://github.com/hotwired/hotwire-native-ios
Ensure your project is correctly selected under Add to Project, then click Add Package.

This will integrate the Hotwire Native package into your iOS project.

Set Up the Hotwire Navigator:

Open the SceneDelegate.swift file in your Xcode project and you need to add below mention code in SceneDelegate.swift file.

import HotwireNative
import UIKit

let rootURL = URL(string: "https://wpdev.vachak.com/themes/mobikul/")!

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    var window: UIWindow?

    private let navigator = Navigator()

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        window?.rootViewController = navigator.rootViewController
        navigator.route(rootURL)
    }
}

import HotwireNative

import UIKit

let rootURL = URL(string: "https://wpdev.vachak.com/themes/mobikul/")!

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

var window: UIWindow?

private let navigator = Navigator()

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {

window?.rootViewController = navigator.rootViewController

navigator.route(rootURL)

}

SceneDelegate:

This file is part of your app’s default structure and handles the app’s UI lifecycle for the window (or scene) that is active at any time.

Build and Run Your App:

Once you have replaced the content of the SceneDelegate file, you can build and run your app.

If everything is set up correctly, the app will launch, and the content from the rootURL will be displayed in the app, navigating smoothly between pages and sections using Hotwire Native.

For more knowledge about hotwire with iOS you can check here.

Hotwire with Other Frameworks:

Hotwire can also be implemented in other web frameworks, such as:

Django: Using Django-Turbo-Response to send Turbo Streams.
Node.js: Using Express and server-side rendering to send HTML updates.
Laravel: Using Laravel Turbo to enable Turbo Streams and Turbo Drive.

By handling updates at the server level, Hotwire ensures that client-side JavaScript remains minimal, keeping the application lightweight and responsive.

Output:

Hotwire for iOS

Hotwire for iOS uses the Turbo iOS framework to enable fast, web-native navigation inside an app. It seamlessly integrates web views with native components, improving performance and user experience.

Hotwire Example for Android

Please follow below mention steps to create app using Hotwire in Android.

Add Hotwire dependency in your Android Project:

dependencies {
    implementation("dev.hotwire:core:<updated-version>")
    implementation("dev.hotwire:navigation-fragments:<updated-version>")
}

dependencies {

implementation("dev.hotwire:core:<updated-version>")

implementation("dev.hotwire:navigation-fragments:<updated-version>")

}

dev.hotwire:core → Provides core Turbo functionalities for efficient web content loading.
dev.hotwire:navigation-fragments → Supports Turbo Navigation with Jetpack Navigation and Fragments.

After that below mention XML code defines the layout for the main activity in an Android app that uses Hotwire Turbo Native for navigation.

<?xml version="1.0" encoding="utf-8"?>
<androidx.fragment.app.FragmentContainerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/main_nav_host"
    android:name="dev.hotwire.navigation.navigator.NavigatorHost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="false" />

<?xml version="1.0" encoding="utf-8"?>

<androidx.fragment.app.FragmentContainerView

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/main_nav_host"

android:name="dev.hotwire.navigation.navigator.NavigatorHost"

android:layout_width="match_parent"

android:layout_height="match_parent"

app:defaultNavHost="false" />

FragmentContainerView
- A container to host fragments dynamically in the activity.
- It is the recommended replacement for fragment tag in newer Android versions.
android:id="@+id/main_nav_host"
- Assigns an ID to the FragmentContainerView, which is used to manage navigation dynamically.
android:name="dev.hotwire.navigation.navigator.NavigatorHost"
- Specifies that this container will use Hotwire’s NavigatorHost, which is responsible for handling Turbo-based navigation.
android:layout_width="match_parent" & android:layout_height="match_parent"
- Makes the container take up the full screen.
app:defaultNavHost="false"
- Indicates that this is not the default navigation host.
- If set to true, it would intercept the system back button to navigate within the fragment stack.

Set Up the Hotwire Navigator:

Open the MainActivity.kt file in your project and you need to add below mention code in MainActivity.kt file.

import android.os.Bundle
import dev.hotwire.navigation.activities.HotwireActivity
import dev.hotwire.navigation.navigator.NavigatorConfiguration

class HomeActivity : HotwireActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_home)
    }

    override fun navigatorConfigurations() = listOf(
        NavigatorConfiguration(
            name = "HomeNavigator",
            startLocation = "https://wpdev.vachak.com/themes/mobikul/",
            navigatorHostId = R.id.home_nav_host
        )
    )
}

import android.os.Bundle

import dev.hotwire.navigation.activities.HotwireActivity

import dev.hotwire.navigation.navigator.NavigatorConfiguration

class HomeActivity : HotwireActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_home)

}

override fun navigatorConfigurations() = listOf(

NavigatorConfiguration(

name = "HomeNavigator",

startLocation = "https://wpdev.vachak.com/themes/mobikul/",

navigatorHostId = R.id.home_nav_host

)

}

HomeActivity:HotwireActivity :-

Inherits from HotwireActivity to enable Turbo navigation features.

onCreate() :-

Initializes the activity and sets the layout activity_home.xml.

navigatorConfigurations :-

Hotwire Turbo Native defines the navigation setup for the app. It returns a list of NavigatorConfiguration objects, specifying:

Build and Run Your App:

Once you have added all above Android code, you can build and run your app.

If everything is set up correctly, the app will launch, and the content form the startLocation will be displayed in the app, navigating smoothly between pages and sections using Hotwire Native.

For more knowledge about hotwire with Android you can check here

Android Output:

Hotwire for Android

Hotwire for Android uses the Turbo Android framework to enable fast, web-native navigation inside an app. It integrates WebViews with native components for a smoother user experience.

Hotwire on the Server Side

For Hotwire to work efficiently, the server must be able to respond with HTML fragments instead of JSON. Here’s how Hotwire is implemented on the backend:

Hotwire with Ruby on Rails:

If you’re using Ruby on Rails, you can enable Hotwire with Turbo Streams:

class MessagesController < ApplicationController
  def create
    @message = Message.create!(message_params)
    respond_to do |format|
      format.turbo_stream { render turbo_stream: turbo_stream.append('messages', @message) }
      format.html { redirect_to messages_path }
    end
  end
end

class MessagesController < ApplicationController

def create

@message = Message.create!(message_params)

respond_to do |format|

format.turbo_stream { render turbo_stream: turbo_stream.append('messages', @message) }

format.html { redirect_to messages_path }

end

Conclusion

Hotwire enables efficient hybrid app development by combining Turbo Native for iOS and Android, allowing smooth, native-like navigation with reusable web content.

Its use of server-rendered HTML, real-time updates, and minimal JavaScript reduces complexity and enhances performance for responsive, high-performance apps.

Thanks for reading this article.

You can also check other blogs from here for more knowledge.

For more knowledge about hotwire you can check here.

Suraj Chauhan

Proficient in Flutter and Android Studio, specializing in high-performance Android and iOS app development. Focuses on user-centric designs and seamless functionality to deliver impactful solutions.

20 Feb, 2025
Created by - Suraj Chauhan

. . .

How to Build a Mobile App with Hotwire

Introduction

What is Hotwire?

How Does It Work?

Turbo:

Stimulus:

Strada (Experimental):

Why we use Hotwire ?

Seamless Integration:

Faster Updates:

Reduced Complexity:

Better Performance:

Reuse Web Pages:

Hotwire for iOS and Android

Hotwire Example for iOS

Add Hotwire dependency in your iOS Project:

Set Up the Hotwire Navigator:

SceneDelegate:

Build and Run Your App:

Hotwire with Other Frameworks:

Output:

Hotwire for iOS

Hotwire Example for Android

Add Hotwire dependency in your Android Project:

Set Up the Hotwire Navigator:

HomeActivity:HotwireActivity :-

onCreate() :-

navigatorConfigurations :-

Build and Run Your App:

Android Output:

Hotwire for Android

Hotwire on the Server Side

Hotwire with Ruby on Rails:

Conclusion

Leave a Comment Cancel Reply

Message Sent!