BENJAMIN Originals

Build apps for BenOS.

If you can write HTML, CSS and JavaScript, you can make an app for BenOS Genesis. Build it in BenStudio, test it right there, then send it in for the App Store.

Submit an app App Store on GitHub

Four steps to the App Store.

  1. Build it in BenStudio

    Start from a template and write HTML, CSS and JavaScript, with a live preview at desktop, tablet and phone sizes.

  2. Save as App

    Press Save as App. Your app goes to Applications and opens in its own window, like any other app.

  3. Send it in

    Use the app submission form. You'll need to sign in with a Google account.

  4. It ships from GitHub

    Apps we accept go into the BenOS Genesis Apps repo, and the App Store installs them from there.

How apps run.

Every app is one HTML file that runs in its own sandbox. Here's what that means for your code.

One file

Your app is a single .html file. Put your CSS and JavaScript inside it, or load libraries and images from the web.

Its own sandbox

Apps can't reach BenOS, the person's files or other apps, so people can install yours without worrying.

Saving data

localStorage works, and it's kept for your app alone in the signed-in account: strings only, up to 2 MB per app. sessionStorage clears when the app closes. Cookies and IndexedDB aren't available.

Light and dark

BenOS sets data-benos-theme on your <html> to light or dark, and updates it when the person switches. JavaScript can listen for the benos-theme event.

Crashes stay put

If your app throws an error that nothing catches, BenOS shows a crash screen in your window only. The rest of BenOS keeps running.

The web

fetch works with APIs that accept requests from any website. Requests don't carry cookies, so APIs that need a sign-in cookie won't work.

What else works

Forms, alert and confirm dialogs, links that open a new tab, pointer lock for games, and full screen.

Demo Mode

Installed apps don't open while Demo Mode is on. A demo only shows the apps BenOS picks for it.

A starter app to copy.

A counter that remembers its number and follows light and dark mode. Paste it into BenStudio, press Run, then change anything you like.

Counter.html
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Counter</title>
  <style>
    /* BenOS sets data-benos-theme to "light" or "dark" */
    :root { --bg: #ffffff; --text: #1d1d24; --accent: #1f3bff; --on-accent: #ffffff; }
    [data-benos-theme="dark"] { --bg: #16161d; --text: #f4f4fa; --accent: #00e5ff; --on-accent: #05050b; }
    body {
      margin: 0; min-height: 100vh; display: grid; place-content: center; gap: 12px; text-align: center;
      font-family: system-ui, sans-serif; background: var(--bg); color: var(--text);
    }
    h1 { margin: 0; font-size: 64px; }
    button {
      font: inherit; padding: 10px 24px; border: 0; border-radius: 999px; cursor: pointer;
      background: var(--accent); color: var(--on-accent);
    }
  </style>
</head>
<body>
  <h1 id="count">0</h1>
  <button id="add">Add one</button>
  <script>
    // localStorage is kept for this app alone
    let count = Number(localStorage.getItem("count")) || 0;
    const show = () => { document.getElementById("count").textContent = count; };
    document.getElementById("add").addEventListener("click", () => {
      count++;
      localStorage.setItem("count", String(count));
      show();
    });
    show();
  </script>
</body>
</html>

Ready to send it in?

Your App Store page

The App Store shows these for every app, so it helps to have them ready.

  • The app's name, and yours as the developer
  • A category: Games, Productivity or Utilities
  • A one-line tagline and a longer description
  • An icon and an accent color
  • An age rating and a version number

Developers we've confirmed get a Verified Developer badge in the App Store.

Before you send it

  1. Try it in both light and dark mode.
  2. Check the desktop, tablet and phone previews in BenStudio.
  3. Clear everything in BenStudio's Problems and Console panels.
  4. Keep saved data well under 2 MB.
  5. Make sure the whole app is in one HTML file.

More for developers.

BenOS Genesis source

See how BenOS works on GitHub. The code is there to read, but it isn't open source: all rights are reserved.

BenOS on Scratch

BenOS on Scratch is open source under the MIT License, so you're free to remix it.

Security issues

Found a security problem? Email [email protected] rather than posting it publicly. We usually reply within 24 to 72 hours.

Questions

The Building apps answers in Support cover BenStudio and the App Store. Still stuck? Get in touch from the same page.

Made something? Send it in.

Submit your app, and it could be in the App Store for everyone on BenOS Genesis.

Submit an app About BenOS Genesis