Project Overview

To create a cross-platform desktop application, you need to create a MōBrowser project. It contains all the files and dependencies required to build and run your desktop application.

Creating a Project 

Make sure your current working directory is the one where you intend to create a project. Run the following command in your command line:

npm create mobrowser-app@latest

This command will install and execute create-mobrowser-app, the official project scaffolding tool. You will be presented with prompts for your application name, the preferred frontend framework, UI component library, and language.

The scaffolding tool allows generating a project with the following frontend frameworks:

• React
• Vue
• Vanilla (HTML, CSS, and JavaScript)
• None (website as a frontend)

The following UI component libraries are supported:

• Ant Design
• Material UI
• Shadcn/ui
• Quasar

The following frontend languages are supported:

• JavaScript
• TypeScript

You will be also asked if you want to add a native C++ module to your project to access platform-specific APIs.

The generated projects includes the package.json file that contains the npm project dependencies and scripts. The package.json file is used by npm to install the project dependencies and run the project scripts.

Project structure 

The project directory structure may be different depending on the options you chose during project generation.

If you select a frontend framework and decide to add a native C++ module, then you will see the following files and folders in the generated project:

.vscode/
assets/
resources/
src/
├── main/
├── native/
├── renderer/
AGENTS.md
CLAUDE.md
CMakeLists.txt
mobrowser.conf.json
package.json
tsconfig.json
tsconfig.node.json
vite.config.ts

Here is the description of the files and folders in the project structure:

Project configuration 

The mobrowser.conf.json file is the main project and application configuration file. It contains the application name, version, author, copyright, description, and other properties.

Here’s an example of the mobrowser.conf.json file:

{
  "app": {
    "name": "Stats",
    "version": {
      "major": "1",
      "minor": "0",
      "patch": "0"
    },
    "author": "TeamDev",
    "copyright": "Copyright © 2026 TeamDev",
    "description": "System resources monitor and process explorer.",
    "locales": ["en-US"],
    "trustedOrigins": [],
    "schemes": [],
    "bundle": {
      "macOS": {
        "icon": "assets/app.icns",
        "executableName": "Stats",
        "bundleID": "com.teamdev.Stats",
        "codesignIdentity": "${MACOS_CODESIGN_IDENTITY}",
        "codesignKeychain": "${KEYCHAIN_PATH}",
        "codesignEntitlements": "assets/entitlements.plist",
        "teamID": "${MACOS_TEAM_ID}",
        "appleID": "${MACOS_APPLE_ID}",
        "password": "${MACOS_APPLE_PASSWORD}",
        "extraInfo": "",
        "installer": {
          "dmg": {
            "name": "",
            "volumeName": "",
            "volumeIcon": "assets/app.icns",
            "eula": "",
            "deltaStrategy": "BestSize",
            "window": {
              "textSize": 14,
              "skipPrettifying": false,
              "backgroundImage": "",
              "position": {
                "x": 500,
                "y": 400
              },
              "size": {
                "width": 600,
                "height": 400
              },
              "icon": {
                "size": 150,
                "position": {
                  "x": 160,
                  "y": 160
                }
              },
              "appDropLink": {
                "x": 430,
                "y": 160
              }
            }
          }
        }
      },
      "Windows": {
        "icon": "assets/app.ico",
        "executableName": "Stats",
        "signCommand": "",
        "installer": {
          "exe": {
            "name": "",
            "icon": "assets/app.ico",
            "installationGif": "",
            "packageId": "Stats",
            "installationFolderName": "Stats",
            "displayName": "Stats",
            "shortcuts": "Desktop,StartMenuRoot",
            "deltaStrategy": "BestSpeed"
          }
        }
      },
      "Linux": {
        "icon": "assets/app.png",
        "executableName": "Stats"
      }
    }
  }
}

Here’s the description of the properties in the mobrowser.conf.json file. Paths may be absolute or relative to the project root. You can reference environment variables in string values using the ${ENV_NAME} syntax, which is especially useful for signing credentials.

Application properties 

app.bundle.macOS properties 

app.bundle.Windows properties 

app.bundle.Linux properties 

vite.config.ts 

The framework uses Vite as the build tool for both the main and the renderer processes.

Each MōBrowser project includes a vite.config.ts file. It defines the build configuration for the main and the renderer processes. If the project is configured not to use a frontend framework, then the vite.config.ts file defines the build configuration for the main process only.