Overview

Applet is a Flutter-based JavaScript hot-update framework.

Applet is designed for teams that want native Flutter UI with a scripting style closer to SwiftUI and Jetpack Compose: functions describe UI for the current state, callbacks update state, and Flutter owns rendering.

Native rendering

Renders real widgets, not a WebView.

JavaScript

ES modules, local state, and closure callbacks by default.

Close to Flutter

Material, Cupertino, and the Flutter concepts you already know.

Production ready

Production-focused runtime behavior and hot update delivery.

Chapters

Quick startAdd Applet, load JavaScript, and render the first native Flutter UI.

TutorialLearn the app model, state, theming, and adaptive layout step by step.

Advanced usageUse modules, hot update delivery, runtime safety, and host integration.

DevelopmentUnderstand internals, development checks, and continuous integration.

Declarative model

Applet draws on SwiftUI and Jetpack Compose: write functions that describe UI for the current state. The difference is that those functions are JavaScript modules loaded by Flutter at runtime.

import "@app/material";

export default function App() {
  const count = State(0);

  return MaterialApp({
    theme: ThemeData({
      useMaterial3: true,
      colorScheme: ColorScheme.fromSeed({ seedColor: "#006a6a" }),
    }),
    home: Scaffold({
      appBar: AppBar({ title: Text("Applet") }),
      body: Center(
        VStack(
          Text("Count: " + count).style({ theme: "headlineMedium" }),
          FilledButton.icon({
            icon: Icon(Icons.add),
            label: Text("Increment"),
            onPressed: () => count.update((value) => value + 1),
          })
        ).gap(12).min()
      ),
    }),
  });
}

Reading path

1. Use Quick start to create the first applet.
2. Work through App model and Components and screens before adding state.
3. Consult Modules and imports when splitting applets or preparing remote delivery.
4. Use Dart host API and JavaScript API as references while building.