Sercrod
A modest web components runtime starting from HTML attributes.
Keep your HTML as it is, and add behavior only where you need it, using attributes. Sercrod can live alongside other tools and runtimes, without taking over your project.
Sercrod is a small HTML first runtime that lives in the browser, starting from attributes and Web Components instead of a virtual DOM. It sits thinly on top of modern web standards like WebGPU and WebAssembly, leaving heavy computation to the platform while keeping UI and data binding simple and predictable. Learn how Sercrod works
For the broader platform position, see the concept page.
What Sercrod does
Sercrod adds small pieces of state, rendering, and event behavior to
ordinary HTML. A <serc-rod> host owns its data, and
attributes such as *print, @click, and
*input connect that data to the DOM.
It is intended for pages where keeping HTML inspectable matters: documentation, static sites, existing pages, generated HTML, and small to medium interactive interfaces.
A small example
<serc-rod data='{"count":0}'>
<button @click="count = count + 1">
Add
</button>
<p>Count: <span *print="count"></span></p>
</serc-rod>The HTML stays visible. The attributes say where behavior is attached. The runtime updates the host without introducing a virtual DOM.
Attribute-first
Behaviors are expressed as HTML attributes. You do not have to rewrite your templates into a special DSL.
Tiny runtime
Sercrod stays small and focused, so it can be embedded into existing sites and docs without forcing a new stack.
Ready for SSG / SSR
Combined with tools like Playwright, Sercrod can also be used for static site generation and server-side rendering.
Where it fits
- Adding interaction to existing HTML without replacing the whole stack.
- Building small Web Components-backed islands inside static or generated pages.
- Keeping examples, docs, and UI behavior readable in the same source file.
- Using browser APIs, Shadow DOM, JSON endpoints, and external helpers without hiding the HTML.
Where it is not trying to dominate
- It is not a full application platform that must own every page.
- It is not a replacement for every large SPA architecture.
- It does not require you to abandon server rendering, static generation, or other frontend tools.
Readable by humans and AI
Sercrod examples are published as plain source files and structured references, so both developers and AI tools can inspect how attributes, JSON data, and server endpoints work together.
The public man.json manual is part of that contract:
it gives directive rules, runtime notes, confusion guards, and debugging guidance in a form
that tools can read before generating or editing Sercrod HTML.
Start with raw samples, follow the tutorials, or use the reference files as a stable contract for implementation.