WebToApp Studio Pro Documentation

Why WebToApp Studio Pro outperforms traditional solutions:

• No Electron Bloat: Electron apps weigh 150MB+ and consume 400MB+ of RAM. WebToApp Studio Pro apps use Microsoft Edge WebView2, producing lean 14MB executables that load in milliseconds.
• Zero SDK Required for Buyers: Unlike command-line CLI builders, WebToApp Studio Pro features an Instant Template Engine. Buyers click "Build" and get an executable in seconds without installing C++ compilers or Node.js.
• HTTPS Virtual Host (`https://app.local/`): Eliminates `file://` protocol CORS bugs. WebGL, Web Audio, LocalStorage, IndexedDB, and ES6 modules work seamlessly.

🚀 Test-Drive Instantly with 1-Click Sample Projects

Don't have your web files ready yet? WebToApp Studio Pro includes two fully functioning sample projects built right into the UI under 1. Source → Local HTML5 Folder:

🚀 Custom Start Entrypoints (Beyond index.html)

While index.html is the standard web default, WebToApp Studio Pro does not require your entry file to be named index.html. In Studio under 1. Source Settings → Start Entry File, you can specify any entrypoint filename or relative subfolder path:

• Custom HTML Filenames: app.html, main.html, home.html, game.html, dashboard.html, or index.htm.
• Subdirectory Build Folders: If your framework outputs to a nested directory, you can specify paths like dist/index.html, build/index.html, public/index.html, out/index.html, or client/index.html without rearranging your project structure.
• Embedded Documents (PDF): You can even set a PDF document (e.g. user-manual.pdf) as your start file—Chromium's high-performance native PDF engine will render the document directly inside the desktop application window.

⚠️ What WebToApp CANNOT Run (Server-Side Limitations & Architectures)

WebToApp Studio Pro packages client-side web applications running inside an optimized Chromium browser environment. It does not include backend daemon runtimes such as:

• No Raw PHP Scripts: Files ending in .php (e.g. Laravel or WordPress backend scripts) cannot execute locally because there is no Apache/Nginx web server or PHP-FPM interpreter embedded.
• No Node.js Server Daemons: Files like server.js or Express APIs cannot run directly inside the client view because browser runtimes do not expose Node's internal OS system APIs (fs, net, child_process).
• No Python / Ruby / C# Backends: Python scripts (Django, Flask, FastAPI) or Ruby on Rails servers cannot run without an external Python or Ruby interpreter.

How to Architect Full-Stack Web Apps for Desktop:

🎨 What Icon Studio Does:

• Visual Monogram Generator: Generate branded app icons from scratch with zero design skills. Choose between 4 modern geometric silhouettes (Squircle, Rounded Rectangle, Smooth Circle, or Square) and 8 curated gradient color presets.
• Automatic Initials Extraction: Automatically extracts 1 or 2 letter monograms from your Application Name (e.g. "My Desktop App" → "MD") with clean, centered typography.
• Multi-Resolution .ICO Compiler: WebToApp's pure .NET image pipeline automatically renders and packs 6 embedded resolution layers into a single .ico file: 16×16, 32×32, 48×48, 64×64, 128×128, and 256×256 px. This guarantees crisp, pixel-perfect rendering across Windows desktop shortcuts, taskbars, and Explorer zoom levels.
• Multi-Platform Live Previews: See exactly how your icon will appear in production across three live device mockups:
  • Windows Taskbar: Renders inside a simulated Windows 11 taskbar next to running apps.
  • Android Launcher: Previewed inside a mobile squircle icon badge on a phone home screen.
  • Microsoft Store Tile: Rendered on a live Windows Store square app tile.
• 1-Click Actions: Click Apply to Current Project to immediately update your project configuration, or Export Master PNG to download the 512×512 source file for marketing assets.

✨ Integrated Splash Studio

Launch the built-in Splash Studio from Tab 6: Splash & Polish to visually design custom startup screens with live rendering:

• Simulate Splash Fade: Click the simulation button in Studio to preview the smooth alpha fade-out transition before building.
• 1-Click Apply: Automatically saves the splash PNG, syncs the project background color hex code, and enables splash screen execution.

🌐 Allowed Navigation Domains (Domain Whitelisting)

In Tab 4: Security & Controls, developers can define a strict whitelist of permitted navigation domains (e.g. *.mycompany.com, checkout.stripe.com, auth0.com):

• Restricted Web View: The internal browser window is locked strictly to your application's domain and approved third-party authorization providers.
• Phishing & Redirect Defense: If a user clicks an unapproved external link or an untrusted redirect is attempted, navigation is blocked inside the app window.
• Default Browser Routing: When combined with "Open External Links in Default Browser", any unlisted links or target="_blank" links will safely launch in the user's primary desktop browser (e.g. Chrome, Edge), keeping your desktop app window dedicated exclusively to your platform.

🔒 Anti-Tampering & Code Protection

• Block Remote Debugging Port: Prevents unauthorized users or scrapers from launching the executable with Chrome's --remote-debugging-port flag to inspect your DOM or extract proprietary frontend tokens.
• Disable Developer Tools (F12): Completely suppresses F12, Ctrl+Shift+I, Ctrl+Shift+J, and inspect menus.
• Disable Context Menu: Suppresses right-click browser inspection menus for a true native application look and feel.
• Disable Text Selection: Injects CSS to prevent highlighting UI buttons, labels, and layouts (user-select: none).
• Disable Password Autosave: Prevents browser popups asking users to save passwords—ideal for point-of-sale systems, medical software, and public kiosks.

🛡️ Profile Isolation & Session Privacy

• Single Instance Mutex: Prevents opening multiple instances of your software, avoiding duplicate database locks, high memory usage, and state collisions.
• Clear Browsing Data on Exit: Automatically wipes cookies, session storage, and cache upon closing the application window.
• Custom User Agent: Set a custom User Agent string so your backend servers can distinguish desktop app requests from standard web browsers.

⚡ Why Native SQLite over LocalStorage or IndexedDB?

• ACID Reliability: Full support for atomic multi-statement transactions (executeBatch) with automatic rollback on error. If a query fails or power is cut, data remains uncorrupted.
• Relational SQL Power: Use standard SQL syntax—joins, indexes, triggers, constraints, and auto-incrementing primary keys.
• Concurrency with WAL Mode: Write-Ahead Logging allows background read queries to proceed without locking or blocking active writes.
• No Browser Storage Quota Eviction: Store megabytes or gigabytes of structured data directly on disk without the risk of browser cache clearance.
• Zero Dependencies: SQLite 3.53 engine binaries are bundled directly into the standalone application runner.

🛡️ Security & Origin Isolation Architecture

Because the database executes against the local host filesystem, rigorous security boundaries are enforced:

• Strict Origin Isolation: By default, access to window.desktopApp.db is strictly restricted to bundled application assets running on the virtual host origin https://app.local/*. External or third-party web domains cannot access the database unless explicitly whitelisted in Studio under "Allow Remote Web Origins".
• Path Traversal Defense: Database filenames are rigorously sanitized against directory traversal attacks (.., /, \), ensuring the database file is always stored within the designated secure application directory.
• Restricted PRAGMAs: Potentially dangerous SQLite statements—including LOAD_EXTENSION, WRITABLE_SCHEMA, and arbitrary ATTACH DATABASE—are blocked at the host runner level to prevent malicious native DLL injection or filesystem tampering.
• Parameterized Binding: Both positional (?) and named (@name, :name, $name) parameters are bound safely to prevent SQL injection vulnerabilities.

💻 JavaScript Bridge API Reference (`window.desktopApp.db`)

When SQLite is enabled in Studio, the asynchronous bridge is injected automatically before your scripts execute:

1. Parameterized Queries (SELECT)

// Positional parameters with '?'
const activeUsers = await window.desktopApp.db.query(
    "SELECT id, username, email FROM users WHERE active = ? AND age >= ? ORDER BY username ASC;",
    [1, 21]
);
console.log("Returned rows:", activeUsers);

2. Executing Non-Queries (INSERT, UPDATE, DELETE)

// Named parameters with '@'
const result = await window.desktopApp.db.execute(
    "INSERT INTO notes (title, content) VALUES (@title, @content);",
    { title: "Meeting Notes", content: "Discussed Q4 roadmap and local database features." }
);
console.log("Rows affected:", result.rowsAffected);
console.log("New row ID:", result.lastInsertRowId);

3. Atomic Transactions (`executeBatch`)

// All statements run in a single transaction; rolls back completely on any error
await window.desktopApp.db.executeBatch([
    "UPDATE accounts SET balance = balance - 100 WHERE id = 101;",
    "UPDATE accounts SET balance = balance + 100 WHERE id = 102;",
    "INSERT INTO transfer_logs (from_id, to_id, amount) VALUES (101, 102, 100);"
]);

4. Introspection & Diagnostics

// List all user tables
const tables = await window.desktopApp.db.tables();

// Introspect table column metadata
const schema = await window.desktopApp.db.schema("notes");

// Get engine version and storage path
const version = await window.desktopApp.db.version();
console.log("Engine:", version.sqliteVersion, "Path:", version.databasePath);

