JavaScript Rendering
for Data Visualization
Charts, diagrams and interfaces drawn by one engine. Flutter's widget model, rendered to SVG or Canvas.
$ npm install flitter-ui
Libraries on one engine
Each library is a set of Flitter widgets, so they share layout, painting, gestures and animation, and render anywhere Flitter does.
shadcn-style charts installed as source. 20 chart types, each in AG and Toast styles.
The rendering engine: 50+ widgets, constraint layout, gestures and animation controllers, with React and Svelte adapters.
Container({
padding: EdgeInsets.all(16),
child: Text("Hello, canvas"),
})Node-and-edge editors with React Flow's interactions, like the ERD canvas in easyrd. Pluggable layouts, SVG or Canvas.
No screenshots here
Every chart on this page is drawn by Flitter as you scroll. Hover one to see its tooltip, or switch the theme up top.
Flutter's API, written in JavaScript
If you have built a Flutter widget, you can read Flitter. Same widgets, same constraints, one engine for SVG and Canvas.
Declarative code that reads like a blueprint.
Box model layouts -- constraint-based, predictable, powerful.
SVG or Canvas? Both. One API, two renderers.
Interactive charts with click, hover, and gesture support.
Canvas events handled elegantly, no hacks required.
50+ widgets ready to compose into anything you imagine.
Rendering performance that scales with your ambition.
Running in production at easyrd.dev
A database diagram editor used by more than 10,000 people, built with SvelteKit, Flitter and DBML.
Daeseung Moon
Maintainer
Korean frontend developer, 7 years in. I love building visual experiences on the web.
Also by Daeseung: ssgoiPage transitions for the web, 800+ stars on GitHubDraw something
Start from a chart in the gallery, or build your own widget tree on the core engine.