Unifying Flutter's Websites with Dart and Jaspr: A Q&A

We recently overhauled three key websites—dart.dev, flutter.dev, and docs.flutter.dev—by migrating them to Jaspr, an open-source Dart web framework. This move eliminates a fragmented tech stack and allows our team and community to contribute using only Dart. Below, we answer the most common questions about this transition.

What was wrong with the previous website setup?

The old architecture was a mix of unrelated tools. Documentation sites ran on Eleventy (a Node.js static-site generator), while flutter.dev used Wagtail, a Python‑based CMS. This meant anyone contributing needed expertise in both Node.js and Python, outside the Dart ecosystem. Code sharing between sites was nearly impossible, and each new interactive feature—like quizzes or richer code samples—required custom, one-off DOM logic. The setup grew increasingly complex and slowed down updates, creating friction for both developers and the community.

Unifying Flutter's Websites with Dart and Jaspr: A Q&A

Why did you choose Jaspr over other frameworks?

Jaspr stood out for several reasons. First, it’s built entirely in Dart, the language our teams already know and love. Second, it supports client‑side rendering, server‑side rendering, and static site generation—giving us the flexibility to serve each page in the best way. Most importantly, Jaspr’s component model feels natural to Flutter developers: if you can write a Flutter widget, you can instantly read and write Jaspr components. This direct transfer of skills means no steep learning curve, and contributors can apply their existing Dart and Flutter experience to the web platform.

How does Jaspr leverage Flutter skills?

Jaspr’s component API is deliberately similar to Flutter’s widget system. Here’s a quick 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)]),
    ]);
  }
}

You’ll see StatelessComponent mirrors Flutter’s StatelessWidget, and the build method returns DOM elements using a familiar tree structure. This means every Flutter developer can jump right in, generating HTML and CSS without leaving the Dart ecosystem.

What are the main benefits of a unified Dart stack?

A unified stack simplifies nearly everything. Contributors only need Dart installed—no separate Node.js or Python environments. Code can be shared across all three sites, from utility functions to interactive components. Maintenance becomes easier because there’s one build system, one set of dependencies, and one language to manage. For the community, this lowers the barrier to contributing: if you know Flutter, you already know enough to improve the websites. Internally, our team can iterate faster and introduce new interactive features without fighting against incompatible tools.

What new interactive possibilities does Jaspr unlock?

Before Jaspr, adding rich interactivity—like interactive code editors, quizzes, or animated tutorials—required hand‑written imperative DOM manipulation, which was slow and error‑prone. With Jaspr’s component model, we can build such features declaratively, just as we do in Flutter apps. For example, we can create a quiz component that tracks state and re‑renders automatically when the user answers. The same logic works across all three sites, and because it’s all Dart, we can even share code with our Flutter mobile apps. This makes our documentation not just static text, but a living, interactive learning environment.

How does this migration affect community contributors?

Positively. Previously, a contributor wanting to fix a typo in the docs needed to understand Eleventy’s Node.js setup, while a change to flutter.dev required Python knowledge. Now, anyone comfortable with Dart can submit a pull request to any of the three sites. The development environment is simpler to set up—just clone the repo, run dart pub get, and you’re ready. This unification aligns with the Flutter community’s existing skills and encourages more people to contribute, making the sites better for everyone.

Tags: