https://github.com/zizwar/jhtm

JavaScript HTML Template Manager for browser and Node.js
https://github.com/zizwar/jhtm

browser html javascript json jsx nodejs template template-manager vanilla-javascript

Last synced: 5 days ago
JSON representation

JavaScript HTML Template Manager for browser and Node.js

• Host: GitHub
• URL: https://github.com/zizwar/jhtm
• Owner: Zizwar
• License: mit
• Created: 2024-07-17T16:23:17.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-17T17:18:42.000Z (4 months ago)
• Last Synced: 2024-10-31T14:30:36.561Z (16 days ago)
• Topics: browser, html, javascript, json, jsx, nodejs, template, template-manager, vanilla-javascript
• Language: JavaScript
• Homepage: https://github.com/Zizwar/jhtm/
• Size: 9.77 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# JHTM (JavaScript HTML Template Manager)

JHTM is a lightweight yet powerful library for managing HTML templates using JavaScript. It can be used in both browser and Node.js environments.

## Features

- Support for browser and Node.js usage

- Load templates from URL or local file

- Support for multiple data sources (JSON URL, JavaScript object)

- Template caching for improved performance

- Support for dynamic code execution within templates

- Proper handling of script tags, CSS files, and other external resources

## Installation

```bash

npm install jhtm

```

## Usage

### In Browser

```html

  const jhtm = new JHTM('/template.html', '/data.json'/*or "https://exemple.com/feed.json"*/, { cacheTemplate: true });

  jhtm.render().then(result => {

    document.body.innerHTML = result;

  });

```

### In Node.js

```javascript

const JHTM = require('jhtm');

const jhtm = new JHTM('/template.html', { name: 'John', age: 30 });

jhtm.render().then(result => {

  console.log(result);

});

```

## Options

You can pass a configuration object as the third argument to the constructor:

```javascript

const config = {

  cacheTemplate: true, // Enable template caching

  cacheTTL: 3600000, // Cache time-to-live in milliseconds (default 1 hour)

  executeScripts: true, // Execute inline scripts and load external scripts

  loadCSS: true // Load external CSS files

};

const jhtm = new JHTM('/template.html', '/data.json', config);

```

## Template Example

```html

{{name}}

Age: {{age}}



  ${data.hobbies.map(hobby => `${hobby}`).join(', ')}



console.log('Hello from template!');


```

## License

MIT