From Fragmented Stacks to a Unified Dart Experience: How Flutter’s Websites Got Rebuilt with Jaspr
The Flutter and Dart teams have long relied on websites that were built with a hodgepodge of technologies: Eleventy for documentation, Wagtail for the main Flutter site, and scattered Dart components for interactivity. This fragmentation made contributions a chore—developers needed to know Node.js, Python, and Dart just to maintain the sites. To streamline development and harness the full power of Dart, they migrated all three core websites—dart.dev, flutter.dev, and docs.flutter.dev—to Jaspr, an open-source Dart web framework. The result is a unified stack where contributions require only Dart, and the developer experience feels seamless for Flutter enthusiasts. Below, we explore the motivations, the challenges of the old setup, and how Jaspr transformed the workflow.
What Prompted the Rebuild of dart.dev, flutter.dev, and docs.flutter.dev?
The primary driver was the growing complexity and cost of maintaining a fragmented technical stack. The documentation sites ran on Eleventy (a Node.js static-site generator), while flutter.dev was powered by Wagtail (a Python/Django CMS). This meant contributors had to juggle entirely different ecosystems—Node.js for one set of files, Python for another. Even surrounding infrastructure and interactive components were written in Dart, but those lived in isolation. As the sites needed richer interactivity—like code samples, quizzes, and dynamic tutorials—each new feature required custom, one-off DOM manipulation. The team wanted a single, consistent foundation built on the language they already used daily: Dart. That’s when they turned to Jaspr.
What Were the Main Drawbacks of the Previous Technical Stack?
The old setup created a high friction point for both internal teams and community contributors. To improve the Eleventy-powered docs, you needed Node.js experience; to modify the Wagtail-based flutter.dev, you needed Python and Django knowledge. This separation meant code could not be shared between sites, leading to duplicated effort and inconsistency. For example, a reusable interactive component had to be written twice—once for each ecosystem. Additionally, the team’s ambitions for interactive features (like real-time code editors or in-page quizzes) were stifled because each new element required manual, imperative DOM updates. The fragmented stack also made global changes—such as a design refresh—far more labor-intensive than they should have been.
Why Was Jaspr Chosen as the Unified Solution?
Jaspr stood out because it is a Dart-native web framework that supports multiple rendering modes: client-side, server-side, and static site generation. Beyond being written in a language the team already knows, Jaspr’s component model was deliberately designed to feel familiar to Flutter developers. A component like FeatureCard is written with the same compositional patterns as a Flutter widget—using div, h3, p in a tree-like syntax that mirrors Flutter’s widget tree. This means anyone with Flutter experience can read and write Jaspr code immediately. The framework also offers robust support for interactivity without resorting to imperative DOM logic, making it a perfect fit for the team’s future plans.
How Does Jaspr Enable a Consistent Developer Experience and Code Sharing?
By moving all three sites to Jaspr, the Flutter and Dart teams now have a single repository and build pipeline. Contributors only need to know Dart—no more switching between Node.js and Python. Code for interactive components, navigation bars, or style utilities can be shared across dart.dev, flutter.dev, and docs.flutter.dev with ease. For instance, a quiz component written once in Jaspr can be reused on any page. The consistent developer experience also lowers the barrier for new contributors: they can learn the stack by leveraging their existing Flutter knowledge. This unification reduces maintenance overhead and speeds up development of new features.
How Do Existing Flutter and Dart Skills Transfer to Using Jaspr?
Jaspr’s component architecture is intentionally modeled after Flutter’s widget system. Developers write a class that extends StatelessComponent or StatefulComponent, define a build method that returns a tree of HTML elements (like div, h3, p), and use the same state management patterns. Even props—called required fields in the constructor—feel exactly like Flutter’s required named parameters. This means a Flutter developer can open a Jaspr file and instantly understand the structure. The learning curve is minimal; the main difference is that the output is DOM-based (HTML and CSS) instead of a Skia canvas. This direct transfer of skills makes Jaspr an ideal bridge between Flutter’s mobile UI and the traditional web.
What Future Capabilities Does This Migration Unlock for the Websites?
With Jaspr, the teams can now implement richer interactive features without resorting to one-off JavaScript. They plan to add interactive code samples that run live in the browser, quizzes embedded in documentation, and dynamic tutorial paths that adapt to user input. Because Jaspr supports both server-side rendering (for SEO) and client-side interactivity, these features can be built once and work across all three sites. The unified stack also makes it easier to experiment with new content formats—such as interactive diagrams or step-by-step guided tours—that would have been prohibitively expensive with the old fragmented tooling.
How Does Jaspr Handle Different Rendering Modes, and Why Does It Matter?
Jaspr supports three rendering modes out of the box: static site generation (SSG), server-side rendering (SSR), and client-side rendering (CSR). SSG is used to pre-build the documentation pages as static HTML for fast load times and SEO. SSR allows pages like tutorials to be rendered on the server, improving initial load and indexability. CSR powers interactive components—such as a live code editor—that run entirely in the browser after the page loads. The team can mix these modes within a single site; for example, a page can be statically generated but contain a CSR widget. This flexibility was critical because it allowed the migration to happen incrementally without sacrificing performance or interactivity.