⚡ How OS Deep-Linking Works:

1. In WebToApp Studio under Tab 4: Security & Controls → Custom Deep-Linking, toggle Enable Custom Protocol Handler.
2. Enter your desired custom protocol scheme (e.g. myapp, crm, gamehub). When compiled, Windows automatically registers myapp:// in the system registry.
3. Single-Instance IPC: If your application is already running and a user clicks a link like myapp://orders/detail?id=1024 in Google Chrome, Slack, or an email, WebToApp brings your existing window immediately to the front (no duplicate instances opened) and passes the URL to JavaScript in real time.

💻 JavaScript Bridge API (`window.desktopApp.onDeepLink`)

Listen for incoming deep-link events directly from your client-side JavaScript:

// 1. Listen for dynamic deep-links while the app is already open:
window.desktopApp?.onDeepLink((incomingUrl) => {
    console.log("Deep link received:", incomingUrl);
    // Example: myapp://profile?user_id=894&tab=activity
    const parsed = new URL(incomingUrl);
    const userId = parsed.searchParams.get("user_id");
    if (userId) {
        navigateToUserProfile(userId);
    }
});

// 2. Query initial deep link if the app was launched by clicking a link:
const launchUrl = window.desktopApp?.getLaunchUrl();
if (launchUrl) {
    console.log("App launched via deep link:", launchUrl);
    handleDeepLinkRoute(launchUrl);
}

🛠️ Automated Inno Setup Script Generation

When you enable Generate Inno Setup Script (.iss) in Studio under Deliverables, WebToApp automatically generates a production-grade setup_script.iss file inside your build output folder:

• Pre-Populated Metadata: Automatically configures your Application Name, Version, Company, Copyright, and target executable name.
• Smart Shortcuts: Pre-configures Start Menu program groups, optional Desktop icon checkboxes, and clean uninstaller shortcuts.
• 64-bit Architecture: Sets ArchitecturesInstallIn64BitMode=x64 to ensure seamless installation into Program Files.
• Registry Integration: Configures Windows Add/Remove Programs keys with publisher information, estimated disk size, and clean uninstaller hooks.

How to Compile into `setup.exe` in 10 Seconds:

1. Download and install the free, open-source Inno Setup Compiler.
2. Right-click the generated setup_script.iss in your output folder and click Compile (or press Ctrl+F9 in Inno Setup).
3. In less than 10 seconds, Inno Setup compresses your entire app into a single, branded Windows installer wizard: Output/[AppName]_Setup.exe!

🧪 1-Click Free Local Sideload Testing

Normally, Windows requires expensive commercial code-signing certificates ($300+/year) or an active Microsoft Partner Center subscription to test .msix packages. WebToApp Studio Pro solves this with an Automated RSA-2048 Certificate Generator:

• When compiling an MSIX package, WebToApp Studio automatically generates a dedicated test certificate and an automated sideloading script: Install-TestCertificate.ps1.
• How to Install on Any PC: Right-click Install-TestCertificate.ps1 and choose Run with PowerShell (or run in an elevated terminal). This safely adds the test certificate to your machine's TrustedPeople certificate store.
• Once installed, you and your beta testers or clients can double-click the .msix file and install the application directly through the native Windows App Installer with zero errors!

🚀 The Turnkey Zero-SDK Workflow

1. In the top bar of WebToApp Studio, select your target export platform:
   • Windows (.exe): Builds standalone Windows 10/11 desktop executable.
   • Android App: Generates Android 14 (API 34) Gradle project, launcher mipmaps, and APK/AAB bundle.
   • ⚡ Dual Build (Both): Compiles both Windows and Android packages in a single click!
2. Open Tab 8: Android & Play Store to customize:
   • Package Name: Reverse-domain identifier (e.g., com.mycompany.myapp). Use the "Auto-generate" button for instant formatting.
   • Version Code: Google Play incrementing build number (e.g. 1, 2, 3).
   • Orientation: Choose Portrait, Landscape, or Sensor auto-rotation.
   • Hardware Permissions: 1-click toggles for Camera, Microphone, and Storage access.
   • Keystore Management: Choose Auto-Generate Production Keystore, Debug Only, or attach your own existing signing key.
   • WebViewAssetLoader: Automatically serves local static files over https://appassets.androidplatform.net/, ensuring modern Web Audio, Canvas, and localStorage work flawlessly without CORS blocks.
   • Pull to Refresh: Native Android SwipeRefreshLayout gesture.
3. Click BUILD EXECUTABLE / DUAL BUILD.

📚 Dedicated Publishing Guides

