FlutterJS – Run Flutter code, get semantic HTML output
Posted by flutterjs 2 hours ago
Hey HN! I'm the creator of FlutterJS. The Problem: Flutter Web is great for building apps, but terrible for websites. It renders everything to Canvas/WASM, which means: 2-5 MB bundles (slow on mobile) Zero SEO – Google can't index canvas pixels Poor accessibility (no semantic HTML for screen readers) 3-8 second initial load times If you've ever tried to build a marketing site or blog with Flutter Web, you've hit this wall. The Solution: FlutterJS compiles your Flutter/Dart code to semantic HTML + CSS + JavaScript instead of Canvas. Same Flutter syntax you already know, but the output is: ~50-100 KB bundles (50x smaller) Full SEO support (real HTML elements) Sub-1-second first paint Accessible by default How it works: You write normal Flutter/Dart code Our Dart CLI analyzes your AST and generates an Intermediate Representation (IR) The IR gets transpiled to JavaScript with a lightweight runtime Output is semantic HTML that search engines can index
Current Status: Beta (v0.9.x). We support the most common Material widgets (Scaffold, AppBar, Text, Button, Row, Column, StatefulWidget, etc.). Animation support and full Material 3 are on the roadmap. Known Limitations: Not all Flutter widgets are implemented yet (see compatibility matrix in README) Method tear-offs need wrapping in lambdas for now Complex animations aren't supported yet This is best for content-heavy sites, not graphics-intensive apps Why I built this: I kept running into clients who loved Flutter's DX but needed their sites to rank on Google. Flutter Web couldn't do that. I wanted the best of both worlds. I'd love your feedback, especially: Have you hit this SEO wall with Flutter Web? What widgets would you need for your use case? Any concerns about the approach? Happy to answer questions about the architecture, performance claims, or roadmap!
Comments
Comment by touwer 1 hour ago