Getting Started

This guide walks you through creating your first Mosis app in under 10 minutes.

Prerequisites

A Mosis developer account (sign up here)
Text editor (VS Code recommended)
Desktop Designer for testing (download from portal)

Step 1: Create a New App

Log in to the Developer Portal
Click Create New App
Fill in the details:
- Package ID: com.yourname.myapp (unique identifier)
- App Name: My First App
- Description: A simple hello world app
Click Create

Step 2: Set Up Your Project

Create a project folder with this structure:

myapp/
├── manifest.json
├── icon.png
└── assets/
    ├── main.rml
    └── styles.rcss

manifest.json

{
  "id": "com.yourname.myapp",
  "name": "My First App",
  "version": "1.0.0",
  "version_code": 1,
  "entry": "assets/main.rml",
  "permissions": [],
  "min_mosis_version": "1.0.0",
  "author": {
    "name": "Your Name",
    "email": "you@example.com"
  },
  "icons": {
    "32": "icon.png",
    "64": "icon.png",
    "128": "icon.png"
  }
}

assets/main.rml

<rml>
<head>
    <title>My First App</title>
    <link type="text/rcss" href="styles.rcss"/>
</head>
<body>
    <div class="container">
        <h1>Hello, Mosis!</h1>
        <p>This is my first app.</p>
        <button id="click-me" onclick="handleClick()">Click Me</button>
        <p id="counter">Clicks: 0</p>
    </div>

    <script>
        local clicks = 0

        function handleClick()
            clicks = clicks + 1
            document:GetElementById("counter").inner_rml = "Clicks: " .. clicks
        end
    </script>
</body>
</rml>

assets/styles.rcss

body {
    font-family: LatoLatin;
    background-color: #1a1a2e;
    color: #ffffff;
}

.container {
    padding: 20dp;
    text-align: center;
}

h1 {
    font-size: 24dp;
    margin-bottom: 10dp;
    color: #00d4ff;
}

p {
    font-size: 16dp;
    margin-bottom: 20dp;
}

button {
    background-color: #00d4ff;
    color: #1a1a2e;
    padding: 12dp 24dp;
    border-radius: 8dp;
    font-size: 16dp;
    font-weight: bold;
}

button:hover {
    background-color: #00b8e6;
}

button:active {
    background-color: #0099cc;
}

#counter {
    font-size: 18dp;
    margin-top: 20dp;
}

icon.png

Create a 128x128 PNG icon for your app. Use any image editor or find a placeholder icon.

Step 3: Test Locally

Download and install the Desktop Designer from your dashboard
Open a terminal in your project folder
Run:

mosis-designer.exe assets/main.rml

The designer window opens showing your app. Changes to RML, RCSS, or Lua files automatically reload.

Step 4: Build Your Package

From your project folder:

mosis build

This creates myapp.mosis - your packaged app ready for submission.

Step 5: Submit for Review

Go to your app in the Developer Portal
Click Create New Version
Upload your .mosis package
Add release notes
Click Submit for Review

Your app will be reviewed automatically. If it passes all checks, you can publish it to the store.

Next Steps

UI Design Guide - Learn RML/RCSS in depth
Lua Scripting Guide - Add complex interactivity
Permissions Guide - Request device capabilities
Publishing Guide - Tips for successful submissions

Example Apps

Check out these example apps to learn from:

App	Description	Source
Calculator	Basic calculator	View
Notes	Simple note-taking	View
Timer	Countdown timer	View

Getting Help

Join our Discord community
Check the FAQ
Search the Troubleshooting guide

3.8 KiB Raw Blame History