Revamping Flutter’s Online Presence: A Dart-Powered Stack with Jaspr

Introduction

In the world of web development, maintaining a consistent and efficient tech stack is crucial for productivity and community contributions. For years, Flutter’s own websites—dart.dev, flutter.dev, and docs.flutter.dev—suffered from a fragmented mix of tools outside the Dart ecosystem. That has now changed. We rebuilt all three sites using Jaspr, an open-source Dart-based web framework. This article explores the motivations behind the migration, the challenges we overcame, and how Dart and Jaspr unified our development experience.

The Fragmented and Unfamiliar Technical Stack

Our previous setup worked but was far from ideal. The documentation sites were built with Eleventy, a Node.js static-site generator. Meanwhile, flutter.dev relied on Wagtail, a Python and Django-based CMS. This fragmentation meant contributors had to juggle Node.js tooling for one set of sites and Python for another. Even though some interactive components were already written in Dart, the separate ecosystems prevented code reuse and increased setup friction. As our needs grew—richer code samples, quizzes, interactive tutorials—each new feature became an uphill battle, often requiring imperative DOM manipulations that were hard to maintain.

Why We Decided to Change

Our team and community are deeply familiar with Dart and Flutter. We wanted a single, unified stack that leverages that expertise. The ability to share code across all three websites, reduce onboarding time for contributors, and simplify the build pipeline were key drivers. Moreover, we envisioned a more interactive future for our sites—features that would be easier to implement with a framework that natively supports both static and dynamic rendering. Jaspr emerged as the ideal candidate.

Finding a Unified Solution in Jaspr

Jaspr is a versatile Dart web framework that supports client-side rendering, server-side rendering, and static site generation. Unlike traditional JavaScript frameworks, Jaspr is built entirely in Dart, making it a natural fit for our ecosystem. Here are the standout reasons we chose it:

• Direct Flutter skill transfer: Jaspr’s component model mimics Flutter widgets, allowing developers to apply their existing knowledge. 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)]),
      ]);
    }
  }

  This code is instantly readable to any Flutter developer.
• Unified rendering: We can generate static pages for SEO while also adding client-side interactivity where needed—without switching frameworks.
• Open-source community: As a Dart open-source project, Jaspr aligns with our values and invites contributions from the Flutter community.

Migration Process

Transitioning three websites was no small task. We started by mapping the content structure of each site and porting the Eleventy and Wagtail templates to Jaspr components. Interactive elements, such as code editors and quizzes, were rewritten as Jaspr components, often resulting in cleaner and more maintainable code. The static site generation mode meant we could keep our existing URL structure and SEO rankings intact.

Key Benefits of the New Stack

The migration has brought tangible improvements:

• Consistent developer experience: Contributors only need Dart knowledge to work on any of the three sites.
• Code reuse: Shared components like navigation bars, footers, and interactive code samples are now unified across all sites.
• Faster feature development: Adding new interactive elements no longer requires JavaScript hacks; we use Dart’s type safety and Flutter-style patterns.
• Improved performance: Jaspr’s static generation produces fast-loading pages, and the optional hydration allows interactivity without bloated bundles.

What’s Next for Flutter’s Websites?

With the new stack in place, we’re excited to explore richer interactivity: real-time code execution, guided tutorials, and community-contributed components. The alignment with the Dart ecosystem also opens the door to tighter integration with Flutter web apps and other Dart tools. We believe Jaspr will continue to evolve, and we’re committed to contributing back to its open-source community.

Conclusion

Rebuilding Flutter’s websites with Dart and Jaspr has eliminated the fragmentation that once held us back. By embracing a unified stack, we’ve made it easier for our team and community to contribute, and we’ve laid the groundwork for a more interactive future. If you’re building web experiences with Dart, consider Jaspr—it might just unify your stack too.