What is Fuse?

Fuse lets you write your UI in SolidJS and render native Flutter widgets. It's not a webview — your JSX compiles to real Flutter layout, gestures, and navigation via FJS, a high-performance JavaScript runtime built with Rust and powered by QuickJS.

Signals update widget props. Flutter rebuilds. Events flow back as function calls. The reactive loop is seamless.

Quick taste

A counter app — the JS component and the Dart entry point that boots it:

App.tsx

import { createSignal } from "solid-js";

export default function App() {
  const [count, setCount] = createSignal(0);

  return (
    <view
      flex={{ align: "center", justify: "center", expand: true }}
      padding={24}
    >
      <text fontSize={48} fontWeight="bold">
        {count()}
      </text>
      <gestureDetector onTap={() => setCount((c) => c + 1)}>
        <view
          padding={{ horizontal: 24, vertical: 12 }}
          decoration={{ color: "blue", borderRadius: 8 }}
        >
          <text color="white" fontSize={16}>
            Tap me
          </text>
        </view>
      </gestureDetector>
    </view>
  );
}

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: FuseView(runtime: runtime)));
}

That's the entire app. fuse dev starts both Vite and Flutter — hot module replacement included.

What's next

Getting Started

Set up your first Fuse project

UI & Layout

Build interfaces with views, text, and flex

Creating Widgets

Add your own Flutter widgets to Fuse

Architecture

How the pipeline works under the hood