I’ve made a simple editor for making interactive text adventures and decided to give it a little introduction.

Previously I've made an interactive text adventure game with JavaScript, HTML and CSS. After that I’ve turned it into a new version made with React and then made a new part of it (that continues the story). To give it a brief description, it’s an interactive story with multiple choices that affect where the story goes. Under the hood, it’s basically a web page made with React and plain CSS that displays a text and buttons with choices. Texts are stored in a JavaScript file as an array and displayed on the page based on the users choices.

When I was making these games, a couple of thoughts came to mind. First, it would be nice to have a tool that creates that file with the text content for you, so you don’t need to worry how to structure it; you write your texts, add choices to them, and then connect next texts to these choices. Second, it would also be convenient to be able to generate a diagram based on these texts you write, so you could have a clear view (to see the structure of your story). Also, as a bonus, it would be even more convenient to be able to play through such a story right away, so you could test it.

Back when I was making these text adventures, I didn’t really want to dive into making something like this, but recently thought that I may want at some point to make a new interactive story and so why not trying to create a tool for these tasks.

I am pretty sure that tools like these already exist (in standalone versions or as a part of some other tools), but I just wanted to have something of my own.

I wasn’t aiming at anything too complex and tried to focus on the three main features that I’ve just mentioned:

• read/play through the stories based on the JSON file (not a JavaScript file this time);
• create stories with multiple choices and outcomes to get a JSON file with their structure (+ be able to upload existing JSON file to continue working on the story);
• view/download a diagram that shows the story structure;

Another thing to mention is that, as I wanted to have an initial (MVP) version being done relatively quickly, I’ve decided to use AI for building it. I wouldn’t call it a full vibe coding, as I make my own additions to it and constantly tweak the code, but at the same time, a significant part of the project is made after various prompts. I mostly stick to GPT, but occasionally use other AIs.

For the stack I’ve chosen React (initiated with Vite), Tailwind CSS, and several smaller packages (like lucide-react for icons, html-to-image for diagram download, sonner for toast messages, react-flow and dagre for diagram creation, uuid for IDs generation). There is obviously a chance this may change in the future, if I continue working on this tool.

I have a demo version deployed, but, as it may change, I will leave a link to the project repository on GitHub where all the necessary information is written in the Readme.

As for the functionality, it currently has the mentioned main features that can be accessed through two tabs: Play Stories and Create Stories (for now, this is one page with content displayed based on the chosen tab).

As mentioned, at the moment you can:

• upload stories from the Play Stories section to read/play through them;
• create new stories or continue working on the created ones (by importing them) from the Create Stories section;
• download JSON files with your stories to either check them in the Play Stories section or to save your work to get back to it later on;
• view a diagram for your created stories to better understand their structure (+ you can download an SVG file with that diagram);

The main goal for me was to create an initial prototype/MVP that can already be used, but that can also be improved further on, if I decide so. I wanted to have the basic functionality ready from the beginning, and I believe it is there now (which is to check stories/create stories/see stories structure).

The Play Story functionality is mostly implemented for testing (currently there are no images, effects, etc.), so you can see how you story goes and where the choices lead. The idea is not so much to use it for playing through the interactive stories, but to see if everything is connected properly. For me personally, the most important thing is the functionality to get a JSON file from a simple interface and also — a diagram image to double check the story structure (texts/choices/outcomes). The JSON file can then be used to create a separate text adventure (like the ones I’ve mentioned at the beginning of this post).

Here is an example of the JSON file:

{
  "title": "Story Title",
  "author": "Story Author",
  "description": "Story Description",
  "start": "d5cd557f-04e9-46cf-b382-269c51de118d",
  "nodes": {
    "d5cd557f-04e9-46cf-b382-269c51de118d": {
      "label": "Node 1",
      "text": "Text 1.",
      "options": [
        {
          "text": "Choice 1",
          "next": "8e483f0b-4ff5-438c-8edd-43bf293fba96",
          "nextLabel": "Node 2"
        },
        {
          "text": "Choice 2",
          "next": "2cc8dfed-5efd-452a-89be-c94a73e63f8f",
          "nextLabel": "Node 3"
        }
      ],
      "createdAt": 1758185687784
    },
    "8e483f0b-4ff5-438c-8edd-43bf293fba96": {
      "label": "Node 2",
      "text": "Text 2",
      "options": [
        {
          "text": "Choice 3",
          "next": "d5cd557f-04e9-46cf-b382-269c51de118d",
          "nextLabel": "Node 1"
        }
      ],
      "createdAt": 1758197485725
    }
  }
}

It can then be fetched wherever you want to use it and accessed in an API-way (or turned into a fully-functional API as well). I might tweak this JSON structure at some point, as for now it may not be as straightforward as I would want. This is mostly because of the IDs usage, as I’ve decided to use uuid for these longer IDs versions, so they won’t create issues due to the possible duplication. Because of that I’ve also added label and nextLabel values. They are not being used anywhere and their only purpose is to show users which part of the story they are looking at and where it leads.

I’m trying to keep this project organized, so there is a docs folder in the GitHub repository where changelog and roadmap files can be seen (mentioning what’s been changed and what can be potentially changed or is already known to cause issues). Once again, for now I’m not sure about the future development of this tool, that’s why I’m only providing a GitHub repo link (see above) where the most important details are mentioned in the Readme.

This was a brief presentation for this initial MVP version of the Stories Platform. I have to say, I’ve quite enjoyed making it. There are a lot of areas for improvement obviously, especially considering the AI-assistance (you can check the roadmap file, if you want), but at least now I have a little tool that I can use if I decide to create another interactive text adventure game. Or perhaps, it can help someone else as well.

Thank you for reading.