Skip to content
Fullfinity

Website Customization Overview

The Fullfinity islands framework (window.fullfinity) adds interactivity to server-rendered pages — the customer portal, the public website, the ecommerce storefront, and themes. Built on Preact, it hydrates components into Jinja-rendered HTML and gives every module the same registry, patch system, toasts and event bus, so add-ons can extend each other’s UI — all with no build step.

This is the surface you use for any customer-facing or public page. (The authenticated back-office admin application is a separate, self-contained app that is not customized through this framework.)

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”