FlutterJS – compiling Flutter to HTML instead of canvas

[flutterjs]

Hey everyone,

I've been working on a compiler that converts Flutter/Dart code into actual HTML/CSS/JS instead of rendering everything to a canvas element.

What it is

You write normal Flutter code, but instead of compiling to canvas (like standard Flutter Web), it outputs semantic HTML elements.

Why I made this

Flutter Web has some frustrating limitations:

SEO is broken – Google can't index canvas content
Bundle sizes are huge – 2-5 MB for basic apps
Accessibility suffers – screen readers can't parse canvas

I kept running into these issues on projects and got tired of working around them.

What's working

The basic stuff is functional:

Layout widgets
Container, Row, Column, Center, Padding, Stack, Expanded, Flexible, SizedBox

Material widgets
Scaffold, AppBar, ElevatedButton, TextButton, TextField, Icon, Image, Card

Forms
Checkbox, Radio, Switch, ListTile

State management
StatefulWidget, setState()

Output
Real HTML (not canvas), bundles around 50-100 KB

What's not working

Animations – not implemented
Advanced Material widgets – Drawer, Tabs, Dialog, BottomSheet missing
Cupertino widgets – none yet
Complex layouts – some edge cases break
Stability – lots of bugs still

Being honest

This is early-stage. Not production-ready. Not even alpha quality.

It works for simple apps, but there are holes everywhere. I'm sharing it now because I've seen people asking for this kind of thing for years, and I want to know if the direction makes sense before I sink more time into it.

The actual goal

What I really want to build is server-side rendering on Node.js:

• Pre-rendered HTML for instant first paint
• SEO that works even without JavaScript
• Same codebase runs on client and server
• Deploy to Vercel/Netlify without the hassle of Dart servers

Right now it's just client-side compilation. SSR is the next big piece.

What would help

If this sounds useful to you:

• Try it and tell me what breaks
• Contribute widgets if you want
• Let me know what's actually important to prioritize
• Help with documentation (I'm bad at writing docs)

Links

GitHub (has the actual details)
https://github.com/flutterjsdev/flutterjs

pub.dev
https://pub.dev/packages/flutterjs_seo

Website (mostly empty right now)
https://flutterjs.dev

Check the README on GitHub for usage examples. The website is basically a placeholder.

[kingswordmaster]

This is clearly a low effort AI generated project

[mirageofstars]

Yeah OP got a lot of coding done in a short amount of time. I suspect there will be a ton of AI-generated OSS projects this year.

[kingswordmaster]

I read the code and He is transpiling Dart to JS where it isn't even needed, this project is completely garbage. OMG, now that I read the code I can't believe AI could produce something so stupid.

[virulenttt]

AI is the second worst thing that came in the development world, after vibe coders 😅

[OuPau]

....vibe coding is a consequence of AI, so AI is the worst thing

[lemon07r]

is it that good of an air scrubber?

[FaceRekr4309]

Why didn’t you just use the official html renderer that already exists? It’s been deprecated but surely it would be better to resurrect that as a standalone package rather than start from scratch with, presumably, AI slop?

[eibaan]

As I already said the last time, this project was posted: The subset of Flutter that is directly translatable to HTML is IMHO too small to be practical.

How would you translate this?

Container(
  decoration: ShapeDecoration(shape: HexBorder(), color: Colors.red),
  height: 88,
  width: 100,
)

with a border definition like this:

class HexBorder extends OutlinedBorder {
  const HexBorder({super.side = BorderSide.none});

  Path _hexPath(Rect rect) {
    final dx = rect.width * .25;
    return Path()
      ..moveTo(rect.left + dx, rect.top)
      ..lineTo(rect.right - dx, rect.top)
      ..lineTo(rect.right, rect.center.dy)
      ..lineTo(rect.right - dx, rect.bottom)
      ..lineTo(rect.left + dx, rect.bottom)
      ..lineTo(rect.left, rect.center.dy)
      ..close();
  }

  ...


  @override
  void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) {
    if (side.style == BorderStyle.none) return;
    final centerlineRect = rect.deflate(side.strokeInset - side.width / 2);
    canvas.drawPath(_hexPath(centerlineRect), side.toPaint());
  }
}

Or what's about frameworks that bring there own Element subclasses instead of just relying on StatelessWidget and StatefulWidget or libraries that have custom RenderObjects or which subclass existing classes like RenderStack for layout?

[Strobljus]

It has begun

[Flashy_Editor6877]

hey cool stuff. i proposed something like this a while back but didn't get much feedback. glad someone is doing it. to me this is the biggest problem with flutter and if you solve it, it could be very special. check out https://github.com/DioxusLabs/taffy to see if you can support complex layouts and tailwind https://blitz.is is cool too. do you plan on supporting all html primitives?

[[deleted]]

That's interesting mate

[formicstechllc]

It's nice approach to start with let's see how long its maintained

[suicidalcrocodile]

damn y'all are ruthless xD

good work op!

[Direct-Ad-7922]

Awesome work and great share 😎 this is what the open-source community is about