GOOD (BANG!) - Web Components UI toolbelt

HTML-first UI components, with bang tags and direct DOM updates.

GOOD keeps your UI stack simple: no build step, no VDOM, and no custom DSL. Just HTML, CSS, and a tiny runtime that upgrades bang tags into Custom Elements.

Launch 7GUIs demo Browse components npm package

Quick taste

<script src=https://unpkg.com/bang.html></script>
<script>
  use('sg-counter');
  setState('ctr', {count: 0});
</script>
<!sg-counter state=ctr />

Why GOOD feels different

Bang tags

Use `` and GOOD upgrades the comment node into a Custom Element.

Granular DOM updates

Updates apply directly to text, attributes, and list items. No VDOM and no shadow DOM diffing.

File-based components

Drop `markup.html`, `style.css`, and `script.js` in `components/name/` and you are done.

Async templating

Promises and async functions resolve right inside `${...}` slots.

Live component

This is the same warm-greeter used in the README tutorial, rendered via the local `components/` directory.

Component anatomy

components/
  warm-greeter/
    markup.html
    style.css
    script.js

Each file is optional. Use only what you need.

Demos and docs

7GUIs reference app Cells spreadsheet (WIP) Simple counter Component gallery source

API snapshot

use('my-component');
setState('key', {value: 1});
getState('key');
cloneState('key');
patchState('key', {value: 2});