Introduction

Edge is a simple, Modern, and batteries included template engine for Node.js. Edge is similar to writing JavaScript. If you know JavaScript, you know Edge.

Hello {{ user.username }}!

Hello world

This is a hello world example in Edge.

{{ user.subscription?.plan || 'Not subscribed' }}

JavaScript Expressions

Edge is capable of evaluating any JavaScript expression.

@let(payments = await user.getPayments())
You have made {{ payments.length }} payments so far.

Async/await

You can also make use of async/await keywords within your templates.

@if(user.hasSubscription)
  Hurray! You have access to over 280 videos.
@else
  Videos are available only to subscribers.
@end

Conditionals

Writing conditionals is similar to JavaScript.

@each(comment in post.comments)
  @include('partials/comment')
@end

Loops

You can loop over Arrays and Objects using a unified syntax.

@accordion()
  @accordion.item({ title: 'What is Edge?' })
    Edge is a template engine for Node.js
  @end

  @accordion.item({ title: 'Why should I use Edge?' })
    Because you need a template engine 🤷🏻‍♂️
  @end

  @accordion.item({ title: 'How can I support Edge?' })
    By becoming a sponsor on Github
  @end
@end

Components

Edge has components as well. They allow re-using markup with an isolated state.

Why another template engine?

Many will not ask this question because all the popular template engines in the Node.js ecosystem are on life support or have barely innovated in the past few years.

On the other hand, we have evolved and used Edge inside AdonisJS for almost seven years. Following are some of the hand-picked features of Edge.

Edge is not restrictive - You can write any JavaScript expression inside it.
Accurate error stack.
Simple mental model and no custom dialect to learn.
Components layer with support for slots and provide/inject API.
Icons integration with Iconify.
Extensible API. 80% of Edge features are implemented using the public API.

Edge vs Vue.js / React / Svelte?

Edge is a backend template engine completely different from frontend libraries like Vue.js or React.

There is no Reactivity in Edge.
It is not tied to any DOM implementation. Edge is not even tied to HTML.
You do not have to compile Edge templates. They are compiled at runtime.

A better comparison will be Nunjucks vs. Edge or Pug vs. Edge.

Edge vs JSX

While JSX is excellent, it is technically not a template engine. JSX is a JavaScript syntax extension for XML, commonly used in frameworks like React, which many web developers employ to generate HTML.

On the other hand, Edge is a template engine that you can embed inside any markup language. Be it Markdown, JSON, YAML, and, of course, HTML.

I like JSX for many reasons, including type safety (when used with TypeScript). However, JSX can get verbose and is slightly low-level to cater to everyone's taste. On the other hand, Edge can be an excellent fit for individuals who enjoy the template engine's terse syntax and expressive nature.

Why should I use Edge?

If you like the simplicity of using backend template engines and have been looking for one that feels modern, refreshing, and does not force you to learn a new language, then Edge is for you.

If you swim in the <your-frontend-framework> ecosystem, you do not need Edge. Imagine, you never opened this website 😉

Next steps

Start with the Getting Started guide.
Read the Syntax specification guide to understand the Edge templating syntax better.

Call for Contributors

We are seeking contributors to help us create syntax highlighting extensions for all mainstream code editors.

Sublime Text - Officially supported
VSCode - Officially supported
Vim - We need contributors to help us highlight Edge on Vim.
WebStorm - Need contributors. The JetBrains issues tracker has an open issue requesting a syntax highlighter.

Do let us know by opening an issue on Github if you decide to build an extension for a code editor. You can learn more about the Edge syntax by reading the syntax specification guide.

Sponsors

List of individuals and companies publicly sponsoring Harminder Virk on Github. If you are sponsoring and cannot see your name, ensure your sponsorship is not private.