Blok Tales: A Visual Novel Made with Storyblok

This is a submission for the Storyblok Challenge What I Built Inspired by Ren'Py, a visual novel engine for Python developers, I set out to bring this idea over to the web. I call it Blok Tales. The general idea was to make making visual novels on the web very easy but still customizable should the need arise. Storyblok was perfect for this. Storyblok allows me (and other users) to create visual novel scenes that can connect to one another and even branch out based on choices. Storyblok allows me to ADD, REMOVE, and EDIT content from the comfort of their dashboard AND visual editor. While the headless nature of Storyblok itself allows me to modify the looks through the React application I've created. If I need to add a scene or a dialog, I can go over to my dashboard and do it there. If I ever decide to create a whole different theme for my visual novel, I can do that too. I'll go over to my React app and change a few classes, shift a few components around, etc. Basic Story I want to give a very brief summary of the story I created for demo purposes. It's about a Dev in Webtopia, confronting "The Monolith" a bloated monolithic traditional CMS, which then leads to the discovery of "Storyblock" a lighter, headless alternative. Demo Live Visual Novel You can try out the visual novel live here. Storyblok Space: Here is a link to duplicate my space: https://app.storyblok.com/#!/build/342867 OF NOTE: The link doesn't seem to be working for other users. I, the owner, can use this; but I can't figure out how to make this link public. If anyone knows, please let me know in the comments. Code Repository: Here's a link to my React app that renders the visual novel content from Storyblok, in case you want to create your own. https://github.com/AnsellMaximilian/blok-tales If you'd like to create your own design with themes of your choice, you can clone the repo and connect to your own space. Look at the README file on the repo for instructions. Demo Video or Screenshots Here are some snippets of scenes I created with Blok Tales: Main Menu Narration Dialog with Character Choices Tech Stack Here is my tech stack: React: used to map stories and custom blocks into reusable components TailwindCSS: used to style components React Router: used for easily mapping URL paths to story slugs Framer Motion: used for smooth transitions between dialogs and narrations for each scene How I Used Storyblok At its core, Blok Tales is smooth collaboration between my React components and my Storyblok's space, which I've configured specifically to support scene creations. You can clone my space, or create your own using this schema: Legend: The container represents a scene, which is a content type Blue icons are assets in my Storyblok space Each white box is a block-type field within a content type (story or another custom block) Each green block is a custom component So, to give an example: I have a scene (story) called "prologue" The scene has the following: Background: is an asset (image) Music: is also an asset (music) Content: is a block type, meaning it will be comprised of an array of other blocks. Choices: is also a block, containing specifically the choice custom block Content will have children of the following type: Narration and Dialog Narration is just a custom block type containing one single block: text Dialog is a little more complex. It's also a custom block; it also has text. But it has another thing: Character-- yet another custom block. Character itself... is another custom block, which has the image field for character sprites and name. As you can see you can create pretty complex schemes using Storyblok. Storyblok Features Used I want to use this section to highlight specific features of Storyblok I utilized to realize my vision to make a web based visual novel. And to do that I'll go through what creating a scene looks like. We'll use an actual scene I have in my space; it's called "Confronting The Monolith": Creating a new content type In Storyblok, you generate content by making stories, this usually are pages. But you can go further and generate different types of stories. This way you can distinguish between them in terms of how you render them. For example, I render scene-type stories differently than regular pages. This gives you a huge flexibility and removes any restriction in what types of pages you want to display. Whitelisting types of blocks to add The above image shows me creating "content" within scenes. I want to mention a really cool feature that Storyblok provides, which is whitelisting OR limiting what types of custom blocks can be added within a block-type field. I found this really useful both for establishing tight control over your content as well as to limit the choices when adding blocks so you don't get overwhelmed by block types you KNOW yo

Jun 26, 2025 - 16:10

Blok Tales: A Visual Novel Made with Storyblok

This is a submission for the Storyblok Challenge

What I Built

Inspired by Ren'Py, a visual novel engine for Python developers, I set out to bring this idea over to the web.

I call it Blok Tales. The general idea was to make making visual novels on the web very easy but still customizable should the need arise.

Storyblok was perfect for this. Storyblok allows me (and other users) to create visual novel scenes that can connect to one another and even branch out based on choices.

Storyblok allows me to ADD, REMOVE, and EDIT content from the comfort of their dashboard AND visual editor. While the headless nature of Storyblok itself allows me to modify the looks through the React application I've created.

If I need to add a scene or a dialog, I can go over to my dashboard and do it there. If I ever decide to create a whole different theme for my visual novel, I can do that too. I'll go over to my React app and change a few classes, shift a few components around, etc.

Basic Story

I want to give a very brief summary of the story I created for demo purposes. It's about a Dev in Webtopia, confronting "The Monolith" a bloated monolithic traditional CMS, which then leads to the discovery of "Storyblock" a lighter, headless alternative.

