← Engineering
Prototype2023–2025

NarrativeForge

A node-based editor for writing, checking and testing branching interactive stories.

NarrativeForge React Flow editor showing a complete branching story graph
React Flow editor · 10 nodes · 15 connections · multiple endings
Component architectureEditor state, validation, persistence, exports and AI generation boundaries
NarrativeForge component architectureThe React Flow editor owns graph state in the browser, persists projects to local storage, validates and exports stories, and calls Next.js API routes that communicate with OpenAI.BROWSER · NEXT.JS CLIENTNEXT.JS SERVEREXTERNAL SERVICEEditor UItoolbar + node editorchoice connectionsReact Flow statetyped nodes + edgesuseNodesState ·useEdgesStatelocalStorageautosave + projectsclient-side persistenceGraphToStoryConverterconnectivity checksreference integritygraph → StoryNode[]Outputsplayable story readergeneric JSON · TweeAsylum JSONAI generation clientsingle + bulk generationparse and position nodesapply generated graphNext.js AI routesPOST /generate-storyPOST /generate-bulk-storyOpenAI APIgpt-4o-ministructured JSON responseeditspersistvalidateoutputrequest / responserequest / JSONapply graph

Problem

Project brief

Let writers manage complex story branches visually while keeping every choice and destination structurally valid.

Contribution

Role and scope

Designed the application architecture, visual editor, graph validation and persistence model.

TypeScript · Next.js · React Flow · OpenAI

Implementation

Key technical decisions

  1. Used React Flow for typed start, story and ending nodes with explicit connections.
  2. Kept typed node and edge state inside the React Flow editor, with browser-local persistence for iterative authoring.
  3. Placed structured OpenAI generation behind Next.js API routes, then processed generated nodes and choices before inserting them into the graph.

Constraints

Engineering constraints

  • Keep graph state, story content and the playable reader synchronized.
  • Generate structured content without allowing AI output to break the story graph.
  • Make a dense node editor usable across different screen sizes.

Outcome

Result

The prototype saves projects locally, validates graph connections, runs stories in a reader and exports JSON or Twine files.

View source