Search Documentation

Search guides, functions, classes, interfaces, and more

MobyApps Splash

@mobyapps/splash

MobyApps Splash

@mobyapps/splash is a small JavaScript library for the startup splash screen in MobyApps native apps.

It connects a static HTML page to the native host: progress while miniapps update, then a controlled handoff to the boot miniapp. It does not use @mobyapps/sdk or @mobyapps/bridge.

When to use it

Use Splash.js when you need a splash screen that:

  • Shows update progress while the host checks and downloads miniapp zips
  • Dismisses on your schedule — you call splash.complete(id) after animations finish
  • Applies theme via splash.theme over localStorage.theme (same key miniapps write with set_theme)
  • Reads shared params via splash.params.get() from localStorage['mobyapps.splash'] (non-theme bag written by moby.splash.params)

Ship a self-contained splash archive (dist/ as splash.zip or boot miniapp splash/): compile HTML, CSS, JS, and assets into that folder so the host loads everything from disk — no network fetches. That matters for cold start and offline modes.

Use a miniapp (@mobyapps/sdk) for product UI after launch. Use Splash.js only for the cold-start screen.

How it fits

  1. Native shows splash HTML (embedded splash.zip or splash/ in the boot miniapp archive).
  2. The page loads @mobyapps/splashwindow.splash.
  3. Native sends window.splash.update(data); your page updates UI and calls splash.complete(id).
  4. Native opens the boot miniapp.

Install

pnpm add @mobyapps/splash

Registry: npm.mobyapps.dev — see Install @mobyapps packages.

ESM

import splash from '@mobyapps/splash'

splash.events.on('update', async (data) => {
  // progress UI, min animation time …
  splash.complete(data.id)
})

Static HTML (IIFE)

Copy node_modules/@mobyapps/splash/dist/splash.js into your splash dist/, or scaffold with @mobyapps/create-splash:

<script src="splash.js"></script>
<script type="module" src="main.js"></script>

Browse the API Reference in the sidebar for splash.update, splash.complete, splash.theme, splash.params, events, and types.