From Fragmented to Unified: How Dart and Jaspr Revitalized Flutter's Websites

The Fragmented Past

Before adopting Jaspr, Flutter's web presence was a patchwork of incompatible technologies. The documentation sites—dart.dev and docs.flutter.dev—were built with Eleventy, a Node.js-based static site generator. Meanwhile, the main marketing hub flutter.dev relied on Wagtail, a CMS powered by Python and Django. This fragmentation meant that contributors had to master multiple ecosystems: Node.js for one set of sites, Python for another. While some interactive components were already written in Dart, the lack of a unified stack hindered code reuse, increased setup friction, and made every new interactive feature—like richer code samples or tutorial quizzes—an uphill battle that required custom imperative DOM logic.

Finding a Unified Solution in Jaspr

Jaspr is an open-source Dart web framework that supports client-side rendering, server-side rendering, and static site generation. It offered a path to consolidate all three sites into a single technology stack. Several key advantages made Jaspr the ideal choice:

Familiarity for Flutter Developers

Jaspr’s component model is designed to feel natural to any Flutter developer. For instance, a simple card component in Jaspr mirrors the declarative style of Flutter widgets:

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

This means that anyone with Dart and Flutter experience can immediately contribute to the websites without learning a new language or framework.

Full-Stack Dart

By using Jaspr, the entire web stack—from static content generation to client-side interactivity—is now written in Dart. This eliminates the need for Node.js or Python tooling, dramatically reducing setup time and cognitive overhead for contributors.

The Migration Journey

Migrating three large, production websites from distinct codebases was no small feat. The team systematically ported content, templates, and interactive components to Jaspr’s component-based architecture. One of the biggest challenges was preserving SEO and existing URL structures while transitioning to a new rendering approach. Jaspr’s built-in static site generation capabilities made it possible to pre-render pages just as before, ensuring no drop in performance or search ranking. Interactive features—like code sample editors and quiz modules—were rewritten using Jaspr’s DOM binding, which allowed developers to write declarative Dart code instead of imperative JavaScript.

Benefits of the Unified Stack

Today, all three websites share a common codebase and build pipeline. Contributors only need Dart, which has lowered the barrier for community involvement. The unified stack also enables:

• Code reuse – Components like navigation bars, footers, and interactive demos are shared across sites.
• Consistent developer experience – A single set of tools and workflows applies to both documentation and marketing pages.
• Easier maintenance – Updates to design or functionality propagate instantly across all sites.
• Future-proof interactivity – Adding new interactive elements (e.g., live code playgrounds, assessment quizzes) no longer requires workarounds or external libraries.

Looking Ahead

The migration to Jaspr marks a significant step toward a fully Dartified web ecosystem for Flutter. The team continues to explore deeper integrations, such as using Jaspr’s server-side rendering for dynamic content. For the Flutter community, this move demonstrates that Dart is not only a powerful language for mobile and desktop apps but also a first-class choice for building modern, performant websites. If you’re interested in contributing to our documentation or marketing sites, all you need is Dart—and perhaps a bit of Jaspr exploration.