https://github.com/cstrlcs/tinyplate
A dead simple templating (<38 LOC) engine written in pure typescript.
https://github.com/cstrlcs/tinyplate
javascript templating-engine templating-language
Last synced: 2 months ago
JSON representation
A dead simple templating (<38 LOC) engine written in pure typescript.
- Host: GitHub
- URL: https://github.com/cstrlcs/tinyplate
- Owner: cstrlcs
- License: mit
- Created: 2024-03-14T23:27:29.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2025-03-14T13:05:08.000Z (about 1 year ago)
- Last Synced: 2025-12-10T23:33:54.290Z (5 months ago)
- Topics: javascript, templating-engine, templating-language
- Language: TypeScript
- Homepage:
- Size: 26.4 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# tinyplate
Tinyplate is a dead simple templating engine written in pure typescript. It is designed to be super fast, minimal, with zero dependencies and easy to use.
It's tiny with only 37 lines of code and a size of 583 bytes when bundled.
## Features
- Has 0 dependencies
- Extremely fast
- Supports HTML encoding
- Requires no options or configurations for use
- Works in Node, Bun, Deno, browser, and even your toaster (probably)
The bundle even fits here:
```javascript
var g=/`|\\/g,a=/\\(`|\\)/g,p=/[\r\t\n]/g,E=/<%=([\s\S]+?)%>/g,i=/<%!([\s\S]+?)%>/g,l=/<%([\s\S]+?(\}?)+)%>/g,_=/\n`;/g;function u(c,o){let t=(n)=>n.replace(a,"$1").replace(p," "),r=`const encode = ${((n)=>{let e={"&":"&","<":"<",">":">",'"':""","'":"'","/":"/"};return n.replace(/&(?!#?\w+;)|<|>|"|'|\//g,(s)=>e[s])}).toString()};let _=\`${c.replace(g,"\\$&").replace(E,(n,e)=>`\`+(${t(e)})+\``).replace(i,(n,e)=>`\`+encode(${t(e)})+\``).replace(l,(n,e)=>`\`;${t(e)};_+=\``).replace(_,"`;")}\`;return _;`;return new Function("it",r)(o)}export{u as default};
```
## Important Considerations ⚠️
- Tinyplate is extremely minimal; it does not have any options or configurations.
- It allows arbitrary code execution in templates, which can be extremely powerful but also be dangerous. Do not use user input as part of the template.
- Although it supports HTML encoding through `<%! .. %>` tags, the library is new and has not been fully tested against code injection. Use caution with untrusted input.
- If you need more features out of the box, consider trying [doT](https://github.com/olado/doT) or [eta](https://eta.js.org/). Both are excellent tools that have inspired this library.
## Usage
- Install with `npm i tinyplate.js`
- `<% .. %>` - for code blocks
- `<%= .. %>` - for interpolations
- `<%! .. %>` - for interpolations with HTML encoding
## Examples
You can check some examples here and in the `examples` folder. Even this README is generated using tinyplate.
### Basic example
```javascript
import tinyplate from "tinyplate.js";
tinyplate("
```
### Using a file
```javascript
import fs from "node:fs";
import tinyplate from "tinyplate.js";
const template = fs.readFileSync("template.txt", "utf8");
tinyplate(template, { name: "tinyplate" });
```
### Layout and partials
```javascript
import tinyplate from "tinyplate.js";
const LAYOUT_TEMPLATE = `
<%! it.title %>
<%= it.body %>
`;
const BODY_TEMPLATE = `
<%! it.content %>
`;
const context = { title: "tinyplate", content: "Hello, world!" };
tinyplate(LAYOUT_TEMPLATE, {
...context,
body: tinyplate(BODY_TEMPLATE, context),
});
```
### Logic
```javascript
import tinyplate from "tinyplate.js";
const TEMPLATE = `
- <%= i %>
<% for (let i = 0; i < it.amount; i++) { %>
<% } %>
<% if (it.name) { %>
Hello, <%= it.name %>!
<% } else { %>
Hello, world!
<% } %>
tinyplate(TEMPLATE, { name: "tinyplate", amount: 5 });
```
## Credits
Tinyplate is heavily inspired by [doT](https://github.com/olado/doT) and [eta](https://eta.js.org/).
Huge thanks to the creators of `doT` from where I borrowed the regexes and some of the logic. Also, a big shoutout to the creators of `eta` for inspiring the templating syntax.