Build a Svelte app

niso’s examples are Svelte 5 apps, because Svelte compiles to plain DOM calls with no virtual DOM, which suits niso well. Nothing in niso is Svelte-specific: React, Vue or plain JavaScript work the same way, through the DOM.

The shortest path is Getting started, which builds a hello example and runs it headless, on the desktop and on phones. This page is about what to do next.

The layout of an example

examples/<name>/main.js mounts the root component on document.body, and examples/build.mjs bundles it with esbuild into examples/dist/<name>.js (the script a host runs) and examples/dist/<name>.html (the same page for a browser, to compare against):

(cd examples && pnpm install --frozen-lockfile && node build.mjs)
hosts/iced/build.sh counter
hosts/apple/build.sh counter
hosts/android/build.sh counter

Look native

Add <meta name="niso-platform-style" content="auto"> with <svelte:head>, which gives the page the platform’s base style and the --niso-* tokens to style with; the tokens exist only while the meta does (Platform style). Use <button>, <input type="range">, <input type="checkbox" switch> and radio groups for the platform’s own controls (Native controls). examples/controls shows each.

State that outlives the app

localStorage and IndexedDB persist per app (Storage), so an app can keep its state across launches as a web app would.

Beyond the window

Add a widget, a Live Activity or Now Playing controls from the same component: Add a home screen widget, Add a Live Activity, Media session.