janela

Five targets, one runtime

The same main.ts, the same typed contract and the same frontend build for every platform. Only the shell underneath differs — each one drives the webview the OS already ships.

Commands, the typed contract, events, async commands and file I/O behave the same on all five — the shell owns the clock and the file queue on each. Native file dialogs and runtime window control are desktop-only for now; on mobile they report clearly when called.

One language, both sides of the window

Register commands in TypeScript that compiles to native code. Call them from the page with a promise. Push events back. That's the whole API — and it will feel familiar if you've used Tauri.

import type { JanelaApp } from "janela/host";

// one declaration; the page is checked against it
export type AppCommands = {
  add: (args: { a: number; b: number }) => number;
};
export type AppEvents = { added: number };

// the app, carrying its contract
export type App = JanelaApp<AppCommands, AppEvents>;

export function setup(app: App) {
  app.command("add", (args) => {
    // args inferred; return type checked
    app.emit("added", args.a + args.b);
    return args.a + args.b;
  });
}

import { createClient } from "janela/api";
// type-only: erased, no host code in the bundle
import type { App } from "../src-host/main";

const client = createClient<App>();

const sum = await client.invoke("add", { a: 2, b: 40 });
// sum: number — checked against the host's contract

const off = client.on("added", (payload) => {
  console.log("host says:", payload);  // payload: number
});

Features

A worked example — commands, events, and a file reader — lives in examples/demo.

Quick start

Node 24+ and a C++ toolchain for the platform you are building: Xcode Command Line Tools on macOS, g++ + libwebkit2gtk-4.1-dev on Linux, an llvm-mingw clang on Windows. iOS additionally needs Xcode and zig; Android needs a JDK, the Android SDK, the NDK and zig.

$ pnpm create janela                # prompts for a name and a template
$ cd my-app                         # deps are already installed
$ janela dev                        # Vite dev server + HMR, in a native window
$ janela build                      # .janela/out/my-app  (+ .app on macOS)
$ janela build --target ios         # simulator .app
$ janela build --target android     # .apk

What comes out, measured on an Apple Silicon Mac:

All figures measured directly at 0.14.1 on scriptc 0.0.36 — the desktop row roughly halved when 0.0.36 added stdlib tree-shaking, and the mobile rows fell 43% and 31% once janela dead-stripped the two library-mode links that tree-shaking does not reach. Every one of the five templates — vanilla, Vue, React, Svelte, Solid — is built and run on all three targets; the full matrix is in docs/frontend.md. A React frontend adds roughly 130 KB over Vue on desktop, far less in an APK.

Where it stands