šļø JavaScript Hypertext Preprocessor.
npm install 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.
Using the rendu CLI, you can start a local web server to serve static files and render .html files as templates (powered by srvx).
``sh`
npx rendu
Compile a template string into a render function.
Example:
`ts
import { compileTemplate } from "rendu";
const template =
;const render = compileTemplate(template, { stream: false });
const html = await render({ title: "My List", items: ["Item 1", "Item 2", "Item 3"] });
console.log(html);
// Output:
//
My List
//
// - Item 1
// - Item 2
// - Item 3
//
`$3
Compile a template string into a render function code string.
Note: This function is for advanced use cases where you need the generated code as a string.
$3
$3
Check if a template string contains template syntax.
$3
- Type:
array
- Default: ["htmlspecialchars","setCookie","redirect","$REQUEST","$METHOD","$URL","$HEADERS","$COOKIES","$RESPONSE"]$3
Renders an HTML template to a Response object.
Example:
`ts
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:
$3
Use
$3
Use
{{ expression }} for HTML-escaped output, or {{{ expression }}} or = expression ?> for unescaped (raw) output:`html
= title ?>
Page visited: {{ visitedPagesCount }}
`$3
Use
... ?> for JavaScript control flow:`html
if (items.length === 0) { ?>
No items found.
} ?> for (const item of items) { ?>
{{ item.name }}
} ?>
`$3
Use the
echo() function for streaming content. Accepts: strings, functions, Promises, Response objects, or ReadableStreams:Examples:
`html
`$3
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
- $COOKIES: Read-only object containing request cookies$3
Use
setCookie() function to set cookies in the response:`html
`Access cookies from the request using
$COOKIES:`html
Welcome, = $COOKIES["user"] || "Guest" ?>!
`$3
Use
redirect() function to redirect the user:`html
`$3
The
htmlspecialchars() function is available for escaping HTML content:> [!TIP]
> When using curly
{{ }} syntax, htmlspecialchars will be automatically applied.`html
= htmlspecialchars(userInput) ?>
`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`- jaubourg/jhp
- atinux/pjs
- mde/ejs
Published under the MIT license.