Structurer

Structurer is a lightweight web app to build stories using multiple narrative structures.

It gives you a visual board where phase columns depend on the selected structure, and where you can create, edit, and move color-coded notes (plot, character, theme).

Use It Online (Private by Design)

If you prefer, you can use Structurer directly online at structurer.sullo.co.

The web version keeps your work private in your browser localStorage: no user accounts, no server-side database, and no cookies required for board data.

Current Features

• Landing page with product overview, privacy note, and demo map by structure
• Dashboard with board list and empty state
• Create and open multiple boards
• Choose structure per board at creation time
• Create custom structures (saved locally) with user-defined phase rows
• Board routes by slug (example: /gatti_come_spine)
• Home route at / (landing)
• Dashboard route at /dashboard
• Structure-driven boards with variable phase count
• Quick-add note menu on each phase
• Character notes with archetype selection
• Drag-and-drop notes across columns and within the same column
• Open a board by clicking its tile (desktop and mobile)
• Export a board to JSON and import saved boards from JSON
• Options menu:
  • Resize all columns with a slider
  • Toggle wrapped columns (multi-row) vs horizontal scroll
• Persistence via localStorage

Pre-Built Structures

• Hero's Journey
• Three-Act Structure
• Save the Cat
• Story Circle
• 7-Point Story Structure
• Romancing the Beat
• MICE Quotient

You can also create and save your own custom structures directly in the dashboard.

Included Demos

• Hero's Journey -> The Matrix
• Three-Act Structure -> Jurassic Park
• Save the Cat -> Back to the Future
• Story Circle -> Finding Nemo
• 7-Point Story Structure -> Harry Potter and the Sorcerer's Stone
• Romancing the Beat -> Pride and Prejudice
• MICE Quotient -> Inception

Tech Stack

• Vanilla JavaScript
• Vite
• @chenglou/pretext for text measurement insights

Run Locally

1) Install dependencies

npm install

2) Start development server

npm run dev

Then open the local URL shown in terminal (usually http://localhost:5173).

3) Build for production

npm run build

4) Preview production build

npm run preview

Project Scripts

• npm run dev - start Vite dev server
• npm run build - create production build in dist/
• npm run preview - preview production build locally

Data Storage

All data is stored in browser localStorage:

• boards: structurer.boards.v1
• UI settings (column width, wrap mode): structurer.settings.v1
• custom structures: structurer.customStructures.v1
• optional dev reset flag: activate.reset

No backend is currently used.

Notes

• This is an early MVP and intentionally simple.
• The architecture is ready to support additional story structures beyond Hero's Journey.
• For suggestions or feature requests, drop me a line.

History

1.2.0

• Reorganized project structure by introducing src/ entrypoints (/src/main.js, /src/styles.css).
• Moved app modules and demo datasets under src/ for a cleaner, more scalable layout.

1.1.0

• Refactored core code into focused modules (app-config, storage, ui-render, demo-boards).
• Improved maintainability while preserving existing behavior and data compatibility.

1.0.0

• Initial MVP release with dashboard, board editor, local persistence, and narrative structure support.

Copyright

2026 Francesco Sullo francesco@sullo.co — Built with Cursor AI in a couple of hours.