Skip to content
Fullfinity

Frontend Framework Overview

Two frontends

Section titled “Two frontends”

Fullfinity has two separate frontends, and they are not interchangeable:

  • The React/Mantine back-office SPA — the authenticated admin application (every List, Kanban, Form, report, wizard and dashboard you see after logging in). It is built with React, Mantine, TanStack Query and React Router, and its source lives under app/src/. It is documented separately starting at React Back-Office App; see also Widget & View Registries, Data Layer and React Conventions.
  • The Preact islands framework (window.fullfinity) — described by this page and the rest of this section. It hydrates server-rendered pages (the portal, website, ecommerce storefront and themes) and has its own registry, toasts and event bus.

If you are building an admin screen, use the React app. If you are adding interactivity to a Jinja-rendered public page, use the islands framework below.

Fullfinity includes a lightweight frontend component framework for building interactive website components. Built on Preact, it provides a familiar React-like API with powerful extensibility features for module developers.

Key Features

Section titled “Key Features”
  • Component Registry - Modules register components that can be discovered and used by templates
  • Patch System - Extend or modify components with priority ordering, conditions, and dependencies
  • Extension Slots - Define extension points in components for addons to inject UI
  • Method Patching - Patch specific methods with _super support for class-based components
  • Event Bus - Cross-module communication through events
  • Stores - Shared state management across components
  • Auto-Mounting - Components automatically mount from HTML data attributes
  • No Build Step - Uses ES modules directly, no webpack/vite required

Architecture

Section titled “Architecture”
┌─────────────────────────────────────────────────────────────────┐
│                         Jinja2 Template                          │
│  <div data-component="ProductCard" data-props='{"id": 123}'>    │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                     Fullfinity Framework                         │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐              │
│  │  Registry   │  │   Patch     │  │  Event Bus  │              │
│  │  .component │  │  .patch()   │  │  .on/.emit  │              │
│  │  .store     │  │  .unpatch() │  │             │              │
│  │  .slot      │  │  .patchMeth │  │             │              │
│  └─────────────┘  └─────────────┘  └─────────────┘              │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
┌─────────────────────────────────────────────────────────────────┐
│                          Preact                                  │
│         Components, Hooks, Virtual DOM, Signals                  │
└─────────────────────────────────────────────────────────────────┘

How It Works

Section titled “How It Works”
  1. Framework loads - framework.js is included in the base template
  2. Module scripts load - Each module’s components.js loads in dependency order
  3. Components register - Modules call fullfinity.registry.component() to register
  4. Auto-mount - Framework scans for data-component attributes and mounts components
  5. Reactivity - Preact handles updates, hooks provide state management

Script Loading Order

Section titled “Script Loading Order”

Scripts load in this order to ensure dependencies are available:

  1. framework.js (core) - Preact + framework utilities
  2. Module components.js - In module dependency order (e.g., website before ecommerce)
  3. Theme JS - Theme-specific scripts
  4. Page JS - Page-specific scripts

Comparison with React/Vue

Section titled “Comparison with React/Vue”
FeatureFullfinityReactVue
Bundle size~4kb~40kb~33kb
Build requiredNoYesYes
Component syntaxFunctions + htmJSXSFC
StateHooks + SignalsHooksComposition API
Module extensionBuilt-in patch systemNoneNone
Learning curveLow (React-like)MediumMedium

When to Use Components

Section titled “When to Use Components”

Use Preact components for:

  • Interactive widgets - Forms, carts, configurators
  • Real-time updates - Live data, notifications
  • Complex state - Multi-step flows, dependent fields
  • Cross-module features - Cart that updates from product pages

Use server-side Jinja2 for:

  • Static content - Text, images, layouts
  • SEO-critical content - Blog posts, product descriptions
  • Simple interactions - Links, basic forms

Next Steps

Section titled “Next Steps”