Flutter’s official websites—dart.dev, flutter.dev, and docs.flutter.dev—were once built with a mix of tools like Eleventy (Node.js) and Wagtail (Python/Django). This fragmented approach made maintenance and contributions cumbersome for developers outside the Dart ecosystem. In a major shift, the team migrated all three sites to Jaspr, an open-source Dart web framework. This move unified the stack under a single language, streamlining development and enabling richer interactivity. Below, we answer key questions about the migration, the framework, and its impact.
Why did Flutter rebuild its websites?
The previous setup worked but grew increasingly fragmented. dart.dev and docs.flutter.dev used Eleventy, a Node.js static-site generator, while flutter.dev ran on Wagtail (Python/Django). This mix forced contributors to learn multiple non-Dart ecosystems—Node.js for some, Python for others—raising setup friction and limiting code reuse. The team also wanted enhanced interactivity (e.g., quizzes, interactive code samples), but the old tools required one-off DOM scripting for each new feature. A unified Dart-based stack promised a consistent developer experience and easier innovation.
What was the old technical stack, and what problems did it cause?
Flutter’s websites relied on two separate systems: Eleventy (Node.js) for documentation sites and Wagtail (Python/Django) for the main Flutter site. This split meant that anything interactive, like running code snippets or embedding quizzes, needed custom JavaScript or Python integrations. The maintenance burden grew as each site evolved independently; a fix on one wouldn’t automatically apply to the other. Contributors outside the Dart team had to install Node.js, Python, and their respective package managers just to get started. With the new Jaspr-based stack, everything uses Dart exclusively—simplifying tooling and reducing onboarding time from hours to minutes.
What is Jaspr, and why was it chosen over other frameworks?
Jaspr is a versatile Dart web framework supporting client-side rendering, server-side rendering, and static site generation. Unlike Flutter’s own web rendering (which uses CanvasKit or HTML), Jaspr works directly with the DOM, producing standard HTML, CSS, and JavaScript. The team chose Jaspr for several reasons:
- It’s Dart-native, so existing Flutter/Dart skills transfer seamlessly.
- Its component model mirrors Flutter widgets, making code intuitive for Flutter devs.
- It enables interactive features without low‑level DOM manipulation.
- Being open source, it aligns with Flutter’s community ethos.
How does Jaspr let Flutter developers reuse their skills?
Jaspr’s component architecture is deliberately similar to Flutter’s widget system. A developer who writes StatelessWidget in Flutter can immediately understand a Jaspr StatelessComponent. For example, a card component in Jaspr uses div, h3, and p with a Dart class that feels like a familiar widget. This means contributors can build web pages using Dart without learning a new paradigm. All existing Dart tooling—package management, linting, testing—works identically, and code can be shared between Flutter apps and Jaspr web components. The result is a unified mental model for developers already invested in the ecosystem.
What benefits does the migration bring to community contributors?
Contributors now only need Dart installed to work on any of the three websites. Previously, they had to juggle Node.js for documentation and Python for the main site—each with its own build scripts, dependencies, and quirks. The new stack eliminates that overhead. Additionally, the Jaspr setup uses a familiar file structure and component hierarchy, so anyone who has contributed to Flutter or written Dart can jump in. The team also noted a significant reduction in setup time: from multiple environment configurations to a single dart run command. This lowers the barrier for external contributions and encourages more community-driven improvements.
What interactive capabilities does Jaspr unlock for the sites?
Jaspr’s client-side rendering allows the team to embed rich interactive elements directly into static pages. Examples include:
- Dynamic code quizzes that check user answers on the browser.
- Interactive examples where users modify Dart code and see results in real time.
- Scrolling animations and interactive diagrams that respond to user input.