schultek/jaspr 999999

The Web Framework for Dart Developers

Jaspr is a free and open source framework for building websites in Dart.
Create fast and dynamic web experiences with ease in a familiar language and ecosystem.

dart pub global activate jaspr_cli
Get Started

Everything is a Component

Jaspr Components are the fundamental building blocks of any Jaspr website and look very similar to Flutter widgets. However, Jaspr renders actual HTML and CSS from your components, resulting in great SEO and fast loading times.

Try out in Playground
Read the Docs
dart-icon app.dart
dart-icon button.dart 
1import 'package:jaspr/jaspr.dart'; 
2import 'button.dart'; 
3 
4class App extends StatelessComponent { 
5  const App({super.key}); 
6 
7  @override 
8  Iterable<Component> build(BuildContext context) sync* { 
9    // Hover me! 
10    yield h2([text('Everything is a Component')]); 
11    yield p([text('Jaspr Components are the fundamental building blocks ...')]); 
12 
13    yield div(classes: 'actions', [ 
14      Button( 
15        primary: true, 
16        label: 'Try out in Playground',  
17        icon: 'rocket', 
18      ), 
19      Button( 
20        label: 'Read the Docs',  
21        icon: 'book-text', 
22      ), 
23    ]); 
24  } 
25} 
pubspec.yaml
dart-icon main.dart 
1name: my_awesome_website 
2description: A new Jaspr site. 
3 
4environment:   
5  sdk: ">=3.0.0 <4.0.0" 
6 
7dependencies:   
8  jaspr: ^0.16.0 
9  jaspr_router: ^0.2.3 
10   
11dev_dependencies: 
12  jaspr_builders: ^0.16.0 
13  jaspr_web_compilers: ^4.1.0 
14  jaspr_lints: ^0.2.1 
15 
16jaspr: 
17  mode: static 

Build
Static Sites
using pure Dart

Choose the rendering strategy you need. Generate static html at build time, pre-render pages dynamically on the server or build a single page application. Jaspr has you covered.

Explore Modes
See what others have built
Developer Experience

The productivity of Dart
brought to the Web

dart-icon counter.dart 
1Iterable<Component> build(BuildContext context) sync* { 
2  yield button( 
3    onClick: () { 
4      setState(() => count++); 
5    }, 
6    [ text('Clicked $count times'), ] 
7  ); 
8} 
Clicked 0 times
DEVELOP

Familiar Concepts

Apply your Flutter skills to build websites. Reuse already learned concepts like BuildContext, setState and much more.

$ jaspr serve
[CLI] Running jaspr in static rendering mode.
[CLI] Starting web compiler...
[BUILDER] Connecting to the build daemon...
[BUILDER] About to build [web]...
[CLI] Building web assets...
[BUILDER] Running build...
[BUILDER] Running build completed.
[CLI] Done building web assets.
[CLI] Starting server...
[SERVER] [INFO] Server hot reload is enabled.
[SERVER] [INFO] Running server in debug mode
[SERVER] Serving at http://localhost:8080
RUN

Jaspr CLI

Create, serve and build your site using simple cli commands.

1name: my_awesome_website 
2 
3dependencies: 
4  cloud_firestore: ^5.6.2 
5  dart_mappable: ^4.3.0 
6  http: ^1.3.0 
7  intl: ^0.19.0 
8  jaspr: ^0.17.0 
9  logging: ^1.3.0 
10  riverpod: ^2.6.1 
11  shared_preferences: ^2.4.0 
INTEGRATE

Packages and Plugins

Import any Dart package from pub.dev or even use Flutter web plugins through Jasprs custom compiler pipeline.

dart-icon app.dart 
1class App extends StatelessComponent { 
2  const App({super.key}); 
3 
4  Iterable<Component> build(BuildContext context) sync* { 
5    yield div([ 
6      ... 
Quick Actions: Convert to StatefulComponent Convert to AsyncStatelessComponent
ANALYZE

Linter and Code Completions

Jaspr comes with its own lints and code completions to boost your productivity during development.

Features

Comes with
Everything You Need

Routing

Simple yet powerful routing system that works for all modes.
Data Fetching

Fetch data on the server during pre-rendering and sync data to the client.
SEO

Optimize for search engines with pre-rendering and meta tags.
State Management

Use your favorite state management solution, like Riverpod or Provider.
Flutter Embedding

Embed Flutter widgets seamlessly in your Jaspr website.
Custom Backends

Integrate Jaspr with any Dart backend, like Shelf, Serverpod or Dart Frog.
Styling

Write styles in Dart, integrate with Tailwind or use any CSS based styling solution.
Testing

Write tests for your components and pages with Jasprs testing library.

Trusted by
Dart Experts

“Jaspr is an amazing usage of Dart's web stack and a compliment to Flutter web. It's a great place to start if you want to use HTML and CSS with Dart.”

Kevin Moore

Kevin Moore
Product Manager for Dart and Flutter at Google

“Jaspr is a great way to build websites with Dart, and with its Serverpod integration you also get access to a full ORM to talk with your database.”

Viktor Lidholt

Viktor Lidholt
Founder of Serverpod

“I chose Jaspr to build a landing page for my business because Flutter has poor SEO performance. What impressed me the most is the ability to do everything in Dart instead of JavaScript. The support for hydration, server-side rendering, and built-in Tailwind integration blew me away. I've been using Jaspr since version 0.10.0, and it keeps getting better with every release. The community Kilian built around it is super passionate, and I can't wait for it to become the de-facto standard for building web experiences with Dart.”

Dinko Marinac

Dinko Marinac
Flutter Freelancer and Consultant

“I've been using Jaspr with Tailwind CSS to build sites like course.temiajiboye.com, temiajiboye.com, and flutteryeg.com, and I've been really impressed. The SSR support and component-based approach makes it feel like Flutter for the web, but with the flexibility of Dart. It's smooth, efficient, and just makes sense. If you're into Dart and want to build modern web apps, definitely give Jaspr a try!”

Temi Ajiboye

Temi Ajiboye
Mobile Developer
Community

Join the Community

Discord

Join our Discord community with over 400 developers. Chat with other developers, ask questions, and share your projects.

Join Discord

Enterprise Support

Are you a startup or enterprise looking for paid support, consulting, or custom development? Don't hesitate to contact me.

Get Support