froggier

A simple and clean HTML template engine.

Usage no npm install needed!

<script type="module">
  import froggier from 'https://cdn.skypack.dev/froggier';
</script>

README

Usage

.render() :

HTML code

<h1>{(:head:)}</h1>

Node.js code

const froggier=require('froggier');

froggier.render("index.html",{"head":"Hello World!"})
.then(res=>{
  console.log(res);
});

Result

<h1>Hello World!</h1>

.render() replaces variables in the HTML file with some values asynchronously.

Parameters

  1. filename — A path to the HTML file.
  2. data — A JSON object with keys as the variables and values as the text to be replaced.

.renderSync():

.renderSync() does the same as .render() but is synchronous.

Customization (New in 1.1.0)

As you've seen before, the variables in the file should start with '{(:' and end with ':)}'. What if you can change that setting?

.startingKeyword & .endingKeyword:

Node.js code

const froggier=require('froggier');

//Set starting and ending keywords
froggier.startingKeyword="?";
froggier.endingKeyword="!";

var res=froggier.renderSync("index.html",{"head":"Hello World!"});
console.log(res)

HTML code

<!--Here we put '?' & '!' instead of the default '{(:' & ':)}'-->
<h1>?head!</h1>

Result

<h1>Hello World!</h1>

.startingKeyword & .endingKeyword are the characters that are used at the start and the end of a variable. They are needed for identifying variables.