Installation#

There are two ways to get started with Arcane Jaspr: using Oracular (recommended) or manual setup.

Option 1: Using Oracular (Recommended)#

Oracular is the official scaffolding tool for Arcane projects. It creates production-ready projects with best practices built in.

Install Oracular#

dart pub global activate oracular

Create a New Project#

# Interactive wizard
oracular

# Or create directly:
# Web application
oracular create app --template arcane_jaspr_app --name my_app

# Documentation site
oracular create app --template arcane_jaspr_docs --name my_docs

This creates a complete project structure with:

• Arcane Jaspr 2.7.0 pre-configured
• Theming setup with ArcaneApp
• Sample screens and components
• Proper routing configuration
• Development and production build scripts

Option 2: Manual Setup#

Prerequisites#

• Dart SDK >= 3.10.0
• Jaspr CLI (optional but recommended)

dart pub global activate jaspr_cli

Create a Jaspr Project#

jaspr create my_app
cd my_app

Add Arcane Jaspr#

Add to your pubspec.yaml:

dependencies:
  arcane_jaspr: ^2.7.0

Then run:

dart pub get

Configure Your App#

Wrap your app with ArcaneApp for theming:

import 'package:arcane_jaspr/arcane_jaspr.dart';

class App extends StatelessComponent {
  @override
  Component build(BuildContext context) {
    return ArcaneApp(
      stylesheet: ShadcnStylesheet(),
      brightness: Brightness.dark,
      child: MyHomePage(),
    );
  }
}

Project Structure#

After setup, your project should look like:

my_app/
├── lib/
│   ├── main.server.dart      # Server entry (static generation)
│   ├── main.client.dart      # Client entry (hydration)
│   ├── app.dart              # App component with theming
│   ├── screens/              # Page components
│   └── components/           # Reusable components
├── web/
│   ├── index.html            # HTML shell
│   └── styles.css            # Global styles
├── content/                  # Markdown content (optional)
└── pubspec.yaml

Development Server#

jaspr serve

Visit http://localhost:8080 to see your app.

Build for Production#

jaspr build

Static files are generated in build/jaspr/ ready for deployment.

Choosing Between Templates#

Why Jaspr + Arcane Jaspr?#

Compared to Flutter web:

See the full Platform Comparison for more details.