EdgeJS

Edge is a simple, Modern, and batteries included template engine created and maintained by the AdonisJS core team for Node.js. Edge is similar to writing JavaScript. If you know JavaScript, you know Edge.

The documentation for Edge is available on https://edgejs.dev

Installation

Install and configure Edge using the following command.

node ace add edge

Installs the edge.js package using the detected package manager.

Registers the following service provider inside the adonisrc.ts file.

{
  providers: [
    // ...other providers
    () => import('@adonisjs/core/providers/edge_provider')
  ]
}

Rendering your first template

Once the configuration is completed, you can use Edge to render templates. Let's create a welcome.edge file inside the resources/views directory.

node ace make:view welcome

Open the newly created file and write the following markup inside it.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>
    Hello world from {{ request.url() }} endpoint
  </h1>
</body>
</html>

Finally, let's register a route to render the template.

import router from '@adonisjs/core/services/router'

router.get('/', async ({ view }) => {
  return view.render('welcome')
})

You can also use the router.on().render method to render a template without assigning a callback to the route.

router.on('/').render('welcome')

Passing data to the template

You can pass data to the template by passing an object as the second argument to the view.render method.

router.get('/', async ({ view }) => {
  return view.render('welcome', { username: 'romainlanz' })
})

Configuring Edge

You can use Edge plugins or add global helpers to Edge by creating a preload file inside the start directory.

node ace make:preload view

start/view.ts

import edge from 'edge.js'
import env from '#start/env'
import { edgeIconify } from 'edge-iconify'

/**
 * Register a plugin
 */
edge.use(edgeIconify)

/**
 * Define a global property
 */
edge.global('appUrl', env.get('APP_URL'))

Global helpers

Please check the Edge helpers reference guide to view the list of helpers contributed by AdonisJS.

Learn more

Views & Templates

Introduction