https://github.com/marcuwynu23/js-templater-nodejs
NodeJS Library/Tool to use pure DOM javascript render with view Engine
https://github.com/marcuwynu23/js-templater-nodejs
dom html html5 javascript nodejs pure-javascript reactjs-alternative template-engine view-engine
Last synced: about 1 month ago
JSON representation
NodeJS Library/Tool to use pure DOM javascript render with view Engine
- Host: GitHub
- URL: https://github.com/marcuwynu23/js-templater-nodejs
- Owner: marcuwynu23
- Created: 2021-12-14T03:18:49.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-12-15T03:07:17.000Z (6 months ago)
- Last Synced: 2025-12-17T20:49:01.620Z (6 months ago)
- Topics: dom, html, html5, javascript, nodejs, pure-javascript, reactjs-alternative, template-engine, view-engine
- Language: JavaScript
- Homepage:
- Size: 93.8 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JS-templater
A Node.js library/tool to use pure DOM JavaScript rendering with a view engine. JS-templater allows you to build modern web applications by rendering JavaScript templates on the server side while maintaining a clean separation between your Node.js backend and JavaScript frontend.
## Features
- 🚀 **Simple Integration**: Easy to integrate with Express.js and other Node.js web frameworks
- 🎨 **Pure JavaScript**: Use vanilla JavaScript for rendering, no framework dependencies
- 📦 **Template Engine**: Server-side template generation with context data passing
- 🔧 **Flexible**: Pass JSON context data to your JavaScript templates
- 📝 **Clean HTML**: Generates clean, semantic HTML structure
## Installation
```bash
npm install js-templater
```
Or install from source:
```bash
git clone https://github.com/marcuwynu23/JSTemplater-NodeJS.git
cd JSTemplater-NodeJS
npm install
```
## Quick Start
### 1. Basic Express.js Setup
```javascript
const express = require('express');
const JSTemplate = require('js-templater');
const app = express();
// Initialize JSTemplate with your static files root
const jsTemplate = new JSTemplate('/static/');
// Serve static files
app.use('/static', express.static('public'));
app.get('/', (req, res) => {
// Render a JavaScript template
const html = jsTemplate.render('index', {
title: 'Welcome',
user: 'John'
});
res.send(html);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
```
### 2. Project Structure
Your Node.js application should have the following structure:
```
your-app/
├── server.js
└── public/
├── css/
│ └── style.css
└── js/
└── index.js
```
### 3. JavaScript Template Example
Create `public/js/index.js`:
```javascript
// Get the root element
const root = document.getElementById("root");
// Parse context data if provided
let context = {};
if (root.dataset.content) {
context = JSON.parse(root.dataset.content);
}
// Render your application
root.innerHTML = `
${context.title || "Hello World"}
Welcome, ${context.user || "Guest"}!
`;
```
## API Reference
### `JSTemplate(staticRoot)`
Initialize the JSTemplate engine.
**Parameters:**
- `staticRoot` (string): The root path for static files (e.g., '/static/')
**Example:**
```javascript
const jsTemplate = new JSTemplate('/static/');
```
### `render(scriptName, context)`
Render a JavaScript template.
**Parameters:**
- `scriptName` (string): Name of the JavaScript file (without .js extension)
- `context` (object, optional): Context data to pass to the template as JSON
**Returns:**
- `string`: Complete HTML document with embedded script
**Example:**
```javascript
const html = jsTemplate.render('dashboard', {
users: ['Alice', 'Bob']
});
```
## Examples
See the [examples](./examples/) directory for more detailed usage examples.
## Testing
Run tests using Jest:
```bash
npm test
```
Or run tests in watch mode:
```bash
npm run test:watch
```
## Requirements
- Node.js >= 10.0.0
- Express.js (for web framework integration) or any Node.js HTTP server
## License
See [LICENSE](LICENSE) file for details.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## Author
Mark Wayne B. Menorca