rendu

rendu

🏎️ JavaScript Hypertext Preprocessor.

Rendu is a lightweight toolkit for mixing HTML and JavaScript with a focus on simplicity, standards and progressive rendering.

[!WARNING] This is an experimental PoC.

[!NOTE] See playground (online playground) for demos and syntax section for usage.

CLI

Using the rendu CLI, you can start a local web server to serve static files and render .html files as templates (powered by srvx).

npx rendu

Programmatic API

compileTemplate(template, opts)

Compile a template string into a render function.

Example:

import { compileTemplate } from "rendu";

const template = `
  <h1><?= title ?></h1>
  <ul>
  <? for (const item of items) { ?>
    <li><?= item ?></li>
  <? } ?>
  </ul>
`;

const render = compileTemplate(template, { stream: false });

const html = await render({
  title: "My List",
  items: ["Item 1", "Item 2", "Item 3"],
});
console.log(html);
// Output:
// <h1>My List</h1>
// <ul>
//   <li>Item 1</li>
//   <li>Item 2</li>
//   <li>Item 3</li>
// </ul>

renderToResponse(htmlTemplate, opts)

Renders an HTML template to a Response object.

The template can access the following variables:

• globalThis: The global object.

• $REQUEST: The incoming Request object (if provided).

• $METHOD: The HTTP method of the request (if provided).

• $URL: The URL of the request as a URL object (if provided).

• $HEADERS: The headers of the request (if provided).

• $RESPONSE: An object to customize the response, with properties: status, statusText, and headers.

Example:

import { compileTemplate, renderToResponse } from "rendu";

const render = compileTemplate(template, { stream: true });

const response = await renderToResponse(render, { request });

Syntax

Rendu uses PHP-style tags to embed JavaScript within HTML templates:

Server Scripts

Use <script server> to execute JavaScript on the server where it appears:

<script server>
  globalThis.visitedPagesCount ??= 0;
  globalThis.visitedPagesCount++;
</script>

Output Expressions

Use <?= expression ?> to output values:

<h1><?= title ?></h1>
<div>Page visited: <?= visitedPagesCount ?></div>

Control Structures

Use <? ... ?> for JavaScript control flow:

<? if (items.length === 0) { ?>
<p>No items found.</p>
<? } ?> <? for (const item of items) { ?>
<li><?= item.name ?></li>
<? } ?>

Streaming Content

Use echo() function for streaming content. Accepts: strings, functions, Promises, Response objects, or ReadableStreams:

<script server>
  echo("Hello");
  echo(async () => fetch("https://api.example.com/data"));
  echo(() => "World");
</script>

Global Variables

Access request context and global state:

• $REQUEST: The incoming Request object
• $METHOD: HTTP method (GET, POST, etc.)
• $URL: Request URL object
• $HEADERS: Request headers
• $RESPONSE: Response configuration object
• $GLOBALS: Global state object
• globalThis: Global JavaScript object

Development

local development

• Clone this repository
• Install the latest LTS version of Node.js
• Enable Corepack using corepack enable
• Install dependencies using pnpm install
• Run interactive tests using pnpm dev

Perior Arts

• jaubourg/jhp
• atinux/pjs
• mde/ejs

License

Published under the MIT license.