# Add to existing web project
npm install @capacitor/core @capacitor/cli
npx cap init

# Add platforms
npm install @capacitor/ios @capacitor/android
npx cap add ios
npx cap add android

import { Camera, CameraResultType } from "@capacitor/camera";
import { Geolocation } from "@capacitor/geolocation";
import { LocalNotifications } from "@capacitor/local-notifications";

async function takePicture() {
  const image = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    quality: 90,
  });
  return image.webPath;
}

async function getLocation() {
  const position = await Geolocation.getCurrentPosition();
  return {
    lat: position.coords.latitude,
    lng: position.coords.longitude,
  };
}

async function scheduleNotification() {
  await LocalNotifications.schedule({
    notifications: [
      {
        title: "Reminder",
        body: "Check your tasks!",
        id: 1,
        schedule: { at: new Date(Date.now() + 3600 * 1000) },
      },
    ],
  });
}

// capacitor.config.ts
import type { CapacitorConfig } from "@capacitor/cli";

const config: CapacitorConfig = {
  appId: "com.example.app",
  appName: "My App",
  webDir: "dist",
  server: {
    androidScheme: "https",
  },
  plugins: {
    SplashScreen: {
      launchAutoHide: false,
    },
    Keyboard: {
      resize: "body",
    },
  },
};

export default config;

import { registerPlugin } from "@capacitor/core";

interface MyPluginPlugin {
  echo(options: { value: string }): Promise<{ value: string }>;
}

const MyPlugin = registerPlugin<MyPluginPlugin>("MyPlugin");

// Usage
const result = await MyPlugin.echo({ value: "Hello" });

# Sync web code to native
npx cap sync

# Open in IDE
npx cap open ios
npx cap open android

# Live reload during dev
npx cap run ios --livereload --external