Story Generator

Story Generator is a visual story editor that combines creative power with modern web technology. It enables authors to create interactive books with multiple content types without coding.

Architecture & technology

The project uses a monorepo structure with three packages: generator (React editor), reader (book viewer), and shared (TypeScript types and utilities). The editor leverages Zustand with Immer middleware for immutable state, enabling zero-cost undo/redo via Zundo.

Blocks are positioned using percentages (0-100) rather than pixels, enabling truly responsive layouts. The canvas supports selection, drag, resize, and rotate operations with optional snap-to-grid. Text styling includes font family, size, color, alignment, text shadows, and transforms; images support advanced CSS filters for creative control.

AI integration

Content generation integrates with Cohere API (text), HuggingFace FLUX (images), and ElevenLabs (text-to-speech with 8 voices). Generated audio is stored locally in IndexedDB as blobs, associated with blocks for click-to-play functionality.

Persistence & export

Dexie.js manages two tables in IndexedDB: books (metadata and structure) and blobs (images, audio, video files). Export generates a ZIP containing pages.json plus all embedded assets, enabling complete book sharing across platforms.

The reader supports two formats: v1 (legacy, with predefined templates) and v2 (free-form positioning). Both load dynamically from PHP with graceful fallback support.