renderkid

(work in progress)

RenderKid

RenderKid allows you to use HTML and CSS to style your CLI output, making it easy to create a beautiful, readable, and consistent look for your nodejs tool.

Install with npm:

$ npm install renderkid
RenderKid = require('renderkid')
 
= new RenderKid()
 
r.style({
  "ul": {
    display: "block"
    margin: "2 0 2"
  }
 
  "li": {
    display: "block"
    marginBottom: "1"
  }
 
  "key": {
    color: "grey"
    marginRight: "1"
  }
 
  "value": {
    color: "bright-white"
  }
})
 
output = r.render("
<ul>
  <li>
    <key>Name:</key>
    <value>RenderKid</value>
  </li>
  <li>
    <key>Version:</key>
    <value>0.2</value>
  </li>
  <li>
    <key>Last Update:</key>
    <value>Jan 2015</value>
  </li>
</ul>
")
 
console.log(output)

Elements can have a display of either inline, block, or none:

r.style({
  "div": {
    display: "block"
  }
 
  "span": {
    display: "inline" # default 
  }
 
  "hidden": {
    display: "none"
  }
})
 
output = r.render("
<div>This will fill one or more rows.</div>
<span>These</span> <span>will</span> <span>be</span> in the same <span>line.</span>
<hidden>This won't be displayed.</hidden>
")
 
console.log(output)

Margins work just like they do in browsers:

r.style({
  "li": {
    display: "block"
 
    marginTop: "1"
    marginRight: "2"
    marginBottom: "3"
    marginLeft: "4"
 
    # or the shorthand version: 
    "margin": "1 2 3 4"
  },
 
  "highlight": {
    display: "inline"
    marginLeft: "2"
    marginRight: "2"
  }
})
 
r.render("
<ul>
  <li>Item <highlgiht>1</highlight></li>
  <li>Item <highlgiht>2</highlight></li>
  <li>Item <highlgiht>3</highlight></li>
</ul>
")

See margins above. Paddings work the same way, only inward.

Block elements can have explicit width and height:

r.style({
  "box": {
    display: "block"
    "width": "4"
    "height": "2"
  }
})
 
r.render("<box>This is a box and some of its text will be truncated.</box>")

You can set a custom color and background color for each element:

r.style({
  "error": {
    color: "black"
    background: "red"
  }
})

List of colors currently supported are black, red, green, yellow, blue, magenta, cyan, white, grey, bright-red, bright-green, bright-yellow, bright-blue, bright-magenta, bright-cyan, bright-white.

Block elements can have bullet points on their margins. Let's start with an example:

r.style({
  "li": {
    # To add bullet points to an element, first you 
    # should make some room for the bullet point by 
    # giving your element some margin to the left: 
    marginLeft: "4",
 
    # Now we can add a bullet point to our margin: 
    bullet: '"-"'
  }
})
 
# The four hyphens are there for visual reference 
r.render("
----
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
----
")

And here is the result: