How it Works - Despia Documentation

Lovable now supports importing and using any npm package directly. The standard Despia npm installation works without any special Lovable-specific setup - just follow the regular documentation here https://setup.despia.com/introduction

Overview

Despia bridges the gap between web and native mobile development. Build your React web app using Lovable’s AI-powered platform, then deploy it as a truly native application to the App Store and Google Play - complete with hardware acceleration, offline support, and deep OS integration. Lovable generates the React codebase through natural language prompts, while Despia provides 25+ native device APIs and automated app store deployment. You get the best of both worlds: rapid AI-driven development and full native capabilities.

Installation

Simply ask Lovable to add native features to your app, or install manually:

npm install despia-native

Then import in your Lovable-generated React components:

import despia from 'despia-native';

Important: This SDK is required for TypeScript/React apps. It provides type safety, command queuing, and variable watching that vanilla JavaScript implementations lack.

Key Capabilities

Automated Publishing Pipeline

Despia manages the complete app store deployment process:

Automatic build generation for iPhone, iPad, Vision Pro, and Android devices
Automated code signing and certificate management
Direct submission to App Store and Google Play
One-click deployment with built-in CI/CD pipelines
Over-the-air updates without app store review

25+ Native Device Features

Access comprehensive native functionality through simple JavaScript commands: Core Native Features:

// Haptic Feedback - 5 different types
despia('lighthaptic://');     // Light vibration
despia('heavyhaptic://');     // Heavy vibration  
despia('successhaptic://');   // Success feedback
despia('warninghaptic://');   // Warning alert
despia('errorhaptic://');     // Error feedback

// App Information & Device Data
const appInfo = await despia('getappversion://', ['versionNumber', 'bundleNumber']);
const deviceId = await despia('get-uuid://', ['uuid']);
const storeData = await despia('getstorelocation://', ['storeLocation']);

// UI Controls & Status Bar
despia('spinneron://');       // Show loading spinner
despia('spinneroff://');      // Hide loading spinner
despia('hidebars://on');      // Full screen mode
despia('statusbarcolor://{255, 255, 255}');  // Status bar color

Advanced Native Features:

// Background Location Services
despia('backgroundlocationon://');
const watchId = navigator.geolocation.watchPosition(
  (position) => console.log('Location:', position)
);

// Contact Integration
despia('requestcontactpermission://');
const contacts = await despia('readcontacts://', ['contacts']);

// In-App Purchases (RevenueCat)
despia('revenuecat://purchase?external_id=user_777&product=monthly_premium');

// Push Notifications
const playerData = await despia('getonesignalplayerid://', ['onesignalplayerid']);

// Biometric Authentication
despia('bioauth://');  // Face ID, Touch ID, fingerprint

// File & Media Operations
despia('takescreenshot://');
despia('savethisimage://?url=https://example.com/image.jpg');

// Native Widgets & App Clips
despia(`widget://${svg}?refresh=${refreshTime}`);

// Sharing
despia('shareapp://message?=Check out this app&url=https://myapp.com');

Native Safe Area Support

Automatic CSS variables for device-specific layouts:

.my-element {
  padding-top: var(--safe-area-top);
  padding-bottom: var(--safe-area-bottom);
}

Implementation Process

1. Build with Lovable

Use natural language to create your React web app:

“Create a task management app with user authentication”
“Add a dashboard with charts and data visualization”
“Include a settings page with dark mode toggle”

2. Add Native Features via AI

Ask Lovable to integrate Despia native capabilities:

“Add haptic feedback when users complete a task”
“Enable push notifications for task reminders”
“Add biometric authentication for app security”
“Include background location tracking for delivery features”

Lovable will automatically generate the proper despia() function calls in your React components.

3. AI-Enhanced Native Integration

Lovable intelligently generates native feature implementations:

// Generated when you ask: "Add haptic feedback to the save button"
const handleSave = async () => {
  try {
    await saveTask();
    despia('successhaptic://'); // Success vibration
    setShowSuccess(true);
  } catch (error) {
    despia('errorhaptic://');   // Error vibration
    setShowError(true);
  }
};

// Generated when you ask: "Add app version display in settings"
const [appInfo, setAppInfo] = useState(null);

useEffect(() => {
  const getAppInfo = async () => {
    if (navigator.userAgent.includes('despia')) {
      const info = await despia('getappversion://', ['versionNumber', 'bundleNumber']);
      setAppInfo(info);
    }
  };
  getAppInfo();
}, []);

4. Environment Detection

Lovable can generate proper environment handling:

// Auto-generated environment detection
if (navigator.userAgent.includes('despia')) {
  // Use native features in mobile app
  despia('lighthaptic://');
} else {
  // Fallback for web browser
  console.log('Running in web browser - native features unavailable');
}

5. Deploy Everywhere

Web: Deploy your Lovable app to any hosting platform
Mobile: Use Despia’s one-click deployment to app stores
Updates: Push changes instantly with OTA updates

AI-Powered Mobile Development

Natural Language Native Features: Request any native functionality in plain English and Lovable generates the implementation:

“Add camera access for profile photos”
“Add home screen widgets showing user stats”
“Include in-app purchase for premium features”

Complete Ownership

Source Code Export: Get complete Xcode and Android Studio projects
No Vendor Lock-in: Full access to generated code with no restrictions
GitHub Integration: Lovable syncs your code to GitHub automatically
Extensible: Add any npm packages or custom native code

Performance & Reliability

60fps GPU-accelerated rendering on native devices
Command queuing ensures sequential execution
Variable watching for async native responses
Type safety with full TypeScript support
Automatic timeout handling and error management

Need Help?

Lovable Support: Use the built-in AI assistant for development guidance
Despia Support: Contact support@despia.com for native integration questions

Ready to transform your web app? Start building with Lovable, add native features with a simple npm install despia-native, and deploy to app stores in a weekend.

​Overview

​Installation

​Key Capabilities

​Automated Publishing Pipeline

​25+ Native Device Features

​Native Safe Area Support

​Implementation Process

​1. Build with Lovable

​2. Add Native Features via AI

​3. AI-Enhanced Native Integration

​4. Environment Detection

​5. Deploy Everywhere

​AI-Powered Mobile Development

​Complete Ownership

​Performance & Reliability

​Need Help?

Overview

Installation

Key Capabilities

Automated Publishing Pipeline

25+ Native Device Features

Native Safe Area Support

Implementation Process

1. Build with Lovable

2. Add Native Features via AI

3. AI-Enhanced Native Integration

4. Environment Detection

5. Deploy Everywhere

AI-Powered Mobile Development

Complete Ownership

Performance & Reliability

Need Help?