boreDOM

Why?

boreDOM exists to fight complexity, it is a JavaScript chunk of code intended to be included in single-file .html apps. It has no build step. It kinda has no API (you just include the file in a <script> tag verbatim or src="boreDOM.js" it). A simple JS code that looks for tags with the attribute data-component="some-component" and creates WebComponents from them.

LLM-First Design

boreDOM puts the Structure (HTML), Style (CSS), and Logic (JS) for a component in one place and is designed to fit in a single prompt context.

The LLM understands it, and it writes code that works, while boreDOM allows page parts to be treated like reusable components for other single-file projects that you might want to compose from or build upon existing parts.

• No Build Step: Copy-paste friendly.
• Token Efficient: Minimal abstraction overhead.
• Human Mode: It also supports Vite and multi-file setups if you want to write and manage components yourself by hand.

The Code

A simple counter component, directly as you would write it in an index.html file.

<!-- 1. The Structure -->
<template data-component="boring-counter">
  <div class="box">
    <h1 data-text="local.count">0</h1>
    <button data-dispatch="inc">+</button>
    <button data-dispatch="dec">-</button>
  </div>
</template>

<!-- 2. The Style -->
<style data-component="boring-counter">
  .box { border: 1px solid #ccc; padding: 1rem; }
  h1 { color: #333; }
</style>

<!-- 3. The Logic -->
<script type="text/boredom" data-component="boring-counter">
  export default ({ on, local }) => {
    local.count = 0;
    on("inc", () => local.count++);
    on("dec", () => local.count--);
  };
</script>

<!-- 4. The Runtime -->
<boring-counter></boring-counter>
<!-- typically inlined, but here used as src="" for example purposes -->
<script src="./boreDOM.js"></script>

boreDOM for the lazy

boreDOM includes a tool that helps scaffold new projects LLM-ready, and validates their output.

1. Context Injection

Run npx @mr_hugo/boredom init. It generates an AGENTS.md file. This file tells the LLM exactly how to write boreDOM code, preventing it from hallucinating dependencies or inventing new syntax. It works like a cheatsheet for LLMs to start productively working with boreDOM.

2. The Guardrails

Run npx @mr_hugo/boredom validate index.html. It's a linter that understands boreDOM. It checks for:

• Binding Integrity: "You dispatched 'inc', but there is no handler for it."
• Imperative Leaks: "You used innerHTML inside a component. Don't do that."
• Event Safety: "You added a global key listener but didn't clean it up."

This creates a feedback loop: Prompt → Generate → Validate → Fix. The validator catches the subtle bugs so you don't have to. LLMs can use this automatically to ensure work is up to standards.

Performance

Speed in manipulating the DOM:

        │
  React ││ 49.3ms 
        │
  Solid ││ 38ms 
        │
 Svelte ││ 38.6ms 
        │
boreDOM │███████████████████████ who cares?
        │
        └──────────────────────────────────────────
    

Get Bored

Go for it: npx @mr_hugo/boredom init. Then run your LLM CLI.

Contact: moc.leinadoguh@olleh