Skip to main content

Documentation Index

Fetch the complete documentation index at: https://setup.despia.com/llms.txt

Use this file to discover all available pages before exploring further.

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.