As I’m still working on my interactive stories creation platform, I’ve decided to post another update.

Disclaimer: This is a tool for creating interactive texts with multiple choices and outcomes. It also allows you to view the structure of the texts as a diagram, download the texts in JSON or HTML formats, and read through them in the provided Story Player”. For more information, you can read the following posts: first post, second post. As mentioned in the previous posts, there is a live version, which is linked in the GitHub Readme for the project. I’m not providing a direct link here, as it may change, and it will be easier for me to update it in one place if that happens.

It’s been a while since I last wrote about this project, and truth be told, these posts are written for my personal goals tracking (although I hope others may find them useful too — either to see my approach to working on a project or to use the tool itself).

I’m approaching the point where I may finally be ready to update the platform’s overall design, or rather replace the current design with the new one (it is more or less complete now and simply needs to be swapped in).

However, I have some doubts about the new look and whether it’s intuitive, responsive, and accessible enough.

Home Page

Previously there was no dedicated home page, as there was no routing (the app had one page with two main sections). I’ve added the routes, and now there are multiple pages (including a separate Home page, About page, and individual pages for Story Player and Story Editor).

Story Player

Next, there is an updated Story Player version. I think I should still make some adjustments to the main section’s size, the buttons, and the colors (especially for Clear progress and Instructions buttons, which look quite different from the rest).

For the updated version, it takes the full width of the screen only on smaller screens (there is still a max-width limitation for the main section). I didn’t want to make it too wide, but I wanted more space for longer texts (the screenshot shows just one sentence in the main section, so it might look excessive, but for longer texts it has more room now).

Story Editor

Next, there is an updated Story Editor. I decided to stick to the original layout and mostly update colors and the positioning of elements on the screen (in an attempt to better fit everything). Again, this is likely one of the steps in the iteration process, as I need to reconsider some of the functionality and the way everything is displayed. One of the future goals is to make it more intuitive — perhaps with hints or descriptions to help users understand every button or section (maybe I should add popups or on-hover elements with short texts).

I may need to reconsider the color choices again. I’d prefer colors that are similar yet distinguishable enough (some of the text and background colors currently don’t have sufficient contrast, which makes them slightly harder to read).

Story Diagram

There is also a functionality to view the story diagram. Not a lot of changes here — mostly color and border adjustments to match the new style.

Sidenote: While writing this post, I noticed that the updated version might need extra spacing between option elements, larger text, and scroll prevention when the diagram modal is open (to prevent scrolling the main page beneath it). Documenting the process helps me find things to fix or adjust.

About Page

There is now an about page (as mentioned earlier, previously there was no routing, so there was no separate page for it).

To be honest, this one seems a bit too much right now. First, because it partially mirrors information from other pages, and second, because it looks overwhelmed with links and text (mixed in a not-so-easy-to-read structure).

I should potentially reorganize the elements and maybe add separate blocks with borders and images (not sure about the images, though). I still want to have this additional page for various details about the platform. So, one more area for improvement, but the basis is there already.

Story HTML File

One feature of the platform is the ability to export an HTML file that can be opened on its own in a browser (so you don’t need to use the Story Player). I tried to adjust the styling of that HTML file to match the updated version of the Story Player. It still needs tweaks, but might be close enough for now.

Closing Thoughts

I’ve also added a custom error page (for routes that don’t exist), updated the toast messages, and started refactoring (creating additional components and utils to avoid code repetition). Overall, there aren’t many new functionalities; the work is mostly focused on restyling everything and optimizing the code’s inner structure.

Chances are I will change everything again, or perhaps decide to stick with the current updated version (at least it distantly matches a couple of the text adventure games I’ve made before). I stubbornly don’t want to be bound by any particular design principles or templates, and I simply follow my own vision (which is a bit too big of a word, I know). The main reason is that I’m mostly doing it for myself, so I organize and design it the way I like. However, I hope I might eventually turn it into something useful for others as well.

So far, the platform is a niche use case: JSON files for stories in HTML format. At the same time, it also allows viewing the diagrams, exporting individual HTML files, and, in theory, can be used not only for interactive stories but for any content that can be navigated back and forth (branching guides, manuals or documentation, etc.). I should probably consider renaming it or adding clearer instructions and descriptions at least (which is also among the future goals).

That’s about it for this update. It may replace the previous version when I post this, or it may happen later on (or the updated version might be remade completely), but for now this is where I am.

P.S.: Rounded borders and shadows for interactive elements are often considered must-haves and good practice, but with these stories-related projects I’m trying something different. Writing this, I’ve realized that sharp borders appear mostly in my stories-related projects, while elsewhere I use rounded ones (I guess, I can use this as some sort of a distinguishable feature).

If you want to get more details and screenshots related to making this tool, check this post on my Medium blog.

Thank you for reading.