Xylo.js is a static site generator using pure HTML template like Vue.js and Thymeleaf.
npm install xyloXylo.js is a static site generator using pure HTML template like Vue.js and Thymeleaf.
Install from npm:
npm install xylo
Node.js 12 or higher is required.
`` Hello Worldjs
const { generate } = require('xylo');
const template = '
const data = {message: 'Hello Xylo!'};
const html = generate(template, data);
console.log(html); //
Hello Xylo!
`Supported directives
$3
Template:
`html
Hello World
`Data:
`json
{
"message": "Hello Xylo!"
}
`HTML:
`html
Hello Xylo!
`$3
Template:
`html
- Todo 1
`Data:
`json
{
"todos": [
{
"title": "Todo1"
},
{
"title": "Todo2"
},
{
"title": "Todo3"
},
]
}
`HTML:
`html
- Todo 1
- Todo 2
- Todo 3
`$3
Template:
`html
✅Todo 0
✅Todo 0
`Data:
`json
{
"todo1": {
"done": true,
"title": "Todo 1"
},
"todo2": {
"done": false,
"title": "Todo 2"
}
}
`HTML:
`html
✅Todo 1
Todo 2
`$3
Template:
`html

`Data:
`json
{
"message": "Hello Xylo!"
}
`HTML:
`html

`$3
Template:
`html
This is a description.
`Data:
`json
{
"description": "Xylo.js is a static site generator using pure HTML template like Vue.js and Thymeleaf.",
}
`HTML:
`html
Xylo.js is a static site generator using pure HTML template like Vue.js and Thymeleaf.
`Advanced usage
$3
You can use a customized Jexl.
`js
const { generate } = require('xylo');
const template = '
';
const data = {items: 'A B C'};
const jexl = new jexl.Jexl();
jexl.addTransform('split', (val, sep) => val.split(sep));
const html = generate(template, data, jaxl);
console.log(html); //
``* parse5 - HTML parsing/serialization toolset for Node.js. WHATWG HTML Living Standard (aka HTML5)-compliant.
* Jexl - Javascript Expression Language: Powerful context-based expression parser and evaluator.