Capacitor

An open-source native runtime from the Ionic team that allows web applications to run as native mobile apps with access to device APIs.

Category: Mobile Development (also: Front End)

Author: Atomic Glue Editorial Team

## Definition

Capacitor is an open-source native container for building mobile apps with web technologies. Created by the Ionic team (and now managed as an open-source project), Capacitor serves as the modern successor to Apache Cordova. It wraps a web application (HTML, CSS, JavaScript) in a native WebView and provides a plugin API for accessing native device features like camera, GPS, biometrics, storage, and file system. Unlike Cordova, Capacitor is designed to work with any modern web framework (React, Vue, Angular, Svelte) and provides first-class native project integration with Xcode and Android Studio.

## Capacitor vs Cordova

Capacitor improves on Cordova in several key ways. **Native project files**: Capacitor generates real Xcode and Android Studio project files, so you can use native build tools, simulators, and debugging directly. Cordova generates project files into a build directory, making native debugging harder. **Plugin system**: Capacitor plugins are modern Swift (iOS) and Kotlin (Android) modules with TypeScript interfaces. Cordova plugins are JavaScript with platform implementations that feel outdated. **Standard web APIs**: Capacitor encourages using standard web APIs first (Camera, Geolocation) and only using native plugins when web APIs are insufficient. **Updating**: Capacitor updates by updating an npm package; Cordova requires platform removal and re-add.

## Integration with Modern Frameworks

Capacitor is framework-agnostic. You can use it with React, Vue, Angular, Svelte, or vanilla HTML/JS. The Ionic Framework provides pre-built UI components that look native on iOS and Android, but it's optional. You can build a Capacitor app with Tailwind CSS and your own UI. Capacitor's web-native philosophy means your app runs as a website during development and becomes a mobile app when you run `npx cap copy` to copy web assets to the native project.

## Plugin Ecosystem

Capacitor provides official plugins for the most common native features: Camera, Geolocation, Filesystem, Share, Push Notifications, Local Notifications, Storage, Preferences, Splash Screen, Status Bar, Haptics, and more. Community plugins add Bluetooth, NFC, Health Kit, Google Sign-In, Firebase integrations, and hundreds more. If a plugin doesn't exist, you can write one using Swift (iOS) and Kotlin (Android) and expose it to JavaScript with TypeScript types.

## In code

// Using Capacitor Camera plugin
import { Camera, CameraResultType } from '@capacitor/camera';

async function takePicture() {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  // image.webPath contains the photo URL for display
  return image.webPath;
}

## Common questions

Q: Can I use Capacitor without Ionic?

A: Yes. Capacitor is framework-agnostic. Ionic UI components are optional. You can use React, Vue, Svelte, or any web framework.

Q: Is Capacitor production-ready?

A: Yes. Capacitor is used in production by apps like Microsoft Teams, Burger King, and thousands of others. It's actively maintained and has strong community support.

## Key takeaways

• Capacitor wraps web apps in a native container with device API access.
• Modern successor to Cordova with better native tooling and a cleaner plugin system.
• Framework-agnostic works with React, Vue, Angular, Svelte, or vanilla JS.
• Generates real Xcode and Android Studio projects for native debugging.
• Official plugins cover the most common native features out of the box.

## Related entries

• [Hybrid App](atomicglue.co/glossary/hybrid-app)
• [Progressive Web App (PWA)](atomicglue.co/glossary/progressive-web-app-pwa-front-end)
• [React Native](atomicglue.co/glossary/react-native)

Last updated June 2025. Permalink: atomicglue.co/glossary/capacitor