Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including blabber-comic with all npm packages installed. Try it out:

var blabberComic = require("blabber-comic")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

blabber-comic v1.1.4

Converts chat logs to comics.


npm version



How it works

Powered by Node and a node-canvas a comic can automatically be generated from a json array of users/text and some characters/backgrounds to be chosen at random.

How to use it from the CLI


Note: Your system may need some compiled dependencies for canvas to work.

npm install -g blabber-comic


$ blabber
$ Who?: Glen
$ Said What?: Test 1
$ Another? (y/n) y
$ Who?: Sarah
$ Said What?: Test 2
$ Another? (y/n) y
$ Who?: Glen
$ Said What?: Test 3
$ Another? (y/n) n
$ Generating Comic...
$ [ Comic Generated @ comics/1.png ]

Additional Options

$ blabber --path ~/Pictures

How to use it in other projects

Generate base64Data

const blabbercomic = require('blabber-comic');
let messages = [] // Array of messages...

blabbercomic(messages).then(response => {
  console.log('Generated comic as base64 data', response);
}).catch(error => {
  throw error;

Save as file with fs

Example included in project. Clone then run npm run test.

const blabbercomic = require('blabber-comic');
const fs = require('fs');
let messages = [] // Array of messages...

blabbercomic(messages).then(response => {
  let base64Data = response.replace(/^data:image\/png;base64,/, '');

  fs.writeFile('./storage/comics/comic.png', base64Data, 'base64', error => {
    if (error) console.error('Uhoh...', error);
    else console.log('Saved file as `comic.png`');
}).catch(error => {
  throw error;

Customizing characters and backgrounds

const blabbercomic = require('blabber-comic');
let backgrounds = ['./assets/backgrounds/1.png', './assets/backgrounds/2.png'];
let characters = ['./assets/characters/1.png', './assets/characters/2.png', './assets/characters/3.png']; // Provide at least 3
let comicSize = 500; // in px square
let borderColor ='#CCCCCC';
let font = 'Impact';
let textColor: '#000000';

let messages = [] // Array of messages...
let config = { backgrounds, characters, comicSize, borderColor, font, textColor };

blabbercomic(messages, config);

Special thanks to:

  • node-canvas by Cairo
  • avatars by Iulia Ardeleanu from the Noun Project
  • backgrounds by Olga Libby from Subtle Patterns


RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free