THE STUDIO JENCEL (happy) Hi, welcome to Comic-web's readme!
Comic-Web is a markup language designed to bring your comic creations to life, and rendering engine for that language.
The Comic-Web markup language is quite simple, you can master it in minutes.
THE STUDIO JENCEL (happy) Hi, welcome to Comic-web's readme!
Every capitalized word followed by an empty line defines a layer in your comic panel.
THE STUDIO
The rendering engine searches for an image matching the layer name in your designated folder. File names are lowercase and use dashes instead of spaces (e.g., 'THE STUDIO' becomes 'the-studio.svg').
Each new layer stacks on top of the previous one, allowing you to build complex scenes.
THE STUDIO A CAT
You can stack as many layers as you like—just ensure they’re transparent, or they’ll overlap completely.
When a layer line is followed by non-capitalized lines (without an empty line in between), the engine treats it as a character with dialogue. The character’s image is scaled to make room for their speech bubble.
THE STUDIO A CAT JENCEL Oh cool, I'm here again.
In this example, the image "jencel.svg" is scaled slightly to ensure the text panel is visible.
Organize your files better by using "moods"! Enclose a mood in brackets next to the character’s name, and the engine will look for the image in the corresponding folder (e.g., "./jencel/sad.svg"). If the mood-specific image isn’t found, it defaults to the base character image.
THE STUDIO JENCEL (sad) Oh, where did the cat go?
You can even chain moods with a comma-separated list. For example, "JENCEL (sad, closeup)" will search for "./jencel/sad/closeup.svg" before falling back to "./jencel/sad.svg" or "./jencel.svg".
To see how it all comes together, you can explore the folder structure of this comic.
Bring multiple characters into the scene, and the engine will automatically position them and their speech bubbles for maximum impact.
JENCEL This is my co-host, Alyssa! Welcome, Alyssa ALYSSA (angry) Ah, couldn't you at least clean this place a bit? JENCEL Shhh, it's out of frame.
The engine arranges characters and their dialogue based on the order they’re defined.
You can have as many characters as you want and there isn't any special way to describe characters, any image can be a character.
THE STUDIO JENCEL Here kitty kitty kitty... ALYSSA Hi. A CAT Meowww!
The arrangement of characters corresponds to their dialogue.
For off-screen dialogue, use the "off-screen" mood to keep characters out of the frame while still letting them speak.
The special 'NARRATOR' character is always off-screen, and their dialogue appears at the top or bottom of the panel, just like in traditional comics.
THE STUDIO NARRATOR Later... ALYSSA So, what are you doing over there? Cleaning? JENCEL (off-screen) Yeees! NARRATOR He wasn't...
If you want, you can always include a fully custom-drawn panel. And if you want to mix custom artwork with Comic-Web’s speech balloons, simply use the "off-screen" mood for characters.
The studio Jencel and Alyssa hugging Alyssa (off-screen) Mmmmm. Jencel (off-screen) Love you, see you in the next section.
Now that you’ve mastered the markup, let’s dive into how you can use it to bring your comics to life.
Comic-Web’s API, found in lib/index.js, is simple. It features a single JavaScript function, renderComic, which takes a string of panel descriptions and a directory of images. It returns an SVG DOM element, ready to be displayed in your page.
The plugin is the easiest way to integrate Comic-Web into your HTML pages. Here’s how it works:
1. Include the plugin file in your HTML page:
<script type="module" src="plugin.js"></script>
2. Insert an image with a non-existent link in your images directory, and place the script in the alt-text property:
<img class="panel" src="./comic/01.svg" alt=" THE STUDIO JENCEL (happy) Hi, welcome to Comic-web's readme! I am Jencel, creator of this format. "></img>
The plugin will automatically generate a panel in place of the image.
Looking for an interactive way to create your comics? Try the Comic-Web editor—it’s the perfect playground for experimenting with your ideas.
Comic-Web also includes a style.css file, embedded into all generated images. This file controls the appearance of frames, speech balloons, and more.