Skip to main content

​
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 [email protected] for native integration questions
  • Documentation: Visit docs.despia.com for detailed native API reference
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.