How Flutter Rebuilt Its Websites Using Dart and Jaspr

Flutter's official websites—dart.dev, flutter.dev, and docs.flutter.dev—were once a mix of different technologies (Eleventy with Node.js and Wagtail with Python/Django). This fragmented setup made maintenance and contributions cumbersome. In a major shift, the team migrated all three sites to Jaspr, an open-source Dart-based web framework. This move unified the stack, allowing developers to contribute using only Dart, and brought interactivity and performance improvements. Below, we answer key questions about this transformation.

Why did Flutter decide to migrate its websites to Jaspr?

The primary motivation was to eliminate the fragmentation in their website stack. Previously, dart.dev and docs.flutter.dev used Eleventy (Node.js static-site generator), while flutter.dev ran on Wagtail (Python/Django CMS). This required contributors to know both Node.js and Python ecosystems, adding friction and limiting code sharing. As the sites evolved with richer interactive elements like quizzes and code samples, the existing tools made implementation difficult and required custom DOM logic. The team wanted a single, consistent stack built entirely on Dart—the language they and their community already know. Jaspr, a Dart-based framework supporting static site generation, server-side rendering, and client-side rendering, provided the perfect unified solution, reducing setup time and enabling seamless contribution from any Dart developer.

How Flutter Rebuilt Its Websites Using Dart and Jaspr

What is Jaspr and how does it work with Dart?

Jaspr is an open-source web framework written in Dart that offers multiple rendering modes: static site generation (SSG), server-side rendering (SSR), and client-side rendering (CSR). It is designed to feel natural for Flutter developers because its component model mirrors Flutter widget syntax. For example, a Jaspr component uses the same build method pattern as Flutter: class FeatureCard extends StatelessComponent with a build method returning HTML elements like div and h3. This familiarity means any Flutter developer can immediately write Jaspr components without learning a new paradigm. Jaspr also integrates with Dart's ecosystem, allowing reuse of packages and tools. The framework generates standard HTML and CSS, ensuring compatibility with the DOM model of the web while providing a Flutter-like coding experience.

What benefits does the unified Dart stack provide?

Unifying all three websites under a single Dart stack brings several key benefits. First, it drastically reduces the learning curve for contributors: anyone familiar with Dart and Flutter can immediately work on any site without needing to understand Node.js or Python. Second, code sharing becomes straightforward—common components (like navigation bars or code snippets) can be reused across dart.dev, flutter.dev, and docs.flutter.dev, eliminating duplication. Third, maintenance and updates are simpler because only one toolchain and build process need to be managed. The team also gains improved performance and easier debugging. Finally, as Flutter’s community grows, the barrier to contributing to official documentation and marketing sites lowers, encouraging more open-source participation.

How did the previous setup hinder interactivity, and how does Jaspr help?

With the old static-site generator and CMS, introducing interactive elements like quizzes, live code examples, or dynamic tutorials required one-off hacks and imperative JavaScript DOM manipulation. Each feature needed custom, non-trivial code that was hard to maintain and inconsistent across sites. Jaspr, with its client-side rendering capabilities, allows building interactive components declaratively using Dart. For instance, a quiz can be written as a Jaspr component with state management similar to Flutter widgets, making it reusable and testable. Since Jaspr components compile to efficient JavaScript, they run directly in the browser without needing additional frameworks. This approach simplifies development, reduces bugs, and ensures a consistent user experience across the entire Flutter documentation ecosystem.

What is the new contribution workflow for developers?

Previously, contributing to flutter.dev required setting up a Python/Django environment with Wagtail, while contributions to dart.dev needed Node.js and Eleventy. Developers had to switch contexts and manage multiple dependencies. With the migration to Jaspr, the workflow is now uniform: contributors only need Dart SDK and Jaspr CLI. They can clone the repository, run jaspr build or jaspr serve, and start editing. The code structure follows Flutter patterns, so changes to components are intuitive. Pull requests become simpler, and the team can review code more efficiently since everyone speaks the same language. This unification also fosters a stronger community—any Flutter enthusiast can now help improve the official websites without learning additional ecosystems.

How does Jaspr compare to other Dart web frameworks?

Jaspr is unique among Dart web frameworks because it closely mirrors Flutter’s component architecture while targeting the DOM directly. Other Dart frameworks like AngularDart are heavier and require learning Angular concepts. Plain Dart web development with dart:html often leads to imperative code. Jaspr strikes a balance: it gives Flutter developers a familiar declarative syntax (StatelessComponent, BuildContext), but outputs standard HTML/CSS rather than rendering via Canvas. It also supports multiple rendering modes (SSR, SSG, CSR) out of the box, making it suitable for both static documentation sites and dynamic apps. For Flutter’s needs—building content-heavy, interactive websites—Jaspr offered the best combination of developer experience, performance, and simplicity.

What’s next for Flutter websites after the migration?

With the stack unified, the team plans to continue enhancing the sites with richer interactive features. This includes more dynamic code examples (like live editing), integrated quizzes for tutorials, and personalized user experiences. The Jaspr framework will also evolve, potentially adding more Flutter-like components and optimizations. The shared codebase allows faster iterations—improvements to one site can be easily ported to others. Additionally, the open-source community can now contribute more easily, so future updates may include community-driven features. The migration sets a foundation for a more cohesive Flutter web presence, where the official websites become not just documentation but interactive learning platforms, all powered by Dart and Jaspr.

Tags: