Today we are incredibly excited to announce the alpha release of a major new open source project: Capacitor.

Capacitor aims to build a better Native runtime for the future of Ionic apps running everywhere: iOS, Android, Electron, and on the web as a Progressive Web App.

Capacitor offers a consistent API that handles operations on the underlying platform in a portable, cross-platform way. That means one app built with Capacitor will work no matter where it runs.

Features of Capacitor

Capacitor has some handy features we’re really excited about:

  • First class Progressive Web App support: use the same APIs you do for native apps on the web for 100% code sharing, including Web UI’s for plugins like Camera!
  • Simple Plugin model for building reusable plugins or quickly adding custom native code
  • Embraces Swift on iOS for maximum compatibility with existing iOS developer ecosystem
  • A rich standard library of Native features with simple APIs, such as Filesystem access, Haptic feedback, Background tasks, and more.
  • Treats your native project as a source artifact, making it easy to add custom native code and install SDKs that require native modifications, as well as sharing native work with existing native developer teams (if desired).
  • Drops into any existing modern frontend project
  • Has no global CLI, so versions of Capacitor are easily managed per-app
  • Plugins are managed through npm install.
  • Support for many Cordova plugins (and improving all the time).

That’s a long way of saying there’s some cool features in Capacitor we think Ionic developers will appreciate.

Why We’re Building Capacitor

As Ionic has grown, we’re increasingly helping teams at fast growing startups and the Fortune 1000 with problems beyond just the core Ionic Framework UI components they are using. These teams expect that we can help them with other mobile challenges, and highest on their list is almost universally better native support and plugins.

It was no longer good enough for us to push off the responsibility of native plugins and functionality to the community. We knew we had to take responsibility for that part of the stack if we wanted to provide a level of service that our customers expected, and a developer experience that led in the mobile market.

Capacitor is our effort to do just that.

Since we released Ionic in 2014, we’ve been building a laundry list of things we’d love to see at the native layer to really take Ionic apps to the next level. We finally got sick of talking about it and decided to build it.

Improving on Cordova

The goal of Capacitor is provide an alternative to Cordova for Ionic apps (and non-Ionic apps, too!). We are huge fans of Cordova, and we’ve had a lot of ideas over the years about how to improve on it for the purposes of building Ionic apps (many of those being purely a matter of opinion).

We’re making a few significant changes to what Cordova offers, specifically tooling, the standard plugins available out of the box, the process for building custom native plugins and/or code, how native project code is managed, and support for Progressive Web Apps.

Capacitor is not a fork of Cordova but a ground-up new tool built at Ionic. As such, the code has taken some different paths. For example, Capacitor goes all-in on Swift for iOS plugins and code, one of the first of similar projects to embrace Swift and use the platform most iOS developers are using today (Obj-c still works, of course). Another difference is that Capacitor’s JS runtime is meant to be built into your app, providing a cross-platform API translation layer for Native and Web API calls.

We want to be clear: we are not abandoning Cordova nor the hybrid approach it championed. Capacitor is our attempt to bring this major piece of the Ionic developer experience in house to improve the support and experience for all Ionic developers, as well as target the specific use cases we are focused on as a company (such as Progressive Web Apps).

Finally, we know a big reason why developers choose Cordova is the rich 3rd party plugin ecosystem. We’ve designed Capacitor from the start to support the majority of existing Cordova plugins, and using them is as simple as npm install‘ing the plugin and running a simple update command.

Using Capacitor

Capacitor was designed primarily to drop-in to any existing modern frontend project, and, once Capacitor reaches a stable release, Ionic CLI will have support for it baked right in.

Until then, get started with Capacitor by following the Installation Guide on the Capacitor Documentation.

This process involves running an init command to configure up your project, adding the initial platforms you’d like to support, and building/running your app.

Roadmap

We’ve got a lot of things planned for Capacitor, both open source and commercial.

Some things you can look out for:

  • Improving Cordova Support: Many plugins work, but some don’t. We want to get closer to 100% if possible.
  • Electron support: Having first-class Electron support is a priority for 2018
  • Ionic Pro Support: Integrate Capacitor into Ionic Pro for package and other services
  • Native UI Shell: Mixing Native UI and Web w/ a cross platform UI. The “Hybrid Sweet Spot”
  • Enterprise plugins and support: We’re working with a few teams on official Enterprise plugins for Capacitor and Cordova. Interested? Email me

We need your feedback!

