Unifying Flutter and Dart Websites with Jaspr: A Case Study

Introduction

For developers working with Flutter and Dart, the official websites—dart.dev, flutter.dev, and docs.flutter.dev—serve as essential resources. Yet until recently, these sites were built on a mismatched collection of technologies. The team behind them decided to change that by migrating all three to a single, Dart-powered framework called Jaspr. This move not only simplified maintenance but also created a consistent developer experience where contributions require only Dart knowledge.

Unifying Flutter and Dart Websites with Jaspr: A Case Study

A Fragmented and Unfamiliar Technical Stack

The previous setup might have worked, but it was far from ideal. The documentation sites (dart.dev and docs.flutter.dev) were built with Eleventy, a Node.js static-site generator. Meanwhile, flutter.dev relied on a completely separate system: Wagtail, a content management system built on Python and Django.

The Cost of Fragmentation

This split meant that anyone wishing to contribute or maintain the sites needed expertise outside the Dart ecosystem: Node.js tooling for one set of sites, Python for another. While some interactive components and infrastructure were already written in Dart, the separate ecosystems prevented code sharing, increased setup friction, and made contributions more complex. The team realized they needed a unified stack built on the language and tools their community already knew.

The Case for Unification

Beyond the maintenance headaches, the team had growing ambitions for interactivity—richer code samples, quizzes in tutorials, and more dynamic content. Each new interactive feature became an uphill battle with the existing setups, often requiring one-off imperative DOM logic. A single framework that could handle both static content and interactive elements was clearly needed.

Discovering Jaspr: The Dart-Based Solution

Jaspr is an open-source Dart web framework that supports client-side rendering, server-side rendering, and static site generation. It is a traditional DOM-based framework (using HTML and CSS) but written in Dart—the language already familiar to the Flutter and Dart communities. Several features made it stand out:

Direct transfer of Flutter skills – The component model feels natural to any Flutter developer while being fully compatible with the DOM.
Unified tooling – Single language, single build pipeline.
Rich interactivity – Can handle both static site generation and dynamic client-side behavior.

Flutter Skills Transfer Directly

One of Jaspr’s key advantages is how familiar it looks to Flutter developers. Here’s an example of a simple component:

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

Any developer who has written a Flutter widget can read and write Jaspr components immediately. This reduces the learning curve to nearly zero and encourages community contributions.

The Migration Process

Migrating three production websites is no small task. The team approached it incrementally, first moving static content pages, then layering interactive elements. Because Jaspr supports static site generation, they could keep the same deployment and hosting strategies while gradually replacing the old Eleventy and Wagtail setups.

*Key steps included:*

Content inventory – Auditing all pages and interactive components.
Component extraction – Rebuilding shared layouts and widgets in Jaspr.
Gradual rollout – Deploying Jaspr versions behind feature flags.
Testing and validation – Ensuring identical behavior and performance.

The result is a unified stack where every team member and contributor can work in Dart, whether they are building a static documentation page or a dynamic quiz widget.

Results and Benefits

The migration has already yielded clear improvements:

Single language, simpler contributions – No more context switching between Node.js, Python, and Dart.
Code reuse – Shared components for headers, footers, code snippets, and interactive elements.
Faster iteration – New features like interactive code samples can be built directly in Jaspr without workarounds.
Consistent developer experience – Flutter developers can contribute to websites with minimal onboarding.

Conclusion

By rebuilding dart.dev, flutter.dev, and docs.flutter.dev with Jaspr, the team has eliminated a fragmented technical stack and aligned their web presence with the Dart ecosystem. This case study demonstrates how a unified framework can reduce maintenance burden, improve developer experience, and enable richer interactivity—all while staying true to the tools and languages a community already loves.

If you’re curious about building web experiences with Dart beyond standard Flutter web apps, Jaspr offers a compelling path forward.

Tags: