Arcane Jaspr

Arcane Jaspr gives Jaspr apps a Flutter-first UI surface. Use familiar Dart widget structure, keep semantic HTML output, and only drop to HTML or raw Jaspr when you explicitly choose to.

See Flutter authoring for supported conventions and upgrade notes for the current breaking changes.

Install

dependencies:
  arcane_jaspr: ^4.0.0
  arcane_jaspr_shadcn: ^4.0.0
  arcane_jaspr_neon: ^4.0.0
  arcane_jaspr_neubrutalism: ^4.0.0
  arcane_jaspr_win95: ^4.0.0

arcane_jaspr is the core package. Add one or more renderer packages (arcane_jaspr_shadcn, arcane_jaspr_neon, arcane_jaspr_neubrutalism, arcane_jaspr_win95) for the themes you want; pick a stylesheet from one of them at runtime.

Demo

From the arcane_jaspr package root, serve the demo/docs app with:

dart run arcane_jaspr:serve

It serves at http://localhost:8080 and replaces any previous Arcane Jaspr demo process using that port.

Build the same demo with:

dart run arcane_jaspr:serve build

Import Surfaces

Use the primary import for normal app code:

import 'package:arcane_jaspr/arcane_jaspr.dart';
import 'package:arcane_jaspr_neon/arcane_jaspr_neon.dart';
import 'package:arcane_jaspr_shadcn/arcane_jaspr_shadcn.dart';

const ArcaneStylesheet shadcnStylesheet = ShadcnStylesheet(
  theme: ShadcnTheme.midnight,
);
const ArcaneStylesheet neonStylesheet = NeonStylesheet(
  theme: NeonTheme.green,
);
const ArcaneStylesheet selectedStylesheet = shadcnStylesheet;

Only reach for the advanced layers when you need them:

import 'package:arcane_jaspr/html.dart';
import 'package:arcane_jaspr/web.dart';

Counter Example

