Unifying Flutter’s Websites: A Migration to Jaspr and Dart

Introduction

For years, the official websites of the Flutter and Dart ecosystems—dart.dev, flutter.dev, and docs.flutter.dev—were built using a patchwork of different technologies. This fragmentation created friction for contributors and limited the ability to add rich interactive features. Recently, the team behind these sites completed a major overhaul: all three were rebuilt using Jaspr, an open-source Dart-based web framework. The result is a unified codebase that not only simplifies maintenance but also leverages the existing skills of the Dart and Flutter community.

The Challenge of a Fragmented Stack

The previous infrastructure was far from coherent. The documentation sites (dart.dev and docs.flutter.dev) used Eleventy, a Node.js static-site generator. Meanwhile, the main marketing site (flutter.dev) ran on Wagtail, a content management system built with Python and Django. This fragmented setup meant that anyone wanting to contribute needed to master both Node.js and Python tooling, in addition to Dart.

As the sites evolved, adding interactive elements—like code samples with live previews or embedded quizzes—became increasingly difficult. Each new feature required custom, imperative DOM logic that was hard to maintain. The team recognized that a unified stack could drastically reduce complexity and improve the developer experience.

Why Jaspr Was the Ideal Solution

After evaluating several options, the team settled on Jaspr, a versatile Dart web framework that supports client-side rendering, server-side rendering, and static site generation. Jaspr stood out for several reasons:

• Familiarity for Flutter developers: Jaspr’s component model mirrors Flutter’s widget tree. Developers with Flutter experience can write Jaspr components with minimal learning curve. For example:

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)]),
    ]);
  }
}

• DOM-native approach: Unlike Flutter for the web (which uses a canvas), Jaspr works directly with standard HTML, CSS, and the DOM. This makes it easier to integrate with existing web tooling and accessibility standards.
• Static site generation: Jaspr can pre-render pages at build time, delivering fast load times and excellent SEO—critical for documentation sites.
• Code sharing: With Jaspr, reusable components can be shared across all three sites, eliminating duplicate effort and ensuring consistency.

The Migration Process

The migration was performed incrementally. The team first recreated the documentation sites (dart.dev and docs.flutter.dev) using Jaspr’s static site generation. Next, flutter.dev was rebuilt, taking advantage of Jaspr’s hybrid rendering capabilities to mix static content with dynamic interactive sections.

Key steps included:

1. Converting existing Eleventy templates to Jaspr components
2. Porting Wagtail content models to Dart data structures
3. Setting up a build pipeline using dart compile and Jaspr’s CLI
4. Adding client-side interactivity for features like code editors and tutorial quizzes

Throughout the process, the team maintained backwards compatibility with existing URLs and content, ensuring no disruption for end users.

Key Benefits of the Unified Stack

Consistent Developer Experience

Contributors now only need to know Dart to work on any of the three sites. This drastically reduces the onboarding time and simplifies the toolchain. As one team member noted, “Contributing now requires only Dart.”

Improved Performance

Jaspr’s static site generation produces pre-built HTML files that can be served directly from a CDN. Combined with incremental builds, the new sites load faster and require fewer server resources.

Enhanced Interactivity

With Jaspr’s built-in support for client-side hydration, adding interactive elements—like runnable code samples or self-assessment quizzes—is straightforward. The framework handles DOM updates declaratively, reducing the risk of errors.

Shared Components

Common UI elements (navigation, search, code blocks) are now defined once and reused across all sites. This ensures visual consistency and makes it easy to roll out global updates.

Conclusion

The migration to Jaspr has transformed the way Flutter and Dart websites are built and maintained. By consolidating on a single Dart-based framework, the team has eliminated the overhead of managing multiple technical stacks, empowered contributors, and set the stage for richer interactive content. For anyone building web experiences with Dart beyond standard Flutter web apps, Jaspr offers a compelling path forward.

If you’re interested in learning more about Jaspr, check out the official documentation or explore the open-source code on GitHub.