EJS

https://ejs.co
Admin
EJS is a simple templating language that lets you generate HTML markup with plain JavaScript,...
Tokens:2,223
Snippets:37
Trust Score:9.8
Update:3 months ago
Show doc for...
Tokens:
Raw
### EJS CLI Usage

Source: https://ejs.co/

Examples of running EJS templates from the command line with various options.

```bash
$ ejs -p [ -c ] ./template_file.ejs -o ./output.html
$ ejs ./test/fixtures/user.ejs name=Lerxst
$ ejs -n -l _ ./some_template.ejs -f ./data_file.json
```

--------------------------------

### Including Templates

Source: https://ejs.co/

Example of using the include tag to render sub-templates within a loop.

```ejs
<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>
```

--------------------------------

### Install EJS via NPM

Source: https://ejs.co/

Use the npm package manager to install EJS in your project.

```bash
$ npm install ejs
```

--------------------------------

### Implement layouts using includes

Source: https://ejs.co/

Use include statements to wrap content with header and footer templates.

```html
<%- include('header'); -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer'); -%>
```

--------------------------------

### Handle includes on the client-side

Source: https://ejs.co/

Use an include callback when compiling templates on the client-side since the filesystem is inaccessible.

```javascript
let str = "Hello <%= include('file', {person: 'John'}); %>",
      fn = ejs.compile(str);

fn(data, null, function(path, d){ // include callback
  // path -> 'file'
  // d -> {person: 'John'}
  // Put your code here
  // Return the contents of file as a string
}); // returns rendered string
```

--------------------------------

### Use EJS via CLI

Source: https://ejs.co/

Process template and data files directly from the command line.

```bash
ejs ./template_file.ejs -f data_file.json -o ./output.html
```

--------------------------------

### Basic EJS Template Syntax

Source: https://ejs.co/

Demonstrates conditional rendering using EJS scriptlet tags.

```ejs
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>
```

--------------------------------

### ejs.renderFile(filename, data, options)

Source: https://ejs.co/

Renders a template file asynchronously.

```APIDOC
## ejs.renderFile(filename, data, options)

### Description
Renders a template file asynchronously.

### Parameters
- **filename** (string) - Required - Path to the template file.
- **data** (object) - Optional - Data to pass to the template.
- **options** (object) - Optional - Configuration options for rendering.

### Returns
- **Promise<string>** - A promise that resolves to the rendered HTML string.
```

--------------------------------

### Programmatic EJS Usage

Source: https://ejs.co/

Shows how to compile templates or render them directly using the EJS library.

```javascript
import ejs from 'ejs';

let template = ejs.compile(str, options);
template(data);
// => Rendered HTML string

ejs.render(str, data, options);
// => Rendered HTML string

let html = await ejs.renderFile(filename, data, options);
// => Rendered HTML string
```

--------------------------------

### Use EJS in the browser

Source: https://ejs.co/

Include the EJS script file and use the global ejs object for client-side rendering.

```html
<script src="ejs.js"></script>
<script>
  let people = ['geddy', 'neil', 'alex'];
  let html = ejs.render('<%= people.join(", "); %>', {people: people});
</script>
```

--------------------------------

### Render EJS templates on the client-side

Source: https://ejs.co/

Include the EJS library script and use ejs.render to generate HTML dynamically in the browser.

```html
<div id="output"></div>
<script src="ejs.min.js"></script>
<script>
  let people = ['geddy', 'neil', 'alex'],
      html = ejs.render('<%= people.join(", "); %>', {people: people});
  // With jQuery:
  $('#output').html(html);
  // Vanilla JS:
  document.getElementById('output').innerHTML = html;
</script>
```

--------------------------------

### ejs.render(str, data, options)

Source: https://ejs.co/

Renders a template string directly with the provided data.

```APIDOC
## ejs.render(str, data, options)

### Description
Renders a template string directly with the provided data.

### Parameters
- **str** (string) - Required - The template string to render.
- **data** (object) - Optional - Data to pass to the template.
- **options** (object) - Optional - Configuration options for rendering.

### Returns
- **string** - The rendered HTML string.
```

--------------------------------

### ejs.compile(str, options)

Source: https://ejs.co/

Compiles a template string into a function that can be executed with data.

```APIDOC
## ejs.compile(str, options)

### Description
Compiles a template string into a function that can be executed with data.

### Parameters
- **str** (string) - Required - The template string to compile.
- **options** (object) - Optional - Configuration options for compilation.

### Returns
- **Function** - A function that accepts data and returns the rendered HTML string.
```

--------------------------------

### Customize the EJS file loader

Source: https://ejs.co/

Override the default fs.readFileSync loader by assigning a custom function to ejs.fileLoader.

```javascript
import ejs from 'ejs';
import fs from 'fs';

let myFileLoader = function (filePath) {
  return 'myFileLoader: ' + fs.readFileSync(filePath);
};

ejs.fileLoader = myFileLoader;
```

--------------------------------

### Implement LRU caching for EJS

Source: https://ejs.co/

Plug in the lru-cache library to manage the intermediate function cache with a specific item limit.

```javascript
import ejs from 'ejs';
import LRU from 'lru-cache';

ejs.cache = LRU(100); // LRU cache with 100-item limit
```

--------------------------------

### Configure custom delimiters in EJS

Source: https://ejs.co/

Apply custom delimiters to individual templates or globally by setting the delimiter property.

```javascript
import ejs from 'ejs';

let users = ['geddy', 'neil', 'alex'];

// Just one template
ejs.render('<?= users.join(" | "); ?>', {users: users},
    {delimiter: '?'});
// => 'geddy | neil | alex'

// Or globally
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
// => 'geddy | neil | alex'
```

--------------------------------

### Import EJS in ESM and CJS

Source: https://ejs.co/

EJS supports both ES Modules and CommonJS import patterns.

```javascript
import ejs from 'ejs';
```

```javascript
let ejs = require('ejs');
```

--------------------------------

### Render templates with EJS

Source: https://ejs.co/

Pass a template string and a data object to the render function to generate HTML.

```javascript
import ejs from 'ejs';
let people = ['geddy', 'neil', 'alex'];
let html = ejs.render('<%= people.join(", "); %>', {people: people});
```

--------------------------------

### Insecure EJS Render Usage

Source: https://ejs.co/

This pattern is considered insecure because it passes user-controlled query parameters directly to the template engine.

```javascript
app.get('/', (req, res) => {
 res.render('index', req.query);
});
```
Tokens:
Raw