capacitor Documentation

1. Project Overview & Quickstart (ionic-team/capacitor) Copy Chapter

File: README.md Copy Chapter

Capacitor lets you run web apps natively on iOS, Android, Web, and more with a single codebase and cross-platform APIs.

Capacitor provides a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom native plugins that your app may need. Additionally, Capacitor provides first-class Progressive Web App support so you can write one app and deploy it to the app stores and the mobile web.

Capacitor comes with a Plugin API for building native plugins. Plugins can be written inside Capacitor apps or packaged into an npm dependency for community use. Plugin authors are encouraged to use Swift to develop plugins in iOS and Kotlin (or Java) in Android.

Getting Started Copy Chapter

Capacitor was designed to drop-in to any existing modern web app. Run the following commands to initialize Capacitor in your app:

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

Next, install any of the desired native platforms:

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

New App? Copy Section

For new apps, we recommend trying the Ionic Framework with Capacitor.

To begin, install the Ionic CLI (npm install @ionic/cli) and start a new app:

ionic start --capacitor

FAQ Copy Chapter

What are the differences between Capacitor and Cordova?

In spirit, Capacitor and Cordova are very similar. Capacitor offers backward compatibility with a vast majority of Cordova plugins.

Capacitor and Cordova differ in that Capacitor:

• takes a more modern approach to tooling and plugin development
• treats native projects as source artifacts as opposed to build artifacts
• is maintained by the Ionic Team 💙😊

See the docs for more details.

Do I need to use Ionic Framework with Capacitor?

No, you do not need to use Ionic Framework with Capacitor. Without the Ionic Framework, you may need to implement Native UI yourself. Without the Ionic CLI, you may need to configure tooling yourself to enable features such as livereload. See the docs for more details.

Contributing Copy Chapter

See CONTRIBUTING.md.

Contributors Copy Chapter

Made possible by the Capacitor community. 💖

File: cli/README.md Copy Chapter

Capacitor CLI

The Capacitor command-line interface (CLI) is a tool for creating and managing Capacitor applications. While it can be installed globally, it's recommended to install it locally in your project and execute through npm scripts.

Installation Copy Chapter

Project Installation (Recommended) Copy Section

Install the CLI locally in your project:

npm install @capacitor/cli --save-dev

Global Installation Copy Section

While not recommended for project use, you can install the CLI globally:

npm install @capacitor/cli

Using Capacitor CLI Copy Chapter

The CLI can be used through the capacitor or cap command. When installed locally, use it through your project's npm scripts or npx.

Common commands:

• cap init: Initialize a new Capacitor project
• cap add: Add a native platform (ios, android)
• cap sync: Sync your web code to your native projects

For detailed information, consult the Getting Started guide.

Local Development Copy Chapter

If you're contributing to the Capacitor CLI or testing local changes:

1. Clone and setup:

   bash Copy

   git clone https://github.com/ionic-team/capacitor.git
   cd cli
   npm install

2. Build the CLI:

   bash Copy

   npm run build

3. Create a local link:

   bash Copy

   npm link

4. Development workflow:

   • Run npm run watch to automatically rebuild on changes
   • Use capacitor or cap commands to test your changes
   • Run npm test to execute the test suite

Debugging Copy Chapter

Using VS Code Launch Configurations Copy Section

The CLI includes VS Code launch configurations for debugging. To debug a CLI command:

1. Open the project in VS Code
2. Right now we don't have debugging working in the ts files, so select one of the .js files inside of /dist/**.js
3. Place a breakpoint
4. Press F5 or go to Run > Start Debugging
5. Select a launch config and run filling out the path you want to run the cli in, and the command that you want run.

You can add more configurations by copying and modifying the existing ones in .vscode/launch.json.

Contributing Copy Chapter

Contributions are welcome! Please read our Contributing Guide for details.

License Copy Section

• MIT

File: core/README.md Copy Chapter

Capacitor Core JS

See the Capacitor website for more information.

File: ios-spm-template/App/CapApp-SPM/README.md Copy Chapter

CapApp-SPM

This package is used to host SPM dependencies for your Capacitor project

Do not modify the contents of it or there may be unintended consequences.

2. Official Technical Reference & Guides (ionic-team/capacitor-docs) Copy Chapter

File: README.md Copy Chapter

Capacitor Docs

The official Capacitor documentation, built with Docusaurus. Based on the Ionic Docs

Getting Started Copy Chapter

Install the latest versions of Node and npm.

Once npm is installed, run

npm install
npm run build
npm run serve

The site will launch in development mode.

Contributing Copy Chapter

Thanks for your interest in contributing! Read up on our guidelines for
contributing.

Please note that this project is released with a Contributor Code of Conduct. By participating in this project you agree to abide by its terms.

File: docs/index.md Copy Chapter

title: Capacitor - Cross-platform Native Runtime for Web Apps sidebar_label: Introduction hide_table_of_contents: true Copy Chapter

Capacitor: Cross-platform Native Runtime for Web Apps

Capacitor is a cross-platform native runtime that makes it easy to build performant mobile applications that run natively on iOS, Android, and more using modern web tooling. Representing the next evolution of Hybrid apps, Capacitor creates Web Native apps, providing a modern native container approach for teams who want to build web-first without sacrificing full access to native SDKs when they need it.

Introduction Copy Chapter

Capacitor provides a consistent, web-focused set of APIs that enable an app to stay as close to web standards as possible, while accessing rich native device features on platforms that support them. If it works in the browser, it probably works in a mobile app when using Capacitor. Adding native functionality is straightforward with a Plugin API for Swift on iOS, Java on Android, and JavaScript for the web.

Get Started Copy Chapter

Getting started with Capacitor is easy! Capacitor can be dropped into any existing modern JavaScript project, or a fresh Capacitor project can be created from scratch.

Follow the Installation guide to get started building your app.

File: docs/README.md Copy Chapter

Docs folder

The /docs folder houses all markdown files. The page structure loosely maps to the routing on the site since paths can be changed in the frontmatter.

Versioning Copy Chapter

This folder can also contain components, assets, and whatever else is meant to be versioned when the docusaurus versioning script is run. For example, if there is a page component that is only relevant to the layout section in the current version of Ionic, it could be added to a _components/ folder in docs/layout/. When the versioning script is run, the component will be copied to versioned_docs/verion-{X}/layout/_components/ and there will now be a separate component in docs/layout/_components/ that can be deleted or updated to the latest version. The same concept applies to images and other files.

If components are meant to be shared across versions, they can be put in src/components/. If images and other served files are meant to be shared across versions they can be put in static/.

Auto Generated Files Copy Chapter

All markdown files in these directories are generated from scripts:

• docs/api/
• docs/cli/commands/
• docs/native/