htgen is a tiny but featured hypertext markup code generator for JavaScript environments. It was designed to be extremly easy to use and easy to embed in templating engines
- Tiny: 400 SLOC, 1KB gzipped
- Simple and elegant API with method chaining and DSL
- Minified or pretty well indented code generation
- Runs over node and the browser
- No third party dependencies
- No DOM required
- Well tested
$ npm install htgen
Via Bower package manager
$ bower install htgen
Or loading the script remotely (just for testing or development)
<script src="//rawgithub.com/h2non/htgen/master/htgen.js"></script>
- Node.js
- Chrome
- Firefox
- Safari
- Opera >= 11.6
- IE >= 9
var ht = require('htgen')
// nested functions calls
ht('.container#main', { attr: 'value' },
ht('ul', { styles: { 'z-index': 10 } },
ht('li', 'one'),
ht('li', 'another')))
.render()
// method chaining
ht('p')
.child('span', 'text')
.child('span', 'hi')
.attr('class', 'normal')
.render()
// using methods shortcuts
ht('ul')
.c('li',
// you can interpolate it as well in concat string expressions
// it overrides the prototype inherited toString() method
ht('p.link', 'click ' + ht('a', { href: 'http://i.am' }, 'here')))
.c('li',
ht('p', 'some text'))
.a('class', 'list')
// make it pretty!
.r({ pretty: true, indent: 4 })
// self-closed tags
ht('!img')
// doctypes definition
ht('doctype') // default to '<!DOCTYPE html>'
ht('doctype xml')
// dynamic
var fruits = { a: 'Apple', b: 'Banana', c: 'Coco' }
ht('table.pretty',
ht('tr', ht('th'), ht('th', 'fruit')),
Object.keys(fruits).map(function (n) {
return ht('tr',
ht('th', n),
ht('td', fruits[n])
)
})
).render(true)
html => <!DOCTYPE html>
xml => <?xml version="1.0" encoding="utf-8" ?>
transitional => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
strict => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
frameset => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
1.1 => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
basic => <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
mobile => <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
Creates a new node and return an instance of Node
Name argument can be expressed like name.class1.class2#id
,
that is a short cut for setting the class and id attributes
Type: object
Store the node attributes, if are defined
Type: string
Store the node tag name
Type: array
Store the node child nodes instances
Type: object
If the current node is a child node, this points to the parent node instance
Type: boolean
If the current node tag is self-closed, this attribute will be `true
Alias: c
Chainable: yes
Creates a new child node
Alias: cc
Chainable: yes
Creates and push new child node, but changes the chain call to the instance of the created child node
Alias: r
Return: string
Render and return a string of the current node and all of its child nodes
See the supported render options bellow.
You can aditionally simply pass true
to render prettified code with default options
Alias: a
Chainable: yes
Add new attribute to the current node. name
argument can be an object with key-value maps
Chainable: yes
Add a new child node
Return: boolean
Returns true
if the current node has parent node, otherwise false
Return: boolean
Returns true
if the current node has child nodes, otherwise false
Alias: l
Return: Node
Return the latest pushed child node
Generator supported options:
- pretty: Generate a well-indented code. Default to
false
- size: Initial indent size. Default to
0
- indent: Indent spaces. Default to
2
- tabs: Use tabs instead of spaces to indent. Default to
false
Return: string
Return: string
Return: string
Render the current node child nodes, if they exist
Return: string
Return the string equivalent to the applied indentation characters
htgen is completely written in LiveScript. Take a look to the language documentation if you are new with it. Please, follow the LiveScript language conventions defined in the coding style guide
You must add new test cases for any feature or refactor you do, also keep in mind to follow the same design/code patterns that already exist
Only node.js is required for development
Clone/fork this repository
$ git clone git@github.com:h2non/htgen.git && cd htgen
Install package dependencies
$ npm install
Run tests
$ npm test
Coding zen mode
$ grunt dev [--force]
Distribution release
$ grunt release
- JSON map
- HTML entities convert
Copyright (c) Tomas Aparicio
Released under the MIT license