Today’s alpha release represents three months of hard work over thousands of commits, and we’re just getting started.

Capacitor is not production ready yet, but we hope to be at that point soon. For Capacitor to move forward, we need your feedback and testing. You can help us by trying the project, and filing issues on the Capacitor GitHub Repo. We’d also love to have you join the Capacitor Slack for real time chatter and feedback.

We look forward to your feedback and experience trying the Capacitor Alpha! 🍻

Capacitor Documentation
Capacitor GitHub Repo

Signup for the Ionic Newsletter to get the latest news and updates!

  • Max Gomes

    Nice! Looking forward to try it out!

  • Alejandro

    Sounds cool. Will capacitor work with Ionic1 apps?

    • yesimahuman

      Yes!

      • Nico Westerdale

        Would love to see a post that details the steps in migrating an Ionic 1 app to Capacitor. What the benefits and caveats are. A lot of us are working on existing projects and don’t get to play from the ground up with the newest toys in the box. I appreciate that this is still Alpha and will take a while to get there, but I’d like to be able to make the decision of whether this should be on our roadmap for adoption in 2018. From the post above it all sounds great, but I’m still not seeing the core reasons to switch over and I’d like to make that determination. That said, thanks for pushing the boundaries!

  • http://www.martinspierings.nl/ Martin Spierings

    Is there any demo to try out?

    • yesimahuman

      See above, should have one soon!

  • sudhan

    Can you please give some demo in capacitor. It will very helpful to us.

    • yesimahuman

      Yes we will get on that, stay tuned. 🍻

      • sudhan

        thanks

    • FssRepository

      You can look at their plugin code (Device plugin – it’s the same how you need to make it – the only problem at the moment, than you cannot build android based plugin, because the builder not finished, but you can add plugin to you main project, and copy over later on)

      It’s real fun, i have made 4-5 plugins with 50 hours. I might post it, when the builder is done.

  • http://blog.oxiane.com Alain Boudard

    Whoah, what a project !
    Now, how would you integrate native plugins “into” a PWA on the mobile ?

    • yesimahuman

      We have an API for building web fallbacks for plugins so the same APIs work in the browser if a plugin has its own web implementation

  • https://jgbnd.com Jean Gérard Bousiquot

    Now, I’m interested in how you plan to face React Native in term of speed. Is Capacitor faster than Cordova?

    • http://janpiotrowski.de/ Jan Piotrowski

      In what regards exactly is React Native faster than Cordova in your experience? Which measurements are you looking at?

      • https://jgbnd.com Jean Gérard Bousiquot

        First of all React Native is is a real native app. You don’t use the webview for it as in Ionic/Cordova. So navigation, time to launch… are much faster than Ionic.

        I’m an Ionic user, I’m currently learning React Native for that specifically. I need more speed. If Capacitor can give me that speed boost, than I won’t have to switch to React Native or pure native for more complex apps.

        ps: I love Ionic and its ecosystem.

        • yesimahuman

          Thanks Jean. A few ways we are tackling that very problem: ionic 4 will boot a lot faster than ionic 2/3 or 1, and then Capacitor will eventually allow you to use native navigation shell for faster navigation if you wish. The benefit of Capacitor is that same code will work in the browser as a PWA, something that isn’t really the case with other cross platform tools today. Cheers

          • https://jgbnd.com Jean Gérard Bousiquot

            cool thanks!

        • http://wonderswipe.com Gary Fung

          More specifically on performance, is no janky animation. Whole class of custom UI cannot be done with Cordova/Ionic apps (been there, tried that), when webviews have too horrid FPS. In React Native, UI performance problems mostly solves themselves.

          • yesimahuman

            Sounds like RN is working well for you, and that’s great. The web isn’t going anywhere though and we want to continue to build and improve on it with Capacitor. We’ve had some great reception from RN users that want to build more of their app with web technology, run it on multiple platforms without modification, and just use a native shell approach, so it’s certainly not either or.

          • http://wonderswipe.com Gary Fung

            I didn’t say either or. Only certain apps with “custom UI” as I said, and not all (not majority, even) apps have custom UI that can’t be made as a web app.

            But it’s also not useful to pretend Cordova/Capacitor (likely) is anything more than just web apps with some native API access.

          • yesimahuman

            Considering a Capacitor app is a full native app, that distinction doesn’t really mean much. You’re free to build portions of the app using native views if you so choose, and we have some prototypes using native navigation and menu, with pages as web content. Compared to Cordova, it’s a lot easier to drop down to native when you want to. The fact that people want to build most of their app using web technology doesn’t mean that a capacitor app is just a web app with some minimal native api access

          • http://wonderswipe.com Gary Fung

            Ok, I didn’t get that from this article. Good direction then for Capacitor to make it easier to add/integrate native views (and responsive to native gestures?) as needed.

          • anil

            So if we want to mix native components means do we need to write native code?
            i mean do we had native language knowledge?
            Thanks

        • mahmoud goda

          Exactly i have the same issue with Ionic and i’m thinking to switch to React native

        • Idrees Khan

          react native is a big learning curve, as you are ionic developer. NativeScript is another good option. At the end you will use same angular…

          • https://jgbnd.com Jean Gérard Bousiquot

            Thanks! But no thanks. I already started learning React/React Native. It’s great and has a great ecosystem. Ionic is great too. I’ll still use it. But for some projects React Native will be better.

          • Idrees Khan

            In react native like others, u rely on ecosystem but with NS u dont. As u can directly call native apis in typescript which no framework provides. So u have more power. Anyway it was just a suggestion.

          • https://jgbnd.com Jean Gérard Bousiquot

            great to know. But apart from mobile dev I do a lot of web dev too. So I have to pick just a small set of technologies and tools to work with. The time is not enough for me to learn and work with all those things. Thank you for your suggestions though!

    • Generic Comment

      Writing plugins in capacitor looks a lot easier, so you could write native code to perform intense calculations rather than using JavaScript. Won’t really benefit UI, but it can definitely improve long calculations.

  • Said Marar

    Well inersting project … i have one question is there a plugin that allows the a service worker run even if the app is closed or task kill by the user ??? I found it in reactnative … but i dont want to switch because i love IONIC

    • yesimahuman

      Yes, we have some basic support for this already with our background task feature but will be adding more. Which plugin did you find from react native you’d like us to support?

    • anil

      I think this plugin helps you.
      https://github.com/katzer/cordova-plugin-background-mode
      You have to add this line where you want to run app background cordova.plugins.backgroundMode.excludeFromTaskList();

  • Guillaume Aloird

    Nice ! I already love this project 🙂

  • http://www.mikece.com Mike Cerny

    “Another difference is that Capacitor’s JS runtime is meant to be built into your app, providing a cross-platform API translation layer for Native and Web API calls.”

    If the language runtime is built into the app, why limit to JavaScript? Why not a runtime/VM for Ruby, Python, Dart, etc? Clearly this would not apply to PWAs but a hybrid app using Python instead of JavaScript for app logic would open up a world of interesting possibilities. Hopefully the JS runtime part will be a swapable module allowing the use of any number of languages.

    • Owen Melbourne

      I guess not….. as things like Ruby and Python are server side, where as apps are all client side, like Ruby isn’t going to help you open/close a dropdown menu for example?

      • http://www.mikece.com Mike Cerny

        The article says the JS runtime used by Capacitor will be part of the Capacitor layer — in other words, not relying on the JS engine on the OS in question. That being the case, why not have the option for _other_ language runtimes/interpreters. Ruby and Python can run client-side just fine if there’s an environment for them.

      • Solerman Kaplon

        You confusing Ruby (the environment-agnostic language) with Rails (a server-side framework). I guess python is more use client-side than server side (thinking all the gnome apps written on it)

  • Joe landau

    Is Capacitor tied to Ionic? Or can you port any non-Ionic Cordova app?

    • yesimahuman

      It’s not tied to Ionic, any web app can work with it. It’s like Cordova in that regard. Cheers

  • Artur Veiga

    I have a little doubt. Will the project still run on a webview?

    • berardo

      Looks like so?
      “We want to be clear: we are not abandoning Cordova nor the hybrid approach it championed.”

    • yesimahuman

      Yes. We are all in on the web. That means you’ll be able to take a Capacitor app and deploy it to Electron or as a Progressive Web App with the same code. However, we plan on making it easier to mix in Native UI controls (like navigation and menus) while still maintaining cross-platform compatibility.

  • vijeth AG

    Im trying to understand more about Capacitor, How does Capacitor compare with web API (I mean with W3C adding more and more features like Camera/Geo-location etc., via the navigator object which are open web API’s).

  • ninguno

    I don’t understand that much. Does this mean Ionic will be eventually replaced by Capacitor? Or is Capacitor a replacement for Cordova APIs and therefore Ionic projects will work the same on the front-end but consuming a Capacitor API??

    • yesimahuman

      Capacitor is a replacement for Cordova, and is the native runtime and tooling used to interface with Native SDKs, and manage native platforms and plugins.

      The way you use Ionic with it is identical, and soon Ionic CLI will ship with Capacitor as an option

      • Daniel Rodrigues

        Nice, I was wondering If Ionic would be discontinued. Keep the good work!

        • yesimahuman

          No, definitely not! 😀 Ionic is the whole company and it’s all centered around Ionic Framework, so it’s not going anywhere!

  • http://northmoorpodcast.com Tim White

    So excited! This is a great move.

  • Luique Cruz

    This is really cool! can’t wait to try it out. o/

  • https://logus.us Alejandro Heredia

    This is really good news. Looking forward to use it.

  • tonymedrano

    That’s great ‼️‼️💪🏾💪🏾👏🏼👏🏼

  • http://crestdesign.in Ashraf

    Very excited! This is a great move

  • http://www.charlesen.fr Charles

    Great Job !! Can’t wait to add it in my next project !!

  • Geoffrey

    Really good news. Cordova became year after year too complicated to maintain. In french we call this “Usine a gaz”. It is really nice to give more control to native code. As well it would be nice to have a common repository for plugins which can avoid having to much plugins with different dependencies.

  • http://gian.xyz Gianfranco Palumbo
  • Timothy Gandionco

    Will really wanna try this. Hope it’s as fast as React Native, if not faster. It would make this way cooler.

  • anil

    Sounds Good.
    At Correct time i read this article.
    Actually i am Ionic dev from 4years and recently planning to shift to ReactNative as i thought of whole mobile market shifting to ReactNative and Flutter.
    But i likes Ionic.

    RN and Flutter gain popularity mainly because of their brand.(Facebook and Google).

    But as a Javascript Background for me its very hard to learn and dev apps and especially designing app in RN or flutter tooooo hard.

    So I am expecting good performance from Capacitor.
    If you guys working on Performance and Especially Concentrate on Device compatibility issues means it will be good.

    Thanks

  • FssRepository

    It’s interesting stuff, but if JS runtime environment included, than it can be big. As an app, it might not cause a problem. There were many problems with ionic framework and cordova plugins. In the open source world everything becomes non-maintained. We are thinking in the same way about cordova. I would have rewritten also. (anyway it’s not a big system) I was able to create a swift based cordova plugin, but definitely needs some juice.

    When Ionic 4 was announced that is coming around last year now, i decided to move away from every open source code, as i could have done far more faster in my own way. Ionic 4 hasn’t been finished, but my UI framework within 5 month almost there. (one week left with better feature set)

    I was totally right. Ionic team needs to focus on one thing, try to finish one thing with less bug, and try to focus on parameter simplification, instead of code base simplification.

    To make a clean code which do nothing is relatively easy, to create a meaningful component which is easy to use for others, it can be quite hard. (Ionic done the first with ionic 3 – lost almost 4 month, when i realized, that it won’t work. It was laggy, it was hard to use to solve performance issues and so on – i wasn’t able to update to new angular because of cli scripts)

    I hope i don’t need to rewrite cordova, because capacitor is not ready.

    I don’t think that flutter or nativescript is going to work, they are less productive than the web components, and tight coupled to the device, they are just loosing the flexibility.

    You can build a more performant web based UI, if you don’t put bloatware in it.

    I’m not sure what i have done, but i have a very complex app, and the size is 20 times smaller, than any similar in complexity. I’m not sure what is in the other apps. (maybe some big splash screen file, i don’t know – but when i look at 50-100MB-s for some app, which has got only 5-8 screen – i have no clue whatsoever)

  • FssRepository

    I have tried the capacitor latest beta, and i think it’s a syntactic sugar over cordova, but it’s far better in this way. I didn’t expect speed improvement, because it’s the same technology behind, but to create plugins with it, it’s real fun. The only problem at the moment, that android plugin building page hasn’t been finished yet. (i think it should be finished as soon as possible, because anyway it works both on ios and android) I just made some plugins into my project, but i cannot post it. (Google Map / ML Kit, MQTT, and common Native Overlay (click bait)) At the moment i have made the android versions, but i have tested the echoing and the listener stuff on ios, just i don’t know too much about the cryptic Swift language. (there is no experience, just i’m aware of some syntactic sugar and concept)