Unifying Flutter and Dart Websites with Jaspr: A Q&A on the Migration

By ✦ min read

We recently migrated three major websites—dart.dev, flutter.dev, and docs.flutter.dev—to a unified stack built with Jaspr, an open-source Dart web framework. In this Q&A, we explore the problems that motivated this change, why Jaspr was the ideal solution, and how it empowers contributors and improves site interactivity. All answers are based on our team's experience with the migration.

Why did the Flutter team decide to rebuild their websites?

The previous setup was fragmented and increasingly difficult to maintain. dart.dev and docs.flutter.dev used Eleventy, a Node.js static-site generator, while flutter.dev relied on Wagtail, a Python-based CMS. This meant contributors needed experience with JavaScript/Node.js and Python+Django, outside the Dart ecosystem the team already knew well. As our ambitions grew—adding interactive code samples, quizzes, and tutorials—each new feature required one-off imperative DOM logic. We wanted a single stack built on Dart to reduce friction, increase code sharing, and make maintenance straightforward. The migration to Jaspr unified everything under one language, allowing our community to contribute using only Dart skills.

Unifying Flutter and Dart Websites with Jaspr: A Q&A on the Migration

What was the previous technical stack, and what problems did it cause?

Originally, the documentation sites were built with Eleventy (Node.js), while the main flutter.dev site used Wagtail (Python/Django). This created a fragmented developer experience—teams had to switch between different tools and ecosystems. Code reuse was nearly impossible, and setup time for new contributors was high because they needed to learn both Node and Python tooling. Moreover, adding interactive elements required complex, one-off JavaScript or Python logic that didn't integrate well with the rest of the Flutter/Dart development model. The overall maintenance burden grew over time, making it harder to keep content consistent across sites. Our goal was to eliminate this complexity by adopting a single stack that leverages the Dart language everyone already uses.

What is Jaspr and why was it chosen?

Jaspr is a versatile Dart web framework that supports client-side rendering, server-side rendering, and static site generation. It stood out because it feels familiar to any Flutter developer—its component model is directly inspired by Flutter widgets. For example, a simple feature card can be written with div, h3, and p components, much like a Flutter widget tree. This means contributors can apply their existing Flutter knowledge without learning an entirely new paradigm. Additionally, Jaspr is DOM-based (using HTML and CSS), making it compatible with the web's native model while still embracing Dart's strengths. We chose Jaspr to unify our stack and make our sites more maintainable, interactive, and welcoming to the Flutter community.

How does Jaspr's component model relate to Flutter widgets?

Jaspr components are designed to mirror Flutter's widget architecture. A typical Jaspr component extends StatelessComponent and overrides a build method that returns a tree of HTML elements, similar to returning a widget tree in Flutter. For instance:

class FeatureCard extends StatelessComponent {
  const FeatureCard({required this.title, required this.description, super.key});
  final String title;
  final String description;
  @override
  Component build(BuildContext context) {
    return div(classes: 'feature-card', [
      h3([text(title)]),
      p([text(description)]),
    ]);
  }
}

If you've written a Flutter widget before, you can instantly read and write Jaspr code. This direct transfer of skills lowers the learning curve significantly. Developers don't need to switch mental models—they can use the same patterns for state management, composition, and reuse. This alignment was a key factor in our decision, as it makes the entire website contribution process feel like an extension of Flutter development.

What benefits does the migration bring to contributors and maintainers?

The most immediate benefit is unified tooling: everything now uses Dart. Contributors no longer need to install Node.js or Python dependencies to work on the websites. Code sharing becomes trivial—shared libraries for components, styles, or data fetching can be used across all three sites. Setup friction has dropped dramatically; new contributors can clone the repo and run a single Dart command to start developing. Additionally, the Jaspr ecosystem integrates seamlessly with existing Dart tools like dart analyze and dart format, ensuring consistent code quality. For maintainers, the monolithic setup means updates to interactive features or layouts propagate automatically to all sites. The result is a cohesive developer experience that aligns with the rest of the Flutter/Dart ecosystem.

What interactive features can be built more easily now?

Our growing needs included richer code samples (with live editing and execution), quizzes embedded in tutorials, and dynamic search across documentation. Previously, each feature required custom JavaScript glued to Eleventy templates or Wagtail components. With Jaspr, we can build these interactions as first-class Dart components, using the same state management and event handling patterns as Flutter. For example, a quiz component can maintain state across questions, validate answers, and render results—all in Dart without touching vanilla JS. The framework's support for client-side rendering makes it easy to add islands of interactivity within static pages. As a result, we can rapidly prototype and deploy new interactive features that feel native to the Flutter experience.

How does this migration align with Dart's origins as a web language?

Dart was originally created as a language for building web applications, and its modern ecosystem still includes robust web support through dart:html and frameworks like AngularDart. However, the Flutter team's own websites had drifted away from this core use case. By adopting Jaspr, we're returning to Dart's web roots while leveraging the best of Flutter's component model. The migration demonstrates that Dart is not only a great language for mobile and desktop apps but also an excellent choice for building performant, maintainable websites. For the broader Dart community, it serves as a blueprint for creating full-featured web experiences without leaving the language. This reconnection with Dart's origins also strengthens the ecosystem, encouraging more developers to explore Dart for server-side and static-site projects.

Tags:

Recommended

Discover More

10 Key Updates from the Swift Community: April 2026Unlocking HEIC Photos in Ubuntu 26.04: Your Complete Q&A GuideV8’s JSON.stringify Speed Doubled: Inside the OptimizationUpgrading to MySQL 9.7 LTS: A Step-by-Step Guide to Oracle's Latest Long-Term Support ReleaseTikTok Gang Content Unveils New Tool for Law Enforcement, Cincinnati Study Finds