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);

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

FuseRuntime.create() — 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.
registerFusePackages(runtime) — auto-generated by fuse link. Calls the register function of every Fuse package in your dependencies, wiring up all their widgets, controllers, and pages.
FuseView — renders the JS component tree as native Flutter widgets.

You can register app-level widgets right after packages:

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

JS entry point

src/App.tsx

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>
  );
}

JSX elements like <view> and <text> 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";

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
Configuration — customize fuse.config.ts