ezhtml
v2.4.2
Published
Simple HTML and Client-side JavaScript using Node.js
Downloads
48
Maintainers
Readme
EZ HTML v2.4.2
This Node.js module is designed to be a simple API for programatically rendering HTML 5
web pages. It outputs clean, formatted code, making it easy to troubleshoot errors and verify
the rendered output. The module includes classes for each HTML 5 element type and also a Page
class that has shorthand methods for each HTML element that can be called sequentially, nesting
elements automatically or explicitly by passing an argument to the method, for rapid HTML
development.
- Installation
- Current Status
- Examples
- Usage
- The Page Class
- Method Signatures Common to All Elements
- Method Signatures Common to All Container Elements
- Elements
- Contributing
- License
Installation
npm install ezhtml
Current Status
Fully functional, and code base now reduced by over 65% due to conversion to EZ Objects. All HTML 5 elements and attributes have been implemented except those noted below. There are no known bugs currently, but if found they can be reported by opening an issue against the GitHub repository or by initiating a pull request with the fix.
Note: Screen reader support is not currently within the scope of this library, but could be added fairly easily if needed. Same thing with ruby annotations.
Basic Example - Method 1
const express = require('express');
const ezhtml = require(`ezhtml`);
const app = express();
app.get(`/`, (req, res, next) => {
/** Create new 'page', automatically includes <html>, <head>, and <body> tags */
const p = new ezhtml.Page();
/** Append title element to head element - knows to auto-nest under <head> */
p.title().text(`My Basic Example`);
/** Append rank 2 heading to body, knows to auto-nest under last <div> else <body> */
p.h2().text('My Example EZHTML Page');
/** Append paragraph to body, knows to auto-nest under last <div> else <body> */
p.paragraph().addClass('my-class').text('This is the first paragraph of my page.');
/** Render HTML and send as response */
res.send(p.render());
});
app.listen(8080, () => {
console.log(`Web server up and running on port 8080!`);
});
Expected Output
<html>
<head>
<title>
My Basic Example
</title>
</head>
<body>
<h2>
My Example EZHTML Page
</h2>
<p class='my-class'>
This is the first paragraph of my page.
</p>
</body>
</html>
Basic Example - Method 2
const express = require('express');
const ezhtml = require(`ezhtml`);
const app = express();
app.get(`/`, (req, res, next) => {
/** Create new HTML element */
const html = new ezhtml.HTML();
/** Create head element */
const head = new ezhtml.Head();
/** Append title element to head element */
head.append(new ezhtml.Title().text(`My Basic Example`));
/** Append head element to HTML element */
html.append(head);
/** Create body element */
const body = new ezhtml.Body();
/** Append body element to HTML element */
html.append(body);
/** Append rank 2 heading to body */
body.append(new ezhtml.H2().text('My Example EZHTML Page'));
/** Append paragraph to body */
body.append(new ezhtml.Paragraph().addClass('my-class').text('This is the first paragraph of my page.'));
/** Render HTML and send as response */
res.send(html.render());
});
app.listen(8080, () => {
console.log(`Web server up and running on port 8080!`);
});
Expected Output
Same as Method 1, see above.
Expanded Example - Method 1
const express = require(`express`);
const ezhtml = require(`ezhtml`);
const app = express();
app.get(`/`, (req, res, next) => {
const p = new ezhtml.Page();
/** Automatically added to <head> */
p.title().text(`My Example Page`);
p.style().text(`p.myClass { font-weight: bold; font-family: Arial, helvetica, sans-serif; }`);
p.script().src(`https://code.jquery.com/jquery-3.3.1.js`);
/** Automatically added to <body> */
p.div().style(`width: 100%; text-align: center;`);
/** Explicitly added to last <div> else <body> */
p.h2(`div`).style(`color: blue;`).text(`My Example Page`);
/** Explicitly added to <body> */
p.div(`body`).style(`position: relative; width: 50%; left: 25%; text-align: center;`);
/** Automatically added to last <div> else <body> */
p.orderedList();
/** Automatically added to last <ol> or <ul> */
p.listItem().text(`Ordered List Item One`);
p.listItem().text(`Ordered List Item Two`);
p.listItem().text(`Ordered List Item Three`);
/** Automatically added to last <div> else <body> */
p.lineBreak();
/** Automatially added to last <fieldset>, <form>, or <div> else <body> */
p.select().name(`mySelect`);
/** Automatically added to last <select> */
p.optionGroup().label(`Primary Options`);
/** Automatically added to last <optgroup>, <select>, or <dl> */
p.option().value(1).text(`Primary Option 1`);
p.option().value(2).text(`Primary Option 2`);
p.option().value(3).text(`Primary Option 3`);
/** Automatically added to last <select> */
p.optionGroup().label(`Secondary Options`);
/** Automatically added to last <optgroup>, <select>, or <dl> */
p.option().value(1).text(`Secondary Option 1`);
p.option().value(2).text(`Secondary Option 2`);
p.option().value(3).text(`Secondary Option 3`);
/** Automatically added to last <div> else <body> */
p.lineBreak();
/** Automatically added to last <div> else <body> */
p.paragraph().addClass(`myClass`).text(`This is my example paragraph in bold Arial font.`);
/** Automatically added to last <div> else <body> */
p.lineBreak();
/** Automatically added to last <div> else <body> */
p.picture();
/** Explicitly add to last <picture> */
p.image(`picture`).width(100).height(100).src(`/images/example.png`);
/** Automatically added to last <div> else <body> */
p.lineBreak();
/** Automatically added to last <div> else <body> */
p.table();
/** Automatically added to last <table> */
p.tableHead();
/** Automatically added to last <thead>, <tbody>, or <tfoot> */
p.tableRow();
/** Automatically added to last <tr> */
p.tableHeader().text(`Header 1`);
p.tableHeader().text(`Header 2`);
p.tableHeader().text(`Header 3`);
/** Automatically added to last <table> */
p.tableBody();
/** Automatically added to last <thead>, <tbody>, or <tfoot> */
p.tableRow();
/** Automatically added to last <tr> */
p.tableData().text(`Row 1 Col 1 Data`);
p.tableData().text(`Row 1 Col 2 Data`);
p.tableData().text(`Row 1 Col 3 Data`);
/** Automatically added to last <thead>, <tbody>, or <tfoot> */
p.tableRow();
/** Automatically added to last <tr> */
p.tableData().text(`Row 2 Col 1 Data`);
p.tableData().text(`Row 2 Col 2 Data`);
p.tableData().text(`Row 2 Col 3 Data`);
/** Automatically added to last <table> */
p.tableFooter();
/** Automatically added to last <thead>, <tbody>, or <tfoot> */
p.tableRow();
/** Automatically added to last <tr> */
p.tableData().text(`Footer 1`);
p.tableData().text(`Footer 2`);
p.tableData().text(`Footer 3`);
/** Render HTML and send as response */
res.send(p.render());
});
app.listen(8080, () => {
console.log(`Web server up and running on port 8080!`);
});
Expected Output
<html>
<head>
<title>
My Example Page
</title>
<style>
p.myClass { font-weight: bold; font-family: Arial, helvetica, sans-serif; }
</style>
<script src='https://code.jquery.com/jquery-3.3.1.js'>
</script>
</head>
<body>
<div style='width: 100%; text-align: center;'>
<h2 style='color: blue;'>
My Example Page
</h2>
</div>
<div style='position: relative; width: 50%; left: 25%; text-align: center;'>
<ol>
<li>
Ordered List Item One
</li>
<li>
Ordered List Item Two
</li>
<li>
Ordered List Item Three
</li>
</ol>
<br>
<select name='mySelect'>
<optgroup label='Primary Options'>
<option value='1'>
Primary Option 1
</option>
<option value='2'>
Primary Option 2
</option>
<option value='3'>
Primary Option 3
</option>
</optgroup>
<optgroup label='Secondary Options'>
<option value='1'>
Secondary Option 1
</option>
<option value='2'>
Secondary Option 2
</option>
<option value='3'>
Secondary Option 3
</option>
</optgroup>
</select>
<br>
<p class='myClass'>
This is my example paragraph in bold Arial font.
</p>
<br>
<picture>
<img height=100 src='/images/example.png' width=100>
</picture>
<br>
<table>
<thead>
<tr>
<th scope='col'>
Header 1
</th>
<th scope='col'>
Header 2
</th>
<th scope='col'>
Header 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Row 1 Col 1 Data
</td>
<td>
Row 1 Col 2 Data
</td>
<td>
Row 1 Col 3 Data
</td>
</tr>
<tr>
<td>
Row 2 Col 1 Data
</td>
<td>
Row 2 Col 2 Data
</td>
<td>
Row 2 Col 3 Data
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
Footer 1
</td>
<td>
Footer 2
</td>
<td>
Footer 3
</td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Expanded Example - Method 2
const express = require(`express`);
const ezhtml = require(`ezhtml`);
const app = express();
app.get(`/`, (req, res, next) => {
const html = new ezhtml.HTML();
const head = new ezhtml.Head();
html.append(head);
head.append(new ezhtml.Title().text(`My Example Page`));
head.append(new ezhtml.Style().text(`p.myClass { font-weight: bold; font-family: Arial, helvetica, sans-serif; }`));
head.append(new ezhtml.Script().src(`https://code.jquery.com/jquery-3.3.1.js`));
const body = new ezhtml.Body();
html.append(body);
const div1 = new ezhtml.Div().style(`width: 100%; text-align: center;`);
body.append(div1);
const h2 = new ezhtml.H2({
style: `color: blue;`
});
div1.append(h2.text(`My Example Page`));
const div2 = new ezhtml.Div().style(`position: relative; width: 50%; left: 25%; text-align: center;`);
body.append(div2);
const orderedList = new ezhtml.OrderedList();
div2.append(orderedList);
orderedList.append(new ezhtml.ListItem().text(`Ordered List Item One`));
orderedList.append(new ezhtml.ListItem().text(`Ordered List Item Two`));
orderedList.append(new ezhtml.ListItem().text(`Ordered List Item Three`));
div2.append(new ezhtml.LineBreak());
const select = new ezhtml.Select().name(`mySelect`);
div2.append(select);
const optionGroup1 = new ezhtml.OptionGroup().label(`Primary Options`);
select.append(optionGroup1);
optionGroup1.append(new ezhtml.Option().value(1).text(`Primary Option 1`));
optionGroup1.append(new ezhtml.Option().value(2).text(`Primary Option 2`));
optionGroup1.append(new ezhtml.Option().value(3).text(`Primary Option 3`));
const optionGroup2 = new ezhtml.OptionGroup().label(`Secondary Options`);
select.append(optionGroup2);
optionGroup2.append(new ezhtml.Option().value(1).text(`Secondary Option 1`));
optionGroup2.append(new ezhtml.Option().value(2).text(`Secondary Option 2`));
optionGroup2.append(new ezhtml.Option().value(3).text(`Secondary Option 3`));
div2.append(new ezhtml.LineBreak());
div2.append(new ezhtml.Paragraph().addClass(`myClass`).text(`This is my example paragraph in bold Arial font.`));
div2.append(new ezhtml.LineBreak());
const picture = new ezhtml.Picture();
div2.append(picture);
picture.append(new ezhtml.Image().width(100).height(100).src(`/images/example.png`));
div2.append(new ezhtml.LineBreak());
const table = new ezhtml.Table();
div2.append(table);
const tableHead = new ezhtml.TableHead();
table.append(tableHead);
const tableHeadRow = new ezhtml.TableRow();
tableHead.append(tableHeadRow);
tableHeadRow.append(new ezhtml.TableHeader().text(`Header 1`));
tableHeadRow.append(new ezhtml.TableHeader().text(`Header 2`));
tableHeadRow.append(new ezhtml.TableHeader().text(`Header 3`));
const tableBody = new ezhtml.TableBody();
table.append(tableBody);
const tableBodyRow1 = new ezhtml.TableRow();
tableBody.append(tableBodyRow1);
tableBodyRow1.append(new ezhtml.TableData().text(`Row 1 Col 1 Data`));
tableBodyRow1.append(new ezhtml.TableData().text(`Row 1 Col 2 Data`));
tableBodyRow1.append(new ezhtml.TableData().text(`Row 1 Col 3 Data`));
const tableBodyRow2 = new ezhtml.TableRow();
tableBody.append(tableBodyRow2);
tableBodyRow2.append(new ezhtml.TableData().text(`Row 2 Col 1 Data`));
tableBodyRow2.append(new ezhtml.TableData().text(`Row 2 Col 2 Data`));
tableBodyRow2.append(new ezhtml.TableData().text(`Row 2 Col 3 Data`));
const tableFooter = new ezhtml.TableFooter();
table.append(tableFooter);
const tableFooterRow = new ezhtml.TableRow();
tableFooter.append(tableFooterRow);
tableFooterRow.append(new ezhtml.TableData().text(`Footer 1`));
tableFooterRow.append(new ezhtml.TableData().text(`Footer 2`));
tableFooterRow.append(new ezhtml.TableData().text(`Footer 3`));
res.send(html.render());
});
app.listen(8080, () => {
console.log(`Web server up and running on port 8080!`);
});
Expected Output
Same as Method 1, see above.
Usage
Each HTML 5 element is represented by an ES6 class and is accessible as a property of this
module. Each class has getter/setter methods corresponding to the various attributes
defined for the element in the HTML 5 standard. In addition, custom attributes can be
set and retrieved using the attr(name)
getter and attr(name, value)
setter. Elements
that are 'containers', i.e. they have an open and close tag, also have append() and prepend()
methods you can use to add other child elements. Every element has addClass() and
removeClass() methods which make the controlling of CSS and DOM selection easy. A full list
of elements and their HTML 5 properties is shown below:
The Page Class
The page class contains helper methods to instanciate and automatically or explicitly nest a new EZ HTML element under your page container. See the Method 1 examples above and page.js for more detail about the method names and automatic nesting of each element. More complete documentation will be added soon.
Method Signatures Common to All Elements
Element.addClass(list)
- Parameter: list -
string
- Description: Add the class, or space delimeted list of classes, in
list
to the element.
Element.attr(name)
- Parameter: name -
string
- Description: Get the value of the attribute named
name
.
Element.attr(name, value)
- Parameter: name -
string
- Parameter: value -
string
|number
- Description: Set the the attribute named
name
tovalue
.
Element.id()
- Description: Get the value of the element's id attribute.
Element.id(value)
- Parameter: value -
string
|number
- Description: Set the the element's id attribute to
value
.
Element.name()
- Description: Get the value of the element's name attribute.
Element.name(value)
- Parameter: value -
string
|number
- Description: Set the the element's name attribute to
value
.
Element.removeClass(class)
- Description: class -
string
- Description: Remove any class named
class
from the element.
Element.parent()
- Description: Get the parent element of this element (or
null
if none exists).
Element.render([indent])
- Parameter: indent -
number
- (optional) Defaults to zero - Description: Get the rendered HTML of this element and all of its children, prepending
all lines with optional
indent
number of spaces.
Element.tag()
- Description: Get the HTML tag of this element.
Method Signatures Common to All Container Elements
This includes all elements that have closing tags, e.g. </element>
.
ContainerElement.append(element)
- Parameter: element -
mixed
Any valid EZ HTML element - Description: Append
element
to the end of this element's array of children.
ContainerElement.prepend(element)
- Parameter: element -
mixed
Any valid EZ HTML element - Description: Prepend
element
to the beginning of this element's array of children.
ContainerElement.text(content)
- Parameter: content -
string
- Description: A shortcut method for appending plain text
content
to the end of this element's children array. This is a shortcut for append(new ezhtml.Text().text(content)).
Elements
Below are the element classes included in the library along with each of their attributes that will each have a getter of the form property(), and a setter of the form property(value).
new ezhtml.Abbreviation()
- None
new ezhtml.Address()
- None
new ezhtml.Anchor()
- download -
string
- href -
string
- hreflang -
string
- media -
string
- rel -
string
- target -
string
- type -
string
new ezhtml.Area()
- alt -
string
- coords -
string
- download -
string
- href -
string
- hreflang -
string
- media -
string
- shape -
string
- target -
string
- type -
string
new ezhtml.Article()
- None
new ezhtml.Aside()
- None
new ezhtml.Audio()
- autoplay -
boolean
- controls -
boolean
- loop -
boolean
- muted -
boolean
- preload -
string
- src
string
new ezhtml.Base()
- href -
string
- target -
string
new ezhtml.BidirectionalIsolation()
- None
new ezhtml.BidirectionalOverride()
- dir -
string
- Can beltr
orrtl
new ezhtml.Blockquote()
- None
new ezhtml.Body()
- None
new ezhtml.Bold()
- None
new ezhtml.Button()
- autofocus -
boolean
- disabled -
boolean
- form -
string
- formaction -
string
- formenctype -
string
- formmethod -
string
- formnovalidate -
boolean
- formtarget -
string
- name -
string
- type -
string
- value -
string
new ezhtml.Canvas()
- height -
number
- width -
number
new ezhtml.Caption()
- None
new ezhtml.Citation()
- None
new ezhtml.Code()
- None
new ezhtml.ColumnGroup()
- span -
number
new ezhtml.Column()
- span -
number
new ezhtml.DataList()
- value -
string
new ezhtml.DataList()
- None
new ezhtml.DefinitionDescription()
- None
new ezhtml.DefinitionList()
- None
new ezhtml.DefinitionTerm()
- None
new ezhtml.Definition()
- None
new ezhtml.Deleted()
- cite -
string
- datetime -
string
new ezhtml.Details()
- open -
boolean
new ezhtml.Dialog()
- open -
boolean
new ezhtml.Div()
- None
new ezhtml.Embed()
- height -
number
- src -
string
- type -
string
- width -
number
new ezhtml.Emphasized()
- None
new ezhtml.FieldSet()
- disabled -
boolean
- form -
string
- name -
string
new ezhtml.FigureCaption()
- None
new ezhtml.Figure()
- None
new ezhtml.Footer()
- None
new ezhtml.Form()
- acceptCharset -
string
- action -
string
- autocomplete -
string
- enctype -
string
- method -
string
- name -
string
- novalidate -
boolean
- target -
string
new ezhtml.Head()
- None
new ezhtml.Header()
- None
new ezhtml.HeadingGroup()
- None
new ezhtml.H1()
- None
new ezhtml.H2()
- None
new ezhtml.H3()
- None
new ezhtml.H4()
- None
new ezhtml.H5()
- None
new ezhtml.H6()
- None
new ezhtml.HorizontalRule()
- None
new ezhtml.HTML()
- None
new ezhtml.Image()
- alt -
string
- crossorigin -
string
- height -
number
- ismap -
boolean
- longdesc -
string
- sizes -
string
- src -
string
- srcset -
string
- usemap -
string
- width -
number
new ezhtml.Input()
- accept -
string
- alt -
string
- autocomplete -
string
- autofocus -
boolean
- checked -
boolean
- dirname -
string
- disabled -
boolean
- form -
string
- formaction -
string
- formenctype -
string
- formmethod -
string
- formnovalidate -
boolean
- formtarget -
string
- height -
string
- list -
string
- max -
string
- maxlength -
string
- min -
string
- multiple -
boolean
- name -
string
- pattern -
string
- placeholder -
string
- readonly -
boolean
- required -
boolean
- size -
number
- src -
string
- step -
string
- type -
string
- Defaults totext
- value -
string
- width -
string
new ezhtml.Inserted()
- cite -
string
- datetime -
string
new ezhtml.Italic()
- None
new ezhtml.Keyboard()
- None
new ezhtml.Label()
- for -
string
- form -
string
new ezhtml.Legend()
- None
new ezhtml.LineBreak()
- None
new ezhtml.Link()
- crossorigin -
string
- href -
string
- hreflang -
string
- media -
string
- rel -
string
- sizes -
string
- type -
string
new ezhtml.ListItem()
- value -
number
new ezhtml.Main()
- None
new ezhtml.MapElement()
- name -
string
new ezhtml.Mark()
- None
new ezhtml.MenuItem()
- checked -
boolean
- command -
string
- default -
boolean
- disabled -
boolean
- icon -
string
- label -
string
- radiogroup -
string
- type -
string
new ezhtml.Menu()
- label -
string
- type -
string
new ezhtml.Meta()
- charset -
string
- content -
string
- http-equiv -
string
- name -
string
new ezhtml.Meter()
- form -
string
- high -
number
- low -
number
- max -
number
- min -
number
- optimum -
number
- value -
number
new ezhtml.MultimediaObject()
- data -
string
- form -
string
- height -
number
- name -
string
- type -
string
- usemap -
boolean
- width -
number
new ezhtml.Nav()
- None
new ezhtml.NoScript()
- None
new ezhtml.OptionGroup()
- disabled -
boolean
- label -
string
new ezhtml.Option()
- disabled -
boolean
- label -
string
- selected -
boolean
- value -
string
new ezhtml.OrderedList()
- start -
number
- reversed -
boolean
- type -
string
new ezhtml.Output()
- for -
string
- form -
string
- name -
string
new ezhtml.Paragraph()
- None
new ezhtml.Param()
- name -
string
- value -
string
new ezhtml.Picture()
- None
new ezhtml.PreformattedText()
- None
new ezhtml.Progress()
- max -
number
- value -
number
new ezhtml.Quotation()
- cite -
string
new ezhtml.Sample()
- None
new ezhtml.Script()
- async -
boolean
- charset -
string
- defer -
boolean
- src -
string
- type -
string
new ezhtml.Section()
- None
new ezhtml.Select()
- autofocus -
boolean
- disabled -
boolean
- form -
string
- multiple -
boolean
- name -
string
- required -
boolean
- size -
string
new ezhtml.Small()
- None
new ezhtml.Source()
- media -
string
- sizes -
string
- src -
string
- srcset -
string
- type -
string
new ezhtml.Span()
- None
new ezhtml.Strikethrough()
- None
new ezhtml.Strong()
- None
new ezhtml.Style()
- media -
string
- scoped -
boolean
- type -
string
new ezhtml.Subscript()
- None
new ezhtml.Summary()
- None
new ezhtml.Superscript()
- None
new ezhtml.SVG()
- height -
number
- width -
number
new ezhtml.TableBody()
- None
new ezhtml.TableData()
- colspan -
number
- headers -
string
- rowspan -
number
new ezhtml.TableFooter()
- None
new ezhtml.TableHead()
- None
new ezhtml.TableHeader()
- abbr -
string
- colspan -
number
- headers -
string
- rowspan -
number
- scope -
string
- sorted -
string
new ezhtml.TableRow()
- None
new ezhtml.Table()
- None
new ezhtml.Template()
- None
new ezhtml.TextArea()
- autofocus -
boolean
- cols -
number
- dirname -
string
- disabled -
boolean
- form -
string
- maxlength -
number
- name -
string
- placeholder -
string
- readonly -
boolean
- required -
boolean
- rows -
number
- wrap -
string
new ezhtml.Text()
- text -
string
new ezhtml.Time()
- datetime -
string
new ezhtml.Title()
- None
new ezhtml.Track()
- default -
boolean
- kind -
string
- sizes -
string
- src -
string
- srclang -
string
new ezhtml.Underline()
- None
new ezhtml.UnorderedList()
- None
new ezhtml.Variable()
- None
new ezhtml.Video()
- autoplay -
boolean
- controls -
boolean
- height -
number
- loop -
boolean
- muted -
boolean
- poster -
string
- preload -
string
- src -
string
- width -
number
new ezhtml.WordBreakOpportunity()
- None
Contributing
Please open an issue on the GitHub repository if you find any broken functionality or other bugs/errors. Feature requests will also be accepted, but are not guaranteed to be implemented.
License
MIT