Copy boreDOM.js to your folder. Create an
index.html.
<script src="./boreDOM.js"></script>
A boreDOM component is just three HTML tags sharing a
data-component name. These are typically a
<template>, and optional <style> and
<script>
<template data-component="my-button">
<button data-dispatch="clickMe">
Clicked <span data-text="local.clicks">0</span> times
</button>
</template><style data-component="my-button">
button { background: hotpink; }
</style><script type="text/boredom" data-component="my-button">
export default ({ on, local }) => {
local.clicks = 0;
on("clickMe", () => local.clicks++);
};
</script>Put these on your HTML elements. They bind things.
data-text="path.to.value": Sets textContent.data-show="path.to.bool": Toggles display.data-value="path.to.value": Two-way binding for assignable paths (falls back to one-way for non-assignable expressions).
data-list="path.to.array" or data-list="item in path.to.array": Renders a list (requires
<template data-item> inside).
data-dispatch="eventName": Calls an event handler defined
in logic.
Your exported function receives an object with these tools:
local: Reactive state local to the component instance.
state: Global reactive state (if you initialized with
data-state).
on(event, callback): Register a handler for
data-dispatch events.
refs: Access elements marked with data-ref.
The CLI is designed to steer LLMs and validate their output.
npx @mr_hugo/boredom init [directory] [flags]Scaffolds a new project.
index.html with the runtime.AGENTS.md: The instruction manual for your LLM.
Feed this to Claude/ChatGPT to ensure they write correct boreDOM code.
--inline: Inlines the JS runtime directly into HTML
(Single-File Mode).
--experimental-multi: Sets up a Vite project (Human Mode).
npx @mr_hugo/boredom validate [file]Validates your single-file application.