Creating ASCII rectangles just became easier. I created cli-box - a NodeJS module that can be used to generate ASCII boxes.

You can install it via NPM by running npm install cli-box or via git. For documentation, check out the GitHub repository and the NPM project page.

The library exports a function that can be used as constructor. You just need to pass it a string (e.g.: "20x10") or an object. The function returns an object containing a settings field (which can be modified after the Box call) and a toString() method that will convert the box into a string.

Let's take a look at the two examples.

Using a string

var Box = require("cli-box");

var b1 = new Box("20x10");
console.log(b1.toString());

If the first argument is a string, it should be in WIDTHxHEIGHT format. The code above outputs:

+------------------+
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
|                  |
+------------------+

As you can see, the default marks are used.

Using an object

If you want to override the default values, just pass an object containing a marks field, as below:

var Box = require("cli-box");
var b2 = new Box({
    w: 20 // or `width`
  , h: 20 // or `height`
  , marks: {
        nw: "╔"
      , n:  "══"
      , ne: "╗"
      , e:  "║"
      , se: "╝"
      , s:  "══"
      , sw: "╚"
      , w:  "║"
      , b: "░░"
    }
});
console.log(b2.toString());

This will output the following fancy ASCII box:

╔════════════════════════════════════╗
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
╚════════════════════════════════════╝

Overlapping the boxes

Things get more fun if you want to overlap the two boxes. You can use overlap library, as below:

var Overlap = require("overlap");

// ...create boxes...

console.log(Overlap({
    who: b2.toString()
  , with: b1.toString()
  , where: {
        x: 15
      , y: 15
    }
}));

The output is:

╔════════════════════════════════════╗
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░║
║░░░░░░░░░░░░░░+------------------+░░║
║░░░░░░░░░░░░░░|                  |░░║
║░░░░░░░░░░░░░░|                  |░░║
║░░░░░░░░░░░░░░|                  |░░║
║░░░░░░░░░░░░░░|                  |░░║
║░░░░░░░░░░░░░░|                  |░░║
╚══════════════|                  |══╝
               |                  |
               |                  |
               |                  |
               |                  |
               +------------------+

Need more help? Open an issue with your question/bug/feature request, and you should receive feedback shortly.