Bundle Architecture
Deep dive into how exported FlowWasp story bundles work under the hood: zero backend dependencies, pure static assets, and client-side reactive playback.
Key Architectural Pillars
Zero Dependencies
No npm, Node.js runtime, external APIs, or CDNs required. Works in fully disconnected environments.
High Performance
Immediate page loads. Images are pre-cached in browser memory for instantaneous step transitions.
Portable JSON Schema
All capture metadata is stored in human-readable JavaScript objects you can modify anytime.
The Data Schema (`data.js`)
The story state is exported into a global variable window.FLOWWASP_DATA containing metadata and the step list:
window.FLOWWASP_DATA = {
id: "2f87d8a6-bc32-4510-bcf4-82c8447c09ff",
title: "Interactive Onboarding Walkthrough",
description: "Step-by-step guide to setting up your account",
createdAt: "2026-09-12T08:00:00.000Z",
steps: [
{
stepNumber: 1,
title: "Click the Profile Avatar",
description: "Navigate to your user preferences in the top navigation bar.",
imagePath: "assets/step-1.jpg",
highlight: {
xPercent: 88.5,
yPercent: 4.2,
widthPercent: 3.5,
heightPercent: 4.0
}
}
]
};