https://capacitorjs.com/

 

A free virtual conference dedicated to innovative tech leaders
looking to transform their businesses.

Register now ->
 
Ionic is hiringJoin the Capacitor team
[                    ]
DocsPluginsCLI
 
[                    ]
CommunityBlogEnterprise
EnglishRi Ben Yu 
  Install
 
Blog
Announcing Capacitor 3.0 ->
Capacitor 3.0 ->

A cross-platform native runtime for web apps.

Capacitor is an open source native runtime for building Web Native
apps. Create cross-platform iOS, Android, and Progressive Web Apps
with JavaScript, HTML, and CSS.

Install Capacitor ->Explore Plugins
Migrate from Cordova ->apple, android and pwa icons
layered stack of phone app showing capacitor in the middle

Get started easily.

^01

Drop Capacitor into any existing web app.

npm install @capacitor/cli @capacitor/core
npx cap init

^02

Install the native platforms you want to target.

apple iconandroid icon

npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

^03

Access core Native APIs or extend with your own.

Capacitor's native plugin APIs make it extremely easy to access and
invoke common device functionality across multiple platforms.

NotificationsGeolocationCameraCustom

import { LocalNotifications } from '@capacitor/local-notifications';

LocalNotifications.schedule({
  notifications: [
    {
      title: "On sale",
      body: "Widgets are 10% off. Act fast!",
      id: 1,
      schedule: { at: new Date(Date.now() + 1000 * 5) },
      sound: null,
      attachments: null,
      actionTypeId: "",
      extra: null
    }
  ]
});

import { Geolocation } from '@capacitor/geolocation';

// get the users current position
const position = await Geolocation.getCurrentPosition();

// grab latitude & longitude
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;

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

// Take a picture or video, or load from the library
const picture = await Camera.getPicture({
  resultType: CameraResultType.Uri
});

import Foundation
import Capacitor

// Custom platform code, easily exposed to your web app
// through Capacitor plugin APIs. Build APIs that work
// across iOS, Android, and the web!
@objc(MyAwesomePlugin)
public class MyAwesomePlugin: CAPPlugin {

  @objc public func doNative(_ call: CAPPluginCall) {
  let alert = UIAlertController(title: "Title", message: "Please Select an Option", preferredStyle: .actionSheet)

  // ....
  }
}

Building Cross-platform Apps with Capacitor

see through tiles
book cover with title reading "Building Cross-platform Apps with
Capacitor"

Ship cross-platform mobile apps 10X faster. We wrote a free guide on
when and why to use Capacitor to build cross-platform apps.

Read the free eBook ->

Connect web apps to native functionality.

triple phone icon

Universal apps

Build web-based applications that run equally well across iOS,
Android, and as Progressive Web Apps.

Cube with sphere inside icon

Native access

Access the full Native SDKs on each platform, and easily deploy to
the App Stores (and the web).

Tripe phone stack layered icon

Native PWAs

Add custom native functionality with a simple Plugin API, or use
existing Cordova plugins with our compatibility layer.

Cross-platform, core native plugins.

Explore APIs->
camera icon

Camera

Capture images, save photos, and configure hardware parameters like
saturation and color balance.

file system icon

File System

Save and read documents, assets, and other content your users need to
access via native file systems.

antenna icon

Geolocation

Gather critical information about a user's device location, such as
latitude and longitude.

spherical rings icon

Accelerometer

Access the device accelerometer sensors to measures changes in
velocity of a device motion.

bell icon

Notifications

Schedule local notifications on the device or handle push
notifications sent from a server.

person with circle around icon

Network

Monitor for network connectivity and capability changes to build
resilient offline apps.

three encompassing circles icon

Haptics

Add physical feedback through haptic features available on modern
devices.

slider adjustment icon

Your Own Plugin

Write your own custom plugins to access specialty features and easily
integrate any 3rd-party SDK.

Bring your own web framework.

Drop Capacitor into any existing web project, framework or library.
Convert an existing React, Svelte, Vue (or your preferred Web
Framework) project to native mobile.

react logo tile
angular logo tile
svelte logo tile
vue logo tile
stencil logo tile
jquery logo tile
bootstrap logo tile
ionic logo tile
material UI logo tile
tailwind logo tile
framework 7 logo tile
quasar logo tile

What people are saying about Capacitor.

Austin Howard Twitter profile picture

Austin Howard

@a_howard8

I'm reallllyyyy digging capacitor 

Angular Twitter profile picture

Angular

@angular

Did you know @capacitorjs shows how to give your #Angular app access
to mobile APIs and a presence in app stores?

Scriptkitty Twitter profile image

scriptkitty

@thr0wsException

I'm pretty hyped to be honest, from what I've seen so far this will
be another major step for establishing web technology as the go-to
method for developing cross platform apps 

Adeniyi Tolulope Twitter profile image

Adeniyi Tolulope

@tolutronics

@capacitorjs has been a great companion this year... with realtime
updates.

Guillermo Rauch twitter profile image

Guillermo Rauch

@rauchg

Amazing that this is @vercel Next.js + @tailwindcss + @capacitorjs 

Carlos Martinez twitter profile image

Carlos Martinez

@cmartineztech

Yes, It works  deep linking and google native authentication in iOS
@capacitorjs

Greg Marine twitter profile image

Greg Marine

@gregmarine

One of the nice things about Capacitor is that you don't have to use
Ionic. I personally love Ionic and use it for UI components. But it
isn't required for Capacitor 

Jacob Clark twitter profile image

Jacob Clark

@imjacobclark

We blogged about how we use Capacitor to build our 4 Children's apps
at the @BBC

Dayana Jabif twitter profile image

Dayana Jabif

@dayujabif

I still can't believe how easy is to turn an @Ionicframework app into
a native iOS app using @capacitorjs 

Leo twitter profile image

Leo

@creativiii

I've tried React Native but coming from web dev the DX is such a step
down. Give @capacitorjs a go if you're building apps 

Tim S Twitter profile picture

Tim S

@tdawgpharaoh

I am asking myself, how did I not hear about @capacitorjs until
recently. Very nice.

Daniel Rodrigues Twitter profile image

Daniel Rodrigues

@inspire_rd

Tried out @capacitorjs soon after it went stable - amazing! Simple &
straight forward.



The Capacitor Community growing. Connect with us and say Hello.

Twitter icon

Follow us on Twitter

Github icon

Star us on GitHub

Chat bubble icon

Join the Forum

Supercharge your app with enterprise-grade solutions.

Raised platforms with app icons

Built for enterprise. Capacitor and Ionic's full ecosystem of
solutions address the performance, security, and deployment needs of
enterprise teams building critical apps.

Learn more ->
Nationwide LogoTarget LogoBurger King LogoHome Depot Logo
NBC LogoMicrosoft LogoAmtrak LogoGE Logo

Ready to start building?

Dive in and create your first Capacitor project today

Get Started ->Explore Plugins ->

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

Join our Newsletter

Keep up to date with all the latest Capacitor news and updates

Capacitor Logo

(c) 2021 Capacitor

Ionic Open Source | Released under MIT License

Developers

  * Install
  * Docs
  * Plugins

Resources

  * Community
  * Blog
  * Discussions

Connect

  * GitHub
  * Twitter
  * Ionic