# Mobile App

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

Dyad has experimental support for mobile apps. Please [report bugs](/content/docs/help#report-bug/index.html).

If you've built your app in Dyad using the [default React/Vite.js template](/content/docs/templates#react-default/index.html), 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?](/content/docs/guides/mobile-app#should-you-build-a-mobile-app/index.html)

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](/content/docs/guides/mobile-app#benefits/index.html)

- **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](/content/docs/guides/mobile-app#drawbacks/index.html)

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](/content/docs/getting-started/publishing-your-app/index.html)). 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](/content/docs/guides/mobile-app#recommendation/index.html)

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](/content/docs/guides/mobile-app#how-to/index.html)

If you're using the [default React/Vite.js template](/content/docs/templates#react-default/index.html), you can upgrade your app into a hybrid mobile app with [Capacitor](https://capacitorjs.com/), a popular open-source framework for cross-platform development.

### [Upgrade your app](/content/docs/guides/mobile-app#upgrade-your-app/index.html)

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](https://capacitorjs.com/docs/getting-started#add-capacitor-to-your-web-app) to your app.

### [Install IDEs](/content/docs/guides/mobile-app#install-ides/index.html)

- For Android apps, install [Android Studio](https://developer.android.com/studio).
- For iOS apps, install [Xcode](https://developer.apple.com/xcode/) (Xcode runs only on macOS).

### [Open your mobile app in the IDE](/content/docs/guides/mobile-app#open-your-mobile-app-in-the-ide/index.html)

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](https://capacitorjs.com/docs/ios#running-in-xcode).
- For Android, follow Capacitor’s [Android Studio guide](https://capacitorjs.com/docs/android#running-with-android-studio).

For iOS builds, you can also explore Capgo’s [cloud build option for Capacitor iOS apps](https://capgo.app/docs/cli/cloud-build/ios/) if you prefer using a remote build service.

## [Troubleshooting](/content/docs/guides/mobile-app#troubleshooting/index.html)

As you build your mobile app, refer to [Capacitor’s documentation](https://capacitorjs.com/docs). If you run into issues while using Xcode or Android Studio, see their respective troubleshooting pages for [Android](https://capacitorjs.com/docs/android/troubleshooting) and [iOS](https://capacitorjs.com/docs/ios/troubleshooting).