Skip to main content

Story Editor

The story editor is a web app where a story writer builds a story visually, without writing JSON by hand. It lives at story.artux.net, and its source code is open at zethange/pda-quest-editor-web.

Technical note

The editor isn't part of the artux-net organization — it's a separate project from contributor zethange, integrated with the pdanetwork backend. Logging in requires an account with a role of at least TESTER.

Key idea: a graph, not a list of forms​

Unlike "flat" CMS editors with a list of fields, this is a graph (node-based) editor: a story's stages are nodes on a canvas, and transfers (transfers) are the links between them. The graph lays itself out automatically (the dagre.js library), but each node's coordinates are also saved in the stage's data (editor.x/y), so the layout doesn't "jump around" when you reopen the story.

This is a direct visual reflection of the data model described in Writing Stories: a node = a stage, an arrow = a transfer, and the node's nested panels = texts/condition/actions.

Editor screens​

  1. Home page — a list of your stories, creating a new one, importing/exporting a story's JSON as a whole, and downloading a story straight from the server (with a filter by access type, including archived stories).
  2. Story page — the story's chapter tree, cards for creating/deleting chapters, story settings (info.json: title, description, icon, access), chapter music.
  3. Chapter editor (stage graph) — the main working screen: drag-and-drop creation of new stages, clicking a node opens the stage-editing panel (title, background, type, text with conditions, transfers, actions). Separately, there's a visual builder for missions/checkpoints.
  4. Chapter map editor — the same graph, but over a preview of the location: this is where you drag-and-drop points and squads, with icons for each point type and a preview of the location's tiles.

The detailed workflow is in Author Workflow.

Built-in validation​

The editor checks that stages are correct before saving (for example, transfers[].stage references to stages that don't exist) — a safeguard against "broken" stories that would technically save as valid JSON but would leave the player stuck.

Next​