Bracketeer

Generate HTML with JSON using the most logical syntax.

Installation

npm install @mrnijboer/bracketeer

Usage

Import the package:

import Bracketeer from @mrnijboer/bracketeer;

Set the target element where the HTML should be rendered:

const page = document.getElementById('page');

Create a JSON object with valid Bracketeer syntax:

const json = [
  { // Render H1 node.
    element: 'h1',
    content: 'Title',
  },
  { // Render DIV containing child nodes.
    element: 'div',
    items: [

      { // Render P node with attributes: style="color: red;" class="display-block".
        element: 'p',
        attributes: {
          style: 'color: red;',
          class: 'display-block',
        },
        content: 'A paragraph with text.',
      },
      {
        element: 'p',
        content: 'Another paragraph.',
      },
      {
        element: 'div',
        items: [

          {
            element: 'p',
            content: 'nested paragraph',
          },
          {
            element: 'p',
            content: 'nested paragraph2',
          },
        ]

      },

    ]
  },
];

Render the JSON to HTML:

const html = Bracketeer.render(json);

Set the target element's HTML to the Bracketeer rendered HTML:

page.innerHTML = html.innerHTML;

Specification

Bracketeer renders JSON to HTML using an array that contains objects.

The array is generated as a container DIV node. All JSON objects in the array are then rendered to HTML nodes and appended to the container DIV node as child nodes.

The function therefore returns the container DIV node with all objects appended as child objects.

Syntax

• Elements must be a valid HTML tag (e.g. 'div', 'h1', 'p', 'table').
• Attributes must be valid HTML attributes (e.g. 'class', 'style', 'id', 'data-something').
• Content and items are mutually exclusive. Objects can either have a String as content, or nested Objects as items.

For example:

const array = [

  {
    element: 'div',
    attributes: {
      style: 'some CSS styles',
      class: 'some CSS classnames',
      'data-something': 'data',
    },
    content: 'A string directly rendered as is.'
  },
  ...

];

Or:

const array = [

  {
    element: 'div',
    attributes: {
      style: 'some CSS styles',
      class: 'some CSS classnames',
      'data-something': 'data',
    },
    items: [

      {
        element: 'div',
        items: [

          // More nested objects.

        ]
      },
      // More nested objects.

    ]
  },
  ...

];

Have suggestions?

Feel free to create an issue on this GitHub page with your suggestion.