Qwik & Capacitor

Build native mobile apps with web technology and Qwik

Install Capacitor.

After creating your Qwik app npm create qwik@latest, add Capacitor to your project and create a config for your app.

npm install --save-dev @capacitor/core @capacitor/cli 
npx cap init [name] [id] --web-dir=dist

Build the Web App.

The compiled web assets will be copied into each Capacitor native platform during the next step.

npm run qwik add static
npm run build

Install the native platforms you want to target.

Capacitor's native projects exist in their own top-level folders and should be considered part of your app (check them into source control).

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

Adding calls to Native APIs

With Capacitor installed, adding calls to native device features is as straight forward as calling other JavaScript methods.

Apple requires privacy descriptions to be specified in Info.plist for location information.

More info here

import { component$, useSignal } from "@builder.io/qwik";
import { Geolocation, type Position } from "@capacitor/geolocation";

export default component$(() => {
  const locSignal = useSignal<Position>();

  return (
    <div>
      <h1>Geolocation</h1>
      <p>Your location is:</p>
      <p>Latitude: {locSignal.value?.coords.latitude}</p>
      <p>Longitude: {locSignal.value?.coords.longitude}</p>
      <button
        onClick$={async () => {
          const coordinates = await Geolocation.getCurrentPosition();
          locSignal.value = coordinates;
        }}
      >
        Get Current Location
      </button>
    </div>
  );
});

Continue your Capacitor Journey.

This is only the beginning. Learn more about the Capacitor development workflow or using more native APIs .

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