Capacitor
By Ionic
Capacitor is a native runtime, created by Ionic, that wraps a web application in a native iOS or Android shell and exposes native device APIs such as the camera, filesystem, and push notifications through a JavaScript plugin interface. It…
Definition
Capacitor is a native runtime, created by Ionic, that wraps a web application in a native iOS or Android shell and exposes native device APIs such as the camera, filesystem, and push notifications through a JavaScript plugin interface. It lets developers build a single web-based codebase and ship it as installable native mobile apps alongside a progressive web app, without rewriting the interface in a platform-specific language.
Overview
Capacitor addresses the recurring problem of building and maintaining separate native codebases for iOS, Android, and the web when a team's primary expertise and existing application are built with web technologies. It gives a web app, built with any framework such as React, Vue, or plain HTML and JavaScript, a path to running as a real installable app on phones by embedding it in a native WebView and bridging calls between JavaScript and native platform code. Mechanically, Capacitor generates native Xcode and Android Studio projects that host the web app inside a WebView component, then routes calls to device features through a plugin system: each plugin defines a JavaScript-facing API and a matching native implementation in Swift or Kotlin/Java, so a call like requesting the camera from JavaScript triggers native code that returns the result back across the bridge. Because the native projects are ordinary, editable Xcode and Android Studio projects, developers can add custom native code directly when Capacitor's built-in or community plugins don't cover a needed capability. Capacitor is often compared to Cordova, an older tool with a similar wrap-a-webview approach, and to React Native, which instead renders native UI components rather than a WebView. Compared to Cordova, Capacitor takes a more modern approach with first-class support for native project files and easier custom native code integration; compared to React Native, Capacitor keeps the actual rendered interface as standard web content in a WebView rather than translating UI to native widgets, which trades some rendering performance and native look-and-feel for broader compatibility with existing web codebases and frameworks. In practice, teams use Capacitor to take an existing or new web application and ship it to app stores with minimal additional native development, commonly pairing it with UI frameworks like Ionic's own component library, though it works with any web framework. It is a common choice for teams that want one shared codebase across web, iOS, and Android with a small dedicated native layer for platform-specific features. The main trade-off is that WebView-rendered interfaces generally do not match the performance or exact native feel of frameworks that render true native UI components, which can matter for animation-heavy or graphically demanding apps. Teams also take on responsibility for keeping native plugin dependencies and platform SDK versions current as iOS and Android evolve, and deep platform-specific interactions still require writing native code even though the bulk of the app stays in JavaScript.
Key Features
- Wraps web applications in native iOS and Android shells
- Plugin system bridging JavaScript calls to native device APIs
- Editable native Xcode and Android Studio project output
- Works with any web framework, not tied to one UI library
- Support for building progressive web apps from the same codebase
- Access to camera, filesystem, geolocation, and push notification APIs
- Ability to add custom native plugins for unsupported features