renderkid

What is renderkid?

RenderKid is a powerful HTML rendering engine designed for Node.js. It allows developers to create and manipulate HTML content programmatically with ease. The package is particularly useful for generating HTML for emails, reports, or any other content that needs to be dynamically created and styled.

What are renderkid's main functionalities?

HTML Rendering

RenderKid allows you to render HTML content. In this example, a simple HTML string is rendered and logged to the console.

const RenderKid = require('renderkid');
const kid = new RenderKid();
const html = kid.render('<div>Hello, <b>world</b>!</div>');
console.log(html);

CSS Styling

RenderKid supports CSS styling. In this example, the <b> tag is styled to have red text color.

const RenderKid = require('renderkid');
const kid = new RenderKid();
kid.style({
  'b': {
    'color': 'red'
  }
});
const html = kid.render('<div>Hello, <b>world</b>!</div>');
console.log(html);

Custom Tags

RenderKid allows you to define custom tags. In this example, a custom tag <custom> is defined and rendered as a <span> with a class of 'custom'.

const RenderKid = require('renderkid');
const kid = new RenderKid();
kid.addTag('custom', {
  render: function (node) {
    return `<span class='custom'>${node.innerHTML}</span>`;
  }
});
const html = kid.render('<div>Hello, <custom>world</custom>!</div>');
console.log(html);

Other packages similar to renderkid

cheerio

Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It allows you to parse and manipulate HTML and XML with a jQuery-like syntax. Unlike RenderKid, Cheerio focuses more on DOM manipulation rather than rendering and styling.

jsdom

jsdom is a JavaScript implementation of the WHATWG DOM and HTML standards, primarily intended for use with Node.js. It allows you to create and manipulate a DOM tree, similar to how you would in a browser. While RenderKid is focused on rendering and styling HTML, jsdom provides a more comprehensive simulation of a web browser environment.

htmlparser2

htmlparser2 is a fast and forgiving HTML/XML parser. It is designed to be used in Node.js and provides a way to parse and traverse HTML documents. Unlike RenderKid, htmlparser2 does not provide rendering or styling capabilities but is excellent for parsing and manipulating HTML.

README

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.

Installation

Install with npm:

$ npm install renderkid

Usage

RenderKid = require('renderkid')

r = 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)

Stylesheet properties

Display mode

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)

Margin

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>
")

Padding

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

Width and Height

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>")

Colors

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.

Bullet points

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: