Skip to content

Create mazes that have paths in the form of lines of text.


Notifications You must be signed in to change notification settings


Folders and files

Last commit message
Last commit date

Latest commit



90 Commits

Repository files navigation

Text Maze

Create mazes with paths in the form of lines of text.

Use text-maze-render to render a text maze in a browser via the HTML Canvas API.

See it in use:


Each maze is a 2D array. The value at each index in the nested arrays is a number indicating the type of location in the maze. The solution path follows negative values through the maze.

  • 2 A path and part of the embedded text.
  • 1 A path but not part of the embedded text.
  • 0 Not a path.
  • -1 As 1, but also on the solution path.
  • -2 As 2, but also on the solution path.

Current character whitelist for text:

abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 .?!'


npm install --save text-maze


  • width Optional maze width. An array length. The maze is auto-sized for the browser when width is not given.
  • margin Optional margin in pixels. Used when auto-sizing, ignored when width is given. The following default margin values are used for auto-sizing when margin is not given: 30px for screens < 576px, 100px otherwise.


Import text-maze.

var tm = require('text-maze');

Create an auto-sized maze.

var maze = tm.init('the text you want embedded in the maze').maze;

Get the auto-size values for use with the text-maze-render package.

var result    = tm.init('Scooby Dooby Doo');

var maze      = result.maze;      // The maze.
var endpoints = result.endpoints; // Know your endpoint coordinates.
var cellSize  = result.cellSize;  // Render each maze location in a cellSize × cellSize square.

Create a maze of width 100. The cellSize property in the returned object will be null.

var maze = tm.init('Where are you?', { width: 100 }).maze;

Create a maze auto-sized for the screen leaving 200 pixels of margin.

var maze = tm.init("We've got some work to do now.", { margin: 200 }).maze;

For use in a browser, bundle your code with something like browserify.

browserify code.js -o bundle.js


Create mazes that have paths in the form of lines of text.