A Node.js Template Engine inspired by EJS, Angular and Laravel Blade.
npm install vyuha
yarn add vyuha
pnpm add vyuha
- Control Flow with
@ @end
- Interpolation with
{{ }}
- Javascript expressions with
{{ }}
- Pipes with
{{ <expression> | <pipe> }}
- Compiles With Express view system
- Use without Express in Native Node.js
- Typescript Support
- Custom
.vyuha
file extension
- Extend Layouts with
@extends
- Create Blocks with
@block
- @if, @else and end with @endif
- @if
{{ <expression> }}
or @if( <expression> )
and end with @endif - @switch, @case, @default and end with @endswitch
- Start with
@<controlName>
and end with@end<controlName>
- More to come, stay tuned!
uppercase
lowercase
capitalize
reverse
const Vyuha = require('vyuha');
const template = `
<h1>{{ title | uppercase }}</h1>
<p>{{ description }}</p>
`;
const data = {
title: 'Hello, World!',
description: 'This is a simple example of Vyuha.',
};
const template = new Vyuha(template);
const compiled = template.render(data);
console.log(compiled);
import { Vyuha } from 'vyuha';
const template = `
<h1>{{ title | uppercase }}</h1>
<p>{{ description }}</p>
`;
const data = {
title: 'Hello, World!',
description: 'This is a simple example of Vyuha.',
};
const template = new Vyuha(template);
const compiled = template.render(data);
console.log(compiled);
import express from 'express';
import VyuhaEngine from 'vyuha';
const app = express();
const __dirname = path.resolve(path.dirname(''));
// set view engine
app.set('view engine', 'vyuha');
app.set('views', path.join(__dirname, 'views'));
app.engine('vyuha', VyuhaEngine.render);
// routes
app.get('/', (req, res) => {
return res.render('index', {
title: 'Hello World',
name: 'Vyuha',
});
});
app.get('/welcome', (req, res) => {
return res.render('extended', {
title: 'Welcome to Vyuha',
name: 'Vyuha',
});
});
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
});
<!-- index.vyuha -->
@extends "layout"
@block title
<h1>{{ title }}</h1>
@endblock
@block content
<p>{{ description }}</p>
@endblock
<!-- layout.vyuha -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
</ul>
</nav>
@block content
@endblock
</body>
<!-- index.vyuha -->
<!DOCTYPE html>
<html>
<head>
<title>
{{ title }}
</title>
</head>
<body>
<h1>Hello, {{ name }}</h1>
@if (test) then
<h2>Test is test true</h2>
@endif
@if {{false}} then
<h2>Test is true 1</h2>
@else
<h2>Test is false</h2>
@endif
@if {{name}} then
<h2>Test is true</h2>
@else
<h2>Test is false</h2>
@endif
@switch {{name}} then
@case "Raman Sharma"
<h2>Test is true 1</h2>
@default
<h2>Test is false</h2>
@endswitch
@switch (test) then
@case "Raman Sharma"
<h2>Test is true 2</h2>
@case false
<h2>Test is true 3</h2>
@default
<h2>Test is false</h2>
@endswitch
</body>
</html>
<!-- index.vyuha -->
@extends "layout"
@block title
<h1>{{ title }}</h1>
@endblock
@block content
<h1>{{ title | uppercase }}</h1>
<!-- HELLO, WORLD! -->
<p>{{ description | lowercase }}</p>
<!-- this is a simple example of vyuha. -->
@endblock
- This is a work in progress, expect breaking changes.
- Please report any issues you find.
- CDN Support coming soon!
- Standalone Vyuha.js file coming soon!
import { Vyuha } from 'vyuha';
const template = `
<h1>{{ title | uppercase }}</h1>
<p>{{ description }}</p>
`;
const data = {
title: 'Hello, World!',
description: 'This is a simple example of Vyuha.',
};
const template = new Vyuha(template);
const compiled = template.render(data);
console.log(compiled);
<h1>HELLO, WORLD!</h1>
<p>This is a simple example of Vyuha.</p>
CLI Support coming soon!
Syntax Highlighting for VSCode coming soon!
MIT
Contributions are welcome! Feel free to open an issue or a pull request.
If you like this project, consider supporting it by starring the repository.
- This is a personal project and is not affiliated with any organization.
- This project is not affiliated with EJS or Angular in any way.
- 0.1.0 - Initial Release (Beta)
- 0.1.1 - Typo Fixes in Readme (commonjs)
- 0.2.0 - Add All Basic Control Flow
- 0.3.0 - Add All Basic Pipes
- 0.4.0 - Add Cache Support
- 0.5.0 - Add CLI Support
- 0.6.0 - Add Syntax Highlighting for VSCode
- 0.7.0 - Add CDN Support
- 0.8.0 - Add Standalone Vyuha.js file
- 1.0.0 - Stable Release