See how Capacitor fits into the entire Ionic Ecosystem ->

Cordova to Capacitor Migration

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

Get Started

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.

Cordova Camera
Capacitor Camera
import { Camera } from '@ionic-native/camera/ngx';

constructor(private camera: Camera) {}

const photo = await{
  quality: 100,
  allowEdit: true,
  saveToPhotoAlbum: 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
npx @capacitor/cli plugin:generate

More Resources

Explore these resources to learn more about Capacitor
and make your Cordova migration easier.