Getting Started

Prerequisites

Node.js (or Bun) and a package manager (bun, npm, pnpm, yarn)
Flutter SDK

Project structure

A Fuse project has JS and Dart side by side:

my-app/
  src/
    App.tsx              # Your SolidJS entry point
  dart/
    lib/
      main.dart          # Flutter entry point
      _generated/        # Auto-generated by `fuse link`
  fuse.config.ts         # Fuse configuration
  package.json

Dart entry point

dart/lib/main.dart

import 'package:flutter/material.dart';
import 'package:solid_fuse/solid_fuse.dart';
import '_generated/fuse_packages.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  final runtime = await FuseRuntime.create();
  registerFusePackages(runtime);
  await runtime.start();

  runApp(MaterialApp(home: SafeArea(child: FuseView(runtime: runtime))));
}

FuseRuntime.create() — constructs the runtime and initializes FFI. Does not start the JavaScript engine yet.
registerFusePackages(runtime) — auto-generated by fuse link. Calls the register function of every Fuse package in your dependencies, wiring up all their widgets, handles, and pages.
runtime.start() — starts the JavaScript engine. In debug mode it connects to the Vite dev server for HMR. In release mode it loads a pre-built bundle from Flutter assets. All widget/handle/page registrations must be in place before this runs.
FuseView — renders the JS component tree as native Flutter widgets.

You can register app-level widgets right after packages, before start():

registerFusePackages(runtime);
runtime.registerWidget('videoPlayer', VideoPlayer.new);
await runtime.start();

JS entry point

src/App.tsx

import { Text, View } from "solid-fuse";

export default function App() {
  return (
    <View padding={24} flex={{ gap: 12 }}>
      <Text fontSize={24} fontWeight="bold">Hello Fuse</Text>
      <Text color="grey">SolidJS inside Flutter</Text>
    </View>
  );
}

Wrapper components like View and Text are imported from solid-fuse and map directly to registered Flutter widgets. The Solid compiler is pre-configured — you don't need a vite.config.ts.

Running the app

bun dev

This starts Vite and Flutter together. Changes to your JSX hot-reload instantly via HMR.

Using SolidJS

Fuse uses standard SolidJS reactivity. Signals, effects, memos, Show, For, Switch — they all work as expected:

import { createSignal, Show, For } from "solid-js";
import { Text, View } from "solid-fuse";

function TodoList() {
  const [todos, setTodos] = createSignal(["Learn Fuse", "Build app"]);
  const [showDone, setShowDone] = createSignal(false);

  return (
    <View flex={{ gap: 8 }} padding={16}>
      <For each={todos()}>
        {(todo) => <Text fontSize={16}>{todo}</Text>}
      </For>
      <Show when={showDone()}>
        <Text color="green">All done!</Text>
      </Show>
    </View>
  );
}

Next steps

UI & Layout — build interfaces with views, text, gestures, and flex
Creating Widgets — add your own Flutter widgets
Using pub.dev packages — wrap any Flutter package (charts, maps, video) for JSX
Configuration — customize fuse.config.ts