import 'package:arcane_jaspr/arcane_jaspr.dart';
import 'package:arcane_jaspr_neon/arcane_jaspr_neon.dart';
import 'package:arcane_jaspr_shadcn/arcane_jaspr_shadcn.dart';

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  int _count = 0;

  void _increment() {
    setState(() => _count += 1);
  }

  @override
  Widget build(BuildContext context) {
    return ArcaneApp(
      stylesheet: selectedStylesheet,
      brightness: Brightness.dark,
      home: ArcaneScaffold(
        title: 'Counter',
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            spacing: 16,
            children: [
              Text.heading2('Count: $_count'),
              Button.primary(
                label: 'Increment',
                onPressed: _increment,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Common Examples

TextInput(
  label: 'Email',
  placeholder: 'you@example.com',
  type: TextInputType.email,
)

ArcaneCombobox(
  value: 'jaspr',
  options: const [
    ComboboxOption(value: 'jaspr', label: 'Jaspr'),
    ComboboxOption(value: 'flutter', label: 'Flutter'),
  ],
  onChanged: (String? value) {},
)

ArcaneMenubar(
  menus: const [
    ArcaneMenubarMenu(
      label: 'File',
      items: [MenuItemAction(label: 'New')],
    ),
  ],
)

What The Primary Surface Includes

Widget, StatelessWidget, StatefulWidget, State, BuildContext, and runApp
ArcaneApp, neutral renderer contracts, adaptive layout contracts, and theme provider access
Arcane widgets for layout, input, menus, dialogs, data display, adaptive scaffolds, and theming
Type-safe styling through ArcaneStyleData

Advanced Imports

package:arcane_jaspr/html.dart contains the low-level HTML wrapper layer such as ArcaneDiv, ArcaneLabel, ArcaneLink, tables, lists, and SVG helpers. package:arcane_jaspr/web.dart exposes raw Jaspr and DOM escape hatches.

Interactivity and SSR

Arcane Jaspr has two distinct interactivity mechanisms. Choosing the right one matters for static / server-rendered output:

Declarative ArcaneInteraction actions (passed via action:) are encoded into data-arcane-* attributes (for example data-arcane-action) and executed by the embedded JavaScript runtime that ships with the app. These work in fully static and server-rendered HTML, with no Jaspr client hydration required. This is the SSR-safe path. Use the ArcaneInteraction factories such as ArcaneInteraction.openDialog(...), .navigate(...), .copy(...), .toggleThemeMode, and .submitForm(...).
Dart callbacks like onPressed / onChanged are wired as Jaspr event handlers and only fire when the app runs with Jaspr client hydration. In a purely static build, onPressed does nothing because there is no Dart event listener attached.

In short: if you need behavior in static output, use action:; reserve onPressed / onChanged for hydrated client apps.

Content-Security-Policy caveat

The interactivity runtime is injected as a single inline <script> element (ArcaneScriptsComponent in lib/util/interactivity/arcane_scripts.dart, rendered from lib/component/support/app.dart when includeFallbackScripts is true, which is the default). Because the runtime is emitted inline rather than as an external file, a strict Content-Security-Policy must allow inline scripts (for example script-src 'self' 'unsafe-inline'). There is currently no built-in nonce hook on the injected script, so CSP nonces are not yet supported out of the box. If you need strict CSP, set includeFallbackScripts: false on ArcaneApp and provide the runtime yourself through a CSP-compatible mechanism.

Docs

Package docs: arcanearts.github.io/arcane_jaspr
Docs/demo app: arcane_jaspr_docs/arcane_jaspr_docs_web
Generated component catalog: arcane_jaspr_docs/arcane_jaspr_docs_web/content/docs/components-catalog.md

License

GNU Public

Libraries

aliases
arcane_jaspr
component/button/social_icons
component/button/social_provider
component/card/card
component/card/cta_card
component/card/feature_card
component/card/flexi_cards
component/card/pricing_card
component/card/stat_card
component/card/testimonial_card
component/collection/card_carousel
component/collection/collection
component/collection/gallery
component/collection/infinite_carousel
component/collection/section
component/data/chart
component/dialog/command
component/dialog/confirm
component/dialog/confirm_text
component/dialog/date
component/dialog/date_multi
component/dialog/date_range
component/dialog/dialog
component/dialog/email
component/dialog/popover
component/dialog/sonner
component/dialog/text
component/dialog/time
component/dialog/toast
component/dialog/toast_manager
component/dialog/toast_types
component/dialog/tooltip
component/feedback/status_badge
component/form/field
component/form/field_wrapper
component/form/node/bool
component/form/node/color
component/form/node/date
component/form/node/enum
component/form/node/string
component/form/node/time
component/form/provider
component/html/arcane_button
component/html/arcane_cat_image
component/html/arcane_image
component/html/arcane_input
component/html/arcane_label
component/html/arcane_link
component/html/arcane_span
component/html/arcane_text
component/html/code_block
component/html/div
component/html/footer
component/html/header
component/html/heading
component/html/index
component/html/lists
component/html/main
component/html/main_element
component/html/nav
component/html/paragraph
component/html/quote
component/html/section
component/html/side_content
component/html/svg
component/html/table
component/input/button
component/input/calendar
component/input/checkbox
component/input/combobox
component/input/cycle_button
component/input/date_picker
component/input/fab
component/input/icon_button
component/input/mutable_text
component/input/mutable_text_types
component/input/native_select
component/input/otp_input
component/input/popup_menu
component/input/radio_group
component/input/search
component/input/selector
component/input/selector_types
component/input/slider
component/input/slider_types
component/input/text_input
component/input/time_picker
component/input/toggle_group
component/input/toggle_switch
component/interactive/accordion
component/interactive/disclosure
component/layout/aspect_ratio
component/layout/button_panel
component/layout/carpet
component/layout/direction
component/layout/drawer
component/layout/fancy_progress
component/layout/flow
component/layout/form_header
component/layout/gutter
component/layout/page
component/layout/radio_cards
component/layout/resizable
component/layout/scaffold
component/layout/scroll_area
component/layout/scroll_rail
component/layout/section
component/layout/sheet
component/layout/sheet_types
component/layout/tabs
component/menu/context_menu
component/menu/dropdown_menu
component/menu/menubar
component/navigation/breadcrumbs
component/navigation/nav_dropdown
component/navigation/pagination
component/navigation/sidebar
component/navigation/toc
component/promo/inline_hero_banner
component/promo/promo: Flat announcement components.
component/promo/top_announcement_bar
component/screen/abstract_screen
component/screen/fill_screen
component/screen/not_found
component/screen/sliver_screen
component/support/app
component/support/delete_icon_button
component/support/delete_menu_button
component/support/document_server
component/support/document_stub
component/support/document_web
component/support/gesture
component/support/icons
component/typography/text
component/typography/text_style
component/view/alert
component/view/avatar
component/view/bar
component/view/card_section
component/view/center_body
component/view/check_list
component/view/data_table
component/view/empty_state
component/view/expander
component/view/floating
component/view/icon
component/view/image
component/view/item
component/view/kbd
component/view/logo
component/view/map/arcane_map
component/view/map/map_data
component/view/map/map_projection
component/view/map/map_style
component/view/map/paths/usa_paths
component/view/map/paths/world_paths
component/view/markdown
component/view/progress_bar
component/view/separator
component/view/skeleton
component/view/slot_counter
component/view/spec_row
component/view/spinner
component/view/static_table
component/view/tile
core/decoration/arcane_decoration
core/dom_value: Safely read form-control values from DOM event targets without importing package:web (and thus dart:js_interop) into styled component files — which breaks Jaspr's off-web style extraction. The web implementation does the typed interop read; the stub keeps the styles build compiling.
core/dom_value_stub
core/dom_value_web
core/interaction/interaction
core/interaction/interaction_attrs
core/interaction/runtime/runtime
core/interaction/runtime/runtime_calendar_js
core/interaction/runtime/runtime_command_js
core/interaction/runtime/runtime_core_js
core/interaction/runtime/runtime_cycle_js
core/interaction/runtime/runtime_dispatch_js
core/interaction/runtime/runtime_form_theme_js
core/interaction/runtime/runtime_slider_js
core/interaction/runtime/runtime_state_js
core/interaction/runtime/runtime_surfaces_js
core/interaction/runtime/runtime_time_js
core/layout_renderers
core/props/accordion_props
core/props/alert_props
core/props/aspect_ratio_props
core/props/avatar_props
core/props/bar_props
core/props/breadcrumbs_props
core/props/button_panel_props
core/props/button_props
core/props/calendar_props
core/props/card_props
core/props/chart_props
core/props/check_list_props
core/props/checkbox_props
core/props/command_props
core/props/confirm_dialog_props
core/props/context_menu_props
core/props/cta_card_props
core/props/cycle_button_props
core/props/data_table_props
core/props/date_picker_props
core/props/dialog_props
core/props/direction_props
core/props/disclosure_props
core/props/drawer_props
core/props/dropdown_menu_props
core/props/empty_state_props
core/props/feature_card_props
core/props/field_wrapper_props
core/props/flexi_cards_props
core/props/floating_props
core/props/flow_props
core/props/gallery_props
core/props/gutter_props
core/props/item_props
core/props/kbd_props
core/props/menu_item_props
core/props/menubar_props
core/props/native_select_props
core/props/otp_input_props
core/props/pagination_props
core/props/pricing_card_props
core/props/progress_props
core/props/promo_props
core/props/radio_group_props
core/props/resizable_props
core/props/scaffold_props
core/props/scroll_area_props
core/props/scroll_rail_props
core/props/search_props
core/props/select_props
core/props/separator_props
core/props/shared/card_base
core/props/shared/props_shared
core/props/sidebar_props
core/props/skeleton_props
core/props/slider_props
core/props/slot_counter_props
core/props/spec_row_props
core/props/stat_card_props
core/props/static_table_props
core/props/status_badge_props
core/props/status_indicator_props
core/props/tabs_props
core/props/testimonial_card_props
core/props/text_area_props
core/props/text_input_props
core/props/time_picker_props
core/props/toast_props
core/props/toggle_group_props
core/props/toggle_switch_props
core/renderers
core/rendering/base/accordion_render_base
core/rendering/base/alert_render_base
core/rendering/base/avatar_render_base
core/rendering/base/breadcrumbs_render_base
core/rendering/base/button_render_base
core/rendering/base/calendar_render_base
core/rendering/base/card_render_base
core/rendering/base/chart_render_base
core/rendering/base/check_list_render_base
core/rendering/base/checkbox_render_base
core/rendering/base/command_render_base
core/rendering/base/confirm_dialog_render_base
core/rendering/base/context_menu_render_base
core/rendering/base/cta_card_render_base
core/rendering/base/cycle_button_render_base
core/rendering/base/data_table_render_base
core/rendering/base/date_picker_render_base
core/rendering/base/dialog_render_base
core/rendering/base/disclosure_render_base
core/rendering/base/drawer_render_base
core/rendering/base/dropdown_menu_render_base
core/rendering/base/empty_state_render_base
core/rendering/base/feature_card_render_base
core/rendering/base/field_wrapper_render_base
core/rendering/base/floating_render_base
core/rendering/base/gallery_render_base
core/rendering/base/kbd_render_base
core/rendering/base/menubar_render_base
core/rendering/base/native_select_render_base
core/rendering/base/otp_input_render_base
core/rendering/base/pagination_render_base
core/rendering/base/pricing_card_render_base
core/rendering/base/progress_render_base
core/rendering/base/radio_group_render_base
core/rendering/base/scroll_area_render_base
core/rendering/base/scroll_rail_render_base
core/rendering/base/select_render_base
core/rendering/base/separator_render_base
core/rendering/base/sidebar_render_base
core/rendering/base/skeleton_render_base
core/rendering/base/slider_render_base
core/rendering/base/spec_row_render_base
core/rendering/base/stat_card_render_base
core/rendering/base/static_table_render_base
core/rendering/base/status_badge_render_base
core/rendering/base/style_layering
core/rendering/base/tabs_render_base
core/rendering/base/testimonial_card_render_base
core/rendering/base/text_area_render_base
core/rendering/base/text_input_render_base
core/rendering/base/time_picker_render_base
core/rendering/base/toast_render_base
core/rendering/base/toggle_group_render_base
core/rendering/base/toggle_switch_render_base
core/rendering/calendar_markup
core/rendering/field_identity
core/shared/shared
core/shared/size
core/shared/variants
core/theme_provider
flutter
html
mods/card
provider/auth_guard
provider/auth_guard_export
provider/auth_guard_stub
provider/auth_provider
provider/auth_provider_export
provider/auth_provider_stub
service/auth_service
service/auth_service_export
service/auth_service_stub
service/auth_state
stylesheets/base_css
stylesheets/stylesheet
stylesheets/stylesheet_css
theme/color_seed
theme/css_generator
theme/font_config
theme/index: Theme generation system for Arcane Jaspr.
theme/palette
theme/palette_generator
theme/radius_config
util/appearance/colors
util/arcane
util/auth/password_policy
util/classes
util/content/prose_callout
util/content/prose_code
util/content/prose_styles: Prose and documentation styles for markdown content.
util/content/prose_typography
util/content/reading_time
util/content/sidebar_styles
util/design_tokens
util/interactivity/arcane_scripts
util/interactivity/scripts/button/button_feedback_scripts
util/interactivity/scripts/button/button_scripts
util/interactivity/scripts/button/copy_button_scripts: Copy button interactivity scripts.
util/interactivity/scripts/button/cycle_button_scripts
util/interactivity/scripts/button/toggle_button_group_scripts
util/interactivity/scripts/button/toggle_button_scripts
util/interactivity/scripts/carousel/carousel_scripts
util/interactivity/scripts/dialog/chat_scripts
util/interactivity/scripts/dialog/dialog_scripts
util/interactivity/scripts/dialog/drawer_scripts
util/interactivity/scripts/dialog/email_dialog_scripts
util/interactivity/scripts/dialog/item_picker_scripts
util/interactivity/scripts/dialog/mobile_menu_scripts
util/interactivity/scripts/dialog/modal_scripts
util/interactivity/scripts/dialog/popover_scripts
util/interactivity/scripts/dialog/sheet_scripts
util/interactivity/scripts/dialog/time_dialog_scripts
util/interactivity/scripts/dialog/tooltip_scripts
util/interactivity/scripts/gallery/gallery_drag_scripts
util/interactivity/scripts/gallery/gallery_scripts
util/interactivity/scripts/input/calendar_scripts
util/interactivity/scripts/input/checkbox_scripts
util/interactivity/scripts/input/color_input_scripts
util/interactivity/scripts/input/combobox_scripts
util/interactivity/scripts/input/date_picker_scripts
util/interactivity/scripts/input/file_upload_scripts
util/interactivity/scripts/input/formatted_input_scripts
util/interactivity/scripts/input/input_scripts
util/interactivity/scripts/input/mutable_text_scripts
util/interactivity/scripts/input/number_input_scripts
util/interactivity/scripts/input/otp_input_scripts
util/interactivity/scripts/input/radio_scripts
util/interactivity/scripts/input/time_picker_scripts
util/interactivity/scripts/input/toggle_switch_scripts
util/interactivity/scripts/navigation/accordion_scripts
util/interactivity/scripts/navigation/back_to_top_scripts
util/interactivity/scripts/navigation/command_palette_scripts
util/interactivity/scripts/navigation/context_menu_scripts
util/interactivity/scripts/navigation/dot_indicator_scripts
util/interactivity/scripts/navigation/dropdown_scripts
util/interactivity/scripts/navigation/menubar_scripts
util/interactivity/scripts/navigation/navigation_scripts
util/interactivity/scripts/navigation/pagination_scripts
util/interactivity/scripts/navigation/resizable_scripts
util/interactivity/scripts/navigation/selector_scripts
util/interactivity/scripts/navigation/steps_scripts
util/interactivity/scripts/navigation/timeline_scripts
util/interactivity/scripts/navigation/toc_scripts
util/interactivity/scripts/navigation/tracker_scripts
util/interactivity/scripts/navigation/tree_view_scripts
util/interactivity/scripts/scripts
util/interactivity/scripts/slider_scripts
util/interactivity/scripts/theme/rainbow_scripts
util/interactivity/scripts/view/map_scripts
util/interactivity/scripts/view/view_scripts
util/style_types/arcane_color
util/style_types/arcane_style_data
util/style_types/borders
util/style_types/colors
util/style_types/effects
util/style_types/index: Barrel export for all style types
util/style_types/layout
util/style_types/spacing
util/style_types/typography
web