Cordova to Capacitor Migration

A modern development experience and 99% backward-compatibility with Cordova.

Create a new code branch.

Recommended, but not required.

cd my-app
git checkout -b cap-migration

Install Capacitor.

Create the Capacitor app using the Cordova app's name and id found in `config.xml`.

npm install @capacitor/cli @capacitor/core
npx cap init [name] [id]

Build the Web App.

The compiled web assets will be copied into each Capacitor native platform during the next step.

# Most web apps
npm run build

# Ionic app
ionic build

Install the native platforms you want to target.

Capacitor native projects exist in their own top-level folders and should be considered part of your app (check them into source control). Any existing Cordova plugins are automatically installed into each native project. 🎉

npx cap add android
npx cap add ios

Recreate Splash Screens and Icons.

Reuse the existing splash screen/icon images, located in the top-level `resources` folder of your Cordova project, using the `cordova-res` tool. Images are copied into each native project.

npm install -g cordova-res

cordova-res ios --skip-config --copy
cordova-res android --skip-config --copy

Audit existing Cordova plugins.

Review all of Capacitor's core and community plugins. You may be able to switch to the Capacitor-equivalent Cordova plugin, such as the Camera.

Remove unneeded ones to improve performance and reduce app size.

import { Camera } from '@ionic-native/camera/ngx';
constructor(private camera: Camera) {}
const photo = await this.camera.getPicture({
  quality: 100,
  destinationType: this.camera.DestinationType.FILE_URI,
  allowEdit: true,
  saveToPhotoAlbum: true
import { Camera } from '@capacitor/camera';
const photo = await Camera.getPhoto({
  quality: 100,
  resultType: CameraResultType.Uri,
  allowEditing: true,
  saveToGallery: true

Remove Cordova from your project.

After successful migration testing, Cordova can be removed from the project.

# Remove a Cordova plugin
npm uninstall cordova-plugin-name
npx cap sync

# Delete Cordova folders and files
rm config.xml
rm -R platforms/
rm -R plugins/

Continue your Capacitor Journey.

This is only the beginning. Learn more about using Cordova plugins in a Capacitor project, check out the Capacitor development workflow, or create your own native plugin.

# Install a Cordova plugin
npm install cordova-plugin-name
npx cap sync

# Create a custom plugin
npm init @capacitor/plugin

Installation Guide →

Install Capacitor and learn how to start building with it

Explore Native Plugins →

Explore Native Plugins that are available to all Capacitor apps