Mobile App

Turn your Dyad web app into a hybrid mobile app using Capacitor

Dyad has experimental support for mobile apps. Please report bugs.

If you've built your app in Dyad using the default React/Vite.js template, you can upgrade it into a hybrid mobile app that runs both on the web and as a native iOS or Android app.

Should you build a mobile app?

While web apps are powerful and easy to deploy, there are cases where distributing your app as a native mobile app makes sense due to the advantages they offer.

Benefits

• Deeper device integration. Native apps can access device features more comprehensively than web apps.
• Push notifications. Send notifications to users even when the app isn't open.
• Offline access. Native apps can provide full functionality without a network connection.

Drawbacks

Despite their advantages, native mobile apps are more complex to build and maintain.

• More complex tooling. While Dyad supports mobile development, you'll need external tools like Android Studio or Xcode for building and testing.
• Cost to publish. Publishing a web app is quick and free (see our publishing guide). In contrast, publishing a mobile app requires paid developer accounts (Apple and Google), and review processes can take time.
• Hardware requirements. Building an iOS app requires a Mac or a remote build service (which typically costs money). You'll also want to test on real devices to catch platform-specific issues.

Recommendation

If you're unsure, we recommend starting with a web app using the default React template. You can always upgrade later to a hybrid mobile app.

If you want a UI that works well on both mobile and desktop devices, you can definitely do this with a web app. Simply chat with Dyad and ask it to make your UI responsive and mobile-friendly.

How to

If you're using the default React/Vite.js template, you can upgrade your app into a hybrid mobile app with Capacitor, a popular open-source framework for cross-platform development.

Upgrade your app

Go to the App Details page by clicking your app name in the top-left corner.

At the bottom of that page, find the Upgrades section. Look for Upgrade to hybrid mobile app with Capacitor and click Upgrade.

If the upgrade doesn't work, you can manually add Capacitor to your app.

Install IDEs

• For Android apps, install Android Studio.
• For iOS apps, install Xcode (Xcode runs only on macOS).

Open your mobile app in the IDE

On the App Details page, you’ll now see two new buttons: Sync and open in Xcode and Sync and open in Android Studio. Click the one that matches your platform (after installing the respective IDE).

• For iOS, follow Capacitor’s Xcode guide.
• For Android, follow Capacitor’s Android Studio guide.

For iOS builds, you can also explore Capgo’s cloud build option for Capacitor iOS apps if you prefer using a remote build service.

Troubleshooting

As you build your mobile app, refer to Capacitor’s documentation. If you run into issues while using Xcode or Android Studio, see their respective troubleshooting pages for Android and iOS.