building-jaspr-web-apps

Jaspr Web Architecture Guide (v0.22.x)

Goal

Jaspr is a Dart web framework (current version: 0.22.x).

Unlike Flutter Web (which draws pixels via Canvas and produces poor SEO), Jaspr compiles Dart to semantic HTML and CSS DOM elements. Use Jaspr for websites, blogs, landing pages, or any project requiring proper SEO.

Instructions

1. Core Concept: Flutter-like Coding Experience

Jaspr mirrors Flutter’s component model. The build method returns a single Component (equivalent to a Flutter Widget).

Flutter Concept	Jaspr Concept	Notes
Widget	Component	Every UI element in Jaspr is a Component
StatelessWidget	StatelessComponent	Pure declarative UI; receives BuildContext context
StatefulWidget	StatefulComponent	Manages lifecycle with setState, initState, createState()
InheritedWidget	InheritedComponent	Propagates state down the component tree

1.1 DOM Elements

Jaspr renders to DOM, so use its HTML tag helpers (div, p, img, etc.) from jaspr/dom.dart.

import 'package:jaspr/jaspr.dart';

class ProfileCard extends StatelessComponent {
  final String name;

  const ProfileCard({required this.name, super.key});

  @override
  Component build(BuildContext context) {
    return div(
      classes: 'profile-card',
      styles: Styles.box(width: 300.px, backgroundColor: Colors.white),
      [
        h2([.text(name)]), // 🌟 .text() shorthand available since Dart 3.10 (Component.text)
        p([
          .text('Hello World!'),
        ]),
        button(
          onClick: () => print('Button successfully clicked!'),
          [.text('Contact Me')]
        )
      ]
    );
  }
}

2. Tailwind CSS Integration (jaspr_tailwind)

Jaspr provides official Tailwind CSS integration via jaspr_tailwind.

2.1 Installation & Setup

dev_dependencies:
  jaspr_tailwind: ^0.3.6