See how Capacitor fits into the Ionic Ecosystem ->

PWA Elements

Some Capacitor plugins, such as Camera or Toast, have web-based UI available when not running natively. For example, calling Camera.getPhoto() will load a responsive photo-taking experience when running on the web:

This UI is implemented using web components. Due to the magic of Shadow DOM, these components should not conflict with your own UI.


To enable these controls, you must add @ionic/pwa-elements to your app.

A typical installation involves importing the package and registering the elements, or adding a script tag to the <head> of the index.html for your app:

Importing PWA Elements

npm install @ionic/pwa-elements

Then, depending on your framework of choice, import the element loader and call it at the correct time:


index.tsx or index.js:

import { defineCustomElements } from '@ionic/pwa-elements/loader';

ReactDOM.render(<App />, document.getElementById('root'));

// Call the element loader after the app has been rendered the first time



import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from '@ionic/pwa-elements/loader';

if (environment.production) {

  .catch(err => console.log(err));

// Call the element loader after the platform has been bootstrapped

Including through script tag

PWA Elements can be included through a script tag in your index.html. However, keep in mind this will not work for offline scenarios:

<script type="module" src=""></script>
<script nomodule src=""></script>