Demo

Live Visual Novel

You can try out the visual novel live here.

Storyblok Space:

Here is a link to duplicate my space: https://app.storyblok.com/#!/build/342867

OF NOTE: The link doesn't seem to be working for other users. I, the owner, can use this; but I can't figure out how to make this link public. If anyone knows, please let me know in the comments.

Code Repository:

Here's a link to my React app that renders the visual novel content from Storyblok, in case you want to create your own.

https://github.com/AnsellMaximilian/blok-tales

If you'd like to create your own design with themes of your choice, you can clone the repo and connect to your own space. Look at the README file on the repo for instructions.

Demo Video or Screenshots

Here are some snippets of scenes I created with Blok Tales:

Main Menu
Narration
Dialog with Character
Choices

Tech Stack

Here is my tech stack:

React: used to map stories and custom blocks into reusable components
TailwindCSS: used to style components
React Router: used for easily mapping URL paths to story slugs
Framer Motion: used for smooth transitions between dialogs and narrations for each scene

How I Used Storyblok

At its core, Blok Tales is smooth collaboration between my React components and my Storyblok's space, which I've configured specifically to support scene creations.

You can clone my space, or create your own using this schema:

Legend:

The container represents a scene, which is a content type
Blue icons are assets in my Storyblok space
Each white box is a block-type field within a content type (story or another custom block)
Each green block is a custom component

So, to give an example:

I have a scene (story) called "prologue"
The scene has the following:
1. Background: is an asset (image)
2. Music: is also an asset (music)
3. Content: is a block type, meaning it will be comprised of an array of other blocks.
4. Choices: is also a block, containing specifically the choice custom block
Content will have children of the following type: Narration and Dialog
Narration is just a custom block type containing one single block: text
Dialog is a little more complex. It's also a custom block; it also has text. But it has another thing: Character-- yet another custom block.
Character itself... is another custom block, which has the image field for character sprites and name.

As you can see you can create pretty complex schemes using Storyblok.

Storyblok Features Used

I want to use this section to highlight specific features of Storyblok I utilized to realize my vision to make a web based visual novel. And to do that I'll go through what creating a scene looks like. We'll use an actual scene I have in my space; it's called "Confronting The Monolith":

Creating a new content type

In Storyblok, you generate content by making stories, this usually are pages. But you can go further and generate different types of stories. This way you can distinguish between them in terms of how you render them.

For example, I render scene-type stories differently than regular pages. This gives you a huge flexibility and removes any restriction in what types of pages you want to display.

Whitelisting types of blocks to add

The above image shows me creating "content" within scenes. I want to mention a really cool feature that Storyblok provides, which is whitelisting OR limiting what types of custom blocks can be added within a block-type field.

I found this really useful both for establishing tight control over your content as well as to limit the choices when adding blocks so you don't get overwhelmed by block types you KNOW you won't need.

Anyways, for my case, I've limited the content field of my scenes to only include narration and dialog, which are basically just text boxes furthering the story forward. I can't add any other types of blocks there; this way I can be sure there won't be any expected blocks in there that will show up.

Ordering blocks

As I've said, content consists of narration and dialog. You hit right click, it moves the story forward with either a text of narration or a dialog from a character.

I want to mention how useful it was that order of these blocks MATTER. This way, if I ever need to change the order around, I can do that; and it will be reflected in the frontend immediately.

Or if I ever need to add a narration in the middle, I can do that.

Creating presets for characters

As described in the schema, each dialog consists of a character and a text of what the character is saying.

Character is another custom block type.

Another cool feature I want to mention is the ability to create presets. Obviously filling character details for each dialog will be repetitive and slow. But with Storyblok I can actually save a specific instance of a custom block with prefilled fields.

Here I've created all the presets for my characters. This way I can avoid filling the same fields with the same values each time I want my characters to talk more than once.

Creating scene references

At the end of each scene I have choices. These are custom blocks that have the following field: label and next_scene. Label is a regular text field for displaying the choice. But next_scene actually is a reference to another scene.

I want to mention that Storyblok returns only the UUID for each scene by default. To have any meaningful data returned from references you have to establish relations. Read the docs here.

Thanks to the reference block type, I can actually create branching choices and narrative decisions within Blok Tales.

Learnings and Takeaways

I had a ton of fun learning about how to use Storyblok to my advantage to create this visual novel engine.

It honestly surprised me how many features directly supported my vision and how I wanted to implement the visual novel engine.

I had some trouble with asset caching, but other than that everything went dandy!

Image editor

I want to sneak this one in real quick. The image editor is SUPER useful. Sometimes I create the character sprite backwards, and there it was. The "flip horizontally" feature on Storyblok. It saved me a ton of time.