FlutterJS: I Built a Flutter Compiler That Outputs Real HTML (Not Canvas)

Source: Dev.to

The Problem Nobody Talks About

Flutter Web has a secret: it’s not really “the web.”
When you build a Flutter Web app, everything renders to a “ element. That works for complex apps, but for websites it creates serious problems:

• No SEO – Google can’t index canvas pixels
• Huge bundles – 2–5 MB minimum, even for simple apps
• Poor accessibility – No semantic HTML for screen readers
• Slow first paint – 3–8 seconds to see content

I hit this wall when a client asked me to build a marketing site in Flutter. It looked great, but Google Search Console showed zero impressions. The site was invisible.

What If Flutter Compiled to Real HTML?

That’s what I built. FlutterJS takes your normal Flutter/Dart code:

Scaffold(
  appBar: AppBar(title: Text('My Site')),
  body: Center(
    child: Text('Hello, World!'),
  ),
)

and outputs semantic HTML:

  
## My Site

  
    
Hello, World!

  

How It Works

• Write normal Flutter code – no special syntax required.
• A Dart CLI analyzes your AST with full type resolution.
• Generates JavaScript with a lightweight VNode runtime.
• Outputs semantic HTML that search engines can index.
• The JavaScript runtime handles diffing and updates, similar to React’s virtual DOM but optimized for Flutter’s widget model.

Metrics Comparison

Roadmap

• Animations
• Advanced Material widgets (Tabs, Dialog, BottomSheet)
• Cupertino widgets
• CustomPainter

The architecture already supports these; they just haven’t been implemented.

Getting Started

# Clone the repository
git clone --recursive https://github.com/flutterjsdev/flutterjs.git
cd flutterjs

# Activate the Dart CLI
dart pub global activate --source path .
dart pub get
dart run tool/init.dart

# Use the flutterjs commands
flutterjs --help

Open http://localhost:3000 and inspect the page—you’ll see real HTML elements.

• Website:
• GitHub:
• pub.dev:

I Need Your Help

This is open source, and I’m looking for contributors. If you care about Flutter on the web:

• Test it and report bugs
• Contribute missing widgets
• Help with documentation

What widgets would you need for your use case? Let me know in the comments.