Follow our in-depth step-by-step walkthroughs to ship your packaged apps to major commercial app stores:

🐧 How to Export for Ubuntu & Debian:

1. In the top target selector bar, click Ubuntu Linux (.deb) or switch to tab 9. Linux & Ubuntu.
2. Configure your Debian package properties:
   • Debian Package Name: Lowercase package identifier (e.g. com.wildcatstudio.myapp or myapp).
   • Target Architecture: Choose all (universal compatibility across x86_64, arm64, and Raspberry Pi) or specific target architectures (amd64, arm64).
   • Debian Section & Categories: Choose standard Debian sections (utils, web, games, graphics, net) and desktop categories for GNOME / Ubuntu Dash.
   • Dependencies: Pre-configured with automatic fallbacks: python3, python3-gi, gir1.2-webkit2-4.1 | gir1.2-webkit2-4.0 | chromium-browser | google-chrome-stable.
3. Click BUILD UBUNTU APP (.DEB).

📦 Output Deliverables

WebToApp Studio Pro generates two complete distribution packages inside your output folder:

• [app]_[version]_[arch].deb: Standard binary Debian package. Users double-click to install via Ubuntu Software Center, or run:

  sudo dpkg -i myapp_1.0.0_all.deb
  sudo apt-get install -f   # Resolves any missing runtime dependencies

• [app]_[version]_linux_portable.tar.gz: Standalone portable AppDir. Does not require root/sudo access:

  tar -xzf myapp_1.0.0_linux_portable.tar.gz
  cd myapp/
  ./run.sh

• Embedded Localhost Web Server: Local HTML5 games and web apps are automatically served via an embedded background Python 3 HTTP server on localhost with an ephemeral random port, guaranteeing 100% CORS-free execution, WebGL support, and IndexedDB/localStorage storage.

Selecting Multi-Build in the top target bar allows you to click one button and compile:

• Windows (.exe): Standalone lightweight WebView2 desktop application.
• Android (.zip): 100% turnkey Android Studio project + Google Play publishing assets (or compiled APK/AAB).
• Ubuntu Linux (.deb): Debian installer package and portable Linux AppDir tarball.

Perfect for indie developers, game studios, and SaaS founders who want cross-platform distribution without maintaining three different build pipelines.

How It Works for Buyers:

1. On startup (or by clicking Check Updates in the header), the Studio checks the remote manifest.
2. If a newer version exists, a glowing green notification appears: Update vX.X Available!.
3. Clicking the notification opens the Release Notes Modal detailing the changelog.
4. Clicking 1-Click Update & Restart downloads the release package, automatically extracts the new binaries over the existing folder, and restarts the application in ~2 seconds.

Q: Do my buyers need to install Python or Node.js to use the generated app?

No! The Windows output executable is completely standalone and runs directly on Windows 10 and Windows 11. The Ubuntu Linux package includes standard system dependencies installed automatically via apt.

Q: Can I compile Ubuntu .deb packages directly on a Windows PC?

Yes! WebToApp Studio Pro contains a custom pure C# Unix ar archive writer and gzip tarball generator built on .NET 8 BCL. It generates 100% compliant Debian binary packages directly on Windows without WSL or Docker.

Q: How does the built-in SQLite database work, and can I use it in my app?

WebToApp Studio includes an embedded SQLite 3 engine exposed directly to JavaScript at window.desktopApp.db. It supports parameterized queries, non-queries, and atomic transactions (executeBatch) with zero external drivers or server installations required.

Q: How do custom deep links (myapp://) work?

When custom deep-linking is enabled, WebToApp registers your chosen URI scheme in Windows. Clicking links in web pages, Discord, or emails launches your application or brings the existing instance to the front, dispatching the URL directly to window.desktopApp.onDeepLink().

Q: Can I sell the applications I build with WebToApp Studio Pro?

Yes! Any applications you compile are 100% yours to sell, distribute, or license to clients royalty-free.

Q: Does WebToApp Studio Pro support cookies and local storage?

Yes. User sessions, local storage, cookies, and cache are preserved across restarts in an isolated sandboxed profile.

Problem: "Missing WebView2 Runtime" alert on an older PC

Solution: Microsoft Edge WebView2 is built into Windows 11 and recent Windows 10 updates. If testing on an older Windows 10 build, download the free evergreen runtime installer from Microsoft's official site: https://developer.microsoft.com/microsoft-edge/webview2/.

❤️ Support the Developer (Wildcat Studio)

WebToApp Studio Pro is actively maintained by Wildcat Studio. If this utility saves you time and accelerates your releases, consider buying me a coffee or starring the repository!