Overview
I built a custom framework that pulls content from Sony’s AEM system and lets the team rapidly generate components for their Flexi Module setup. The stack uses Nunjucks, SCSS and TypeScript, with output compiled to plain HTML, CSS and JS for copy-paste into AEM. A modular pattern library built with Fractal.js underpins the work so components can be reused across landing pages and campaigns.
Challenges
Before this, teams wrote static HTML and plugged it into Flexi Modules. This created repeated code for sliders, banners and similar UI. The goal was to remove repetition, speed up delivery and open the door to richer interactions and animations while remaining compatible with AEM’s content model.
CMS
AEM remains the source of truth. The framework maps component fields to AEM properties and outputs markup with the correct AEM IDs and data attributes so the CMS recognises fields as editable once pasted into a Flexi Module.
Frontend
Nunjucks templates, SCSS and TypeScript form a lightweight build system. Everything compiles to framework-free HTML, CSS and JS so content authors can copy the final code and paste it straight into AEM. This keeps runtime dependencies to zero inside the CMS and avoids integration friction.
Pattern Library (Fractal)
The component library is documented and previewed with Fractal. Fractal was chosen for its strong Nunjucks integration, simple configuration and clear component anatomy. Each component has:
- A Nunjucks template and example context data
- Variants and states documented in one place
- Usage notes and accepted params
With this setup, teams spend time building new components, functionality and animations rather than hunting for snippets. You pick the pieces you need, include them via Nunjucks, render, then copy the compiled output.
Workflow
- Build a component in Nunjucks with typed data and SCSS partials.
- Preview and document it in Fractal with example context.
- Create a page template that composes the components.
- Wrap output with required AEM IDs and field markers.
- Compile to static HTML, CSS and JS.
- Copy into a Flexi Module and let AEM expose fields for editors.
Deployment
The library and pages are built locally, tested in Fractal and exported as static assets. The exported bundle is what authors use in AEM. This keeps the delivery loop fast and reduces reliance on heavy deployments.
Results
- Rapid landing page production and iteration
- Consistent, reusable components across campaigns
- Richer animations and interactions now possible within AEM constraints
- Less duplicated code and simpler maintenance over time