Inspiration Build a simple, educator‑friendly tool that makes it easy to create interactive branching stories for lessons, assessments, and classroom activities.
What it does Browser‑based editor to create scenes, add choices and hints, visualize connections on a board (DOM + SVG), preview/play stories, and export JSON or standalone playable HTML. Includes autosave + version history and keyboard shortcuts for fast editing.
How we built it Single‑page app using plain HTML, CSS and vanilla JavaScript. Scenes are DOM elements, connectors are SVG paths, state is serialized to localStorage. Autosave/versioning is in a separate module (autosave.js). Exports use Blob/JSON and a downloadable HTML bundle.
Challenges we ran into Managing app initialization order (DOM refs vs. loadFromLocal) and avoiding render errors; deciding a safe, simple snapshot/undo model; serializing complex state for export and restore while keeping UI responsive.
Accomplishments that we're proud of Stable client‑side autosave with history and restore, keyboard shortcuts for rapid editing, clean inspector UI for scene editing, and exportable playable story packages — all running entirely in the browser with no server.
What we learned Practical patterns for serializing editor state, implementing lightweight undo/redo using snapshots, coordinating UI lifecycle (DOMContentLoaded vs. init routines), and building usable editor UX with plain JS and SVG.
What's next for StoryWeaver Add AI‑assisted content generation, real‑time collaboration, SCORM/LMS export, accessibility improvements and localization, and basic analytics/assessment tracking for student runs.
Built With
- autosave
- css3
- github
- html5
- javascript
- stories
Log in or sign up for Devpost to join the conversation.