Capacitor is an open-source native runtime created by Ionic that enables developers to build cross-platform mobile applications using web technologies (JavaScript, HTML, CSS) and deploy them to iOS, Android, and the web. Unlike its predecessor Cordova, Capacitor treats the native project as a first-class citizen, embedding a standard WebView inside a native shell while providing a modern bridge architecture for seamless web-to-native communication. The runtime exposes a rich plugin system that wraps native device features like camera, filesystem, and geolocation through a unified JavaScript API, eliminating the need to write platform-specific code for common operations. A key mental model: Capacitor doesn't replace native code—it layers web capabilities on top, allowing developers to progressively enhance their apps with native functionality as needed while maintaining a single codebase across platforms.
What This Cheat Sheet Covers
This topic spans 18 focused tables and 178 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
Table 1: Core Architecture and Runtime Concepts
| Concept | Example | Description |
|---|---|---|
CapacitorBridge.postMessage(data) | • JavaScript-to-native communication layer using message passing • routes plugin calls from WebView to native code and returns results asynchronously via promises | |
WKWebView (iOS), WebView (Android) | • Standard platform webview component that hosts the web application • runs JavaScript engine and renders HTML/CSS content using native browser capabilities | |
ios/App.xcworkspace, android/app | • First-class native application project created during setup • developers own and can modify directly in Xcode/Android Studio for custom native functionality | |
import { Camera } from '@capacitor/camera' | • Modular architecture for exposing native device APIs to JavaScript • plugins register methods that the bridge routes to platform-specific implementations |