htjson

Hyper Text JSON

Wrtie HTML in JSON

Install

npm i htjson

Usage

const htjson = require('htjson')
let json = {...}
let html = htjson.compile(json)

Format Example

Simple tag

<div>
  <h1>title</h1>
  <span>content</span>
</div>

equals

module.exports = {
  div: {
    h1: 'title',
    span: 'content'
  }
}

Tag with attribute

<span class="foo">foo</span>

from

module.exports = {span: {_class: 'foo', $text: 'foo'}}

Multiple children without attributes

<article>
  <h1>london</h1>
  <p>London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</article>

from

module.exports = {
  article: [
    {h1: 'london'},
    {p: 'London is the capital city of England. It is the most populous city in the  United Kingdom, with a metropolitan area of over 13 million inhabitants.'},
    {p: 'Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.'}
  ]
}

Multiple children with attribute

<div class="abc">
  divs
  <span>first</span>
  <div>
    <a href="#">london</a>
  </div>
  <div>
    <a href="#">Paris</a>
  </div>
  <div>
    <a href="#">Tokyo</a>
  </div>
</div>

from

module.exports = {
  div: {
    _class: 'abc',
    $: [
      'divs',
      {span: 'first'},
      {
        div: {
          a: {_href: '#', $text: 'london'}
        }
      },
      {
        div: {
          a: {_href: '#', $text: 'Paris'}
        }
      },
      {
        div: {
          a: {_href: '#', $text: 'Tokyo'}
        }
      }
    ]
  }
}

Options

Indent

const htjson = require('htjson')
htjson.indent = '\t' // default 2 spaces