Skip to main content

​
Welcome to Jaspr

Jaspr is a modern web framework for building websites in Dart with support for both client-side and server-side rendering, as well as static site generation.

​
Why Jaspr?

Jaspr was made with the premise to make a web framework that looks and feels just like Flutter, but renders normal HTML and CSS like React or Vue.

For Flutter Developers

Familiar component model that works just like Flutter widgets, making it easy to transfer your Flutter knowledge to the web

For Web Developers

Native web technologies - renders to HTML, CSS, and the DOM instead of canvas, ensuring better SEO and accessibility

For Fullstack Apps

Built-in server-side rendering with automatic state synchronization between server and client

​
Core Features

Familiar

Works with a similar component model to Flutter widgets. If you know Flutter, you already know Jaspr.

Powerful

Comes with server-side rendering out of the box for better performance and SEO.

Easy

Syncs component state between server and client automatically - no manual setup required.

Fast

Performs optimized DOM updates only where needed, ensuring blazing-fast performance.

Flexible

Runs on the server, client, or both with manual or automatic setup. You decide.

Type-Safe

Written completely in Dart with full type safety across your entire stack.

​
Who is Jaspr for?

Jaspr is targeted mainly at Flutter developers that want to build any type of website, especially ones that are not suitable for Flutter Web. The Flutter team has stated that:
Flutter Web is for building Web-Apps, not Web-Sites.
While Flutter Web is great for sharing apps across platforms, it may not be suited for all types of websites you want to build - particularly those requiring excellent SEO, fast initial load times, or accessibility.

​
What Makes Jaspr Different?

Jaspr gives you the familiar look and feel of the Flutter framework while using native web technologies like HTML, the DOM, and CSS. This enables you to build all kinds of websites using Dart. 
import 'package:jaspr/jaspr.dart';

class App extends StatelessComponent {
  @override
  Component build(BuildContext context) {
    return div([
      h1([text('Welcome to Jaspr')]),
      p([text('A modern web framework for Dart')]),
    ]);
  }
}

​
Quick Example

Here’s a simple interactive counter component: 
import 'package:jaspr/jaspr.dart';

@client
class Counter extends StatefulComponent {
  @override
  State<Counter> createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  @override
  Component build(BuildContext context) {
    return div([
      p([text('Count: $count')]),
      button(
        onClick: () => setState(() => count++),
        [text('Increment')],
      ),
    ]);
  }
}
The @client annotation makes this component interactive by rendering it on the client side after server-side rendering.

​
Try It Online

Inspired by DartPad, Jaspr has its own online editor and playground called JasprPad.

JasprPad

Try Jaspr in your browser without any installation. Check out samples, take the tutorial, or experiment with your own code.
JasprPad is built with Jaspr itself! Check out the source code to see how Jaspr is used in a larger application.

​
Ready to Get Started?

Quickstart

Install Jaspr and create your first app in under 5 minutes

Jaspr vs Flutter Web

Understand the key differences and when to use each framework

​
Community & Support

Discord

Join our community of developers

GitHub

Star the project and contribute

Benchmarks

See how Jaspr performs

Build docs developers (and LLMs) love

Get started for freeTalk to us