Edge functions (Vercel, Netlify, Cloudflare Workers) are a great way to serve your code close to your end users. However, with edge functions you lose access to the file system, making it harder to use traditional template engines. Edge Template works around this issue by compiling your templates to native ES-modules. After compilation, you can just import your templates into any Edge function.

Because ES-modules are compatible with any javascript environment, you can use the same template for sever-side rendering, pre-rendering, edge rendering ánd client-side rendering. This makes them truly isomorphic.

1. first (pre)compile you template to esm. Typically you'd do this during your build step:

import edge from "edge-template-engine"
import * as fs from "fs"

// compile
let compiled = await edge.compile("<h1>${data.title}</h1>", "esm"); // or 'str' to render to string

// save the file to disk, so you can import it in the next step
fs.writeFileSync("./test.mjs", compiled, "utf8");

2. Now you can import the template, and render it with the data:

import template from "./test.mjs"

const data = {
    "title":"Hello Edge!"
}
var result = template(data);

${data.something}

$(data.something?){<b>${data.something}</b>}

$(!data.something?){<b>Empty</b>}

$(data.names:name){<b>I'm ${name}</b>}

${data.title == 'Hello Edge!' ? 'The condition is true' : 'The condition is false'}

Inside ${} you can use any javascript expression you want. Functions, methods, properties, process.env...

Based on on li-template by Patrick Pissurno.

Don't forget to press the ⭐ button to let me know I should continue improving this project.