Stream based renderer
import { createHtml, createRef, renderToNode, rawHtml } from "srender";
const root = document.getElementById("root");
const TodoItem = (html, props, context) => html`
<li>
${props.item}_${context.name}
<button type="button" name="deleteButton">X</button>
</li>
`;
function TodoMVC(html, { items = [] }, context) {
const { createRef } = context;
const formRef = createRef();
const inputRef = createRef();
const listRef = createRef();
html`
<h1>Todo MVC</h1>
${rawHtml("<h2>srender example</h2>")}
<form id="${formRef}">
<input id="${inputRef}" />
<button>Add</button>
</form>
<ul id="${listRef}">
${() => {
const html = createHtml({
...context,
name: "second",
});
html(TodoItem, { item: "test" });
}}
${() => items.map(item => html(TodoItem, { item }))}
</ul>
`;
// component did mount
return () => {
const $form = formRef.get();
const $input = inputRef.get();
const $list = listRef.get();
$form.onsubmit = e => {
e.preventDefault();
renderToNode(
() => {
const html = createHtml({
...context,
name: "third",
});
html(TodoItem, { item: $input.value });
},
node => $list.appendChild(node),
);
$form.reset();
};
$list.onclick = ({ target }) => {
if (target.name === "deleteButton") {
target.closest("li").remove();
}
};
requestAnimationFrame(() => $input.focus());
};
}
renderToNode(
() => {
const context = {
createRef: createRef.bind({}), // initialize createRef
name: "root",
};
const html = createHtml(context);
html(TodoMVC, { items: ["foo", "bar"] });
},
node => root.appendChild(node)
);
const http = require("http");
const { render, createHtml } = require("srender");
const hostname = "127.0.0.1";
const port = 3000;
const server = http.createServer((req, res) => {
res.statusCode = 200;
res.setHeader("Content-Type", "text/html; charset=utf-8");
render(
() => {
const html = createHtml();
html`
<!DOCTYPE html>
<html>
<head>
<title>srender demo</title>
</head>
<body>
Hello!
</body>
</html>
`;
},
{
onData: (data) => res.write(data),
}
);
res.end();
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
Install lit-html IDE plugins to have syntax highlight.
MIT
FAQs
Stream based renderer
We found that srender demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
/Research
Socket found a Rust typosquat (finch-rust) that loads sha-rust to steal credentials, using impersonation and an unpinned dependency to auto-deliver updates.
Research
/Security Fundamentals
A pair of typosquatted Go packages posing as Googleâs UUID library quietly turn helper functions into encrypted exfiltration channels to a paste site, putting developer and CI data at risk.
Security News
November CVE publications fell 25% YoY even as 2025 totals rose, showing how a few major CNAs can swing âglobalâ counts and skew perceived risk.