Examples - talkDOM

Basic GET + Apply

Click the button to fetch content from a partial and insert it into the receiver.

Content will appear here...

View Source

<div receiver="demo1">Content will appear here...</div>

<button sender="demo1 get: /partials/demos/hello.html apply: inner">
  Load Content
</button>

Append Content

Each click appends new content without removing existing content.

View Source

<div receiver="demo2"></div>

<button sender="demo2 get: /partials/demos/counter.html apply: append">
  Append Entry
</button>

Pipe Chaining

Fetch content with get: then pipe the result to apply: in a separate step.

Waiting for piped content...

View Source

<div receiver="demo3">Waiting for piped content...</div>

<button sender="demo3 get: /partials/demos/hello.html | demo3 apply: inner">
  Fetch & Apply via Pipe
</button>

Parallel Chains with Semicolons

Update two receivers simultaneously with independent chains separated by ;

Receiver A

Empty

Receiver B

Empty

View Source

<div receiver="demo4a">Empty</div>
<div receiver="demo4b">Empty</div>

<button sender="demo4a get: /partials/demos/hello.html apply: inner;
               demo4b get: /partials/demos/counter.html apply: inner">
  Load Both
</button>

Custom Methods

Register a custom toggle: method and use it in sender attributes.

This box will toggle its background color.

View Source

<script>
talkDOM.methods["toggle:"] = function(el, cls) {
  el.classList.toggle(cls);
};
</script>

<div receiver="demo5">
  This box will toggle its background color.
</div>

<button sender="demo5 toggle: bg-amber-400/20">
  Toggle Background
</button>

Confirm Before Action

Use confirm: to gate an action. Cancel aborts the chain.

Click the button and confirm to replace this content.

View Source

<div receiver="demo6">
  Click the button and confirm to replace this content.
</div>

<button sender="demo6 confirm: Replace content? | demo6 get: /partials/demos/hello.html apply: inner">
  Confirm & Load
</button>

Programmatic API

Dispatch messages from JavaScript with talkDOM.send().

Waiting for programmatic send...

View Source

<div receiver="demo7">Waiting for programmatic send...</div>

<button onclick="talkDOM.send('demo7 get: /partials/demos/hello.html apply: inner')">
  talkDOM.send()
</button>