Skip to content
F Flowmark

Event compiler

Angular-style events, outside the Flowmark template syntax.

Handlers live in Astro frontmatter and are moved into a small client module when the template uses event attributes.

Click an action to see the compiled event handlers run.

---
function save(event) {
  const output = document.querySelector("#event-output");
  output.textContent = `Saved from a ${event.type} event`;
}

function removeItem(id, element) {
  element.setAttribute("disabled", "true");
  output.textContent = `Removed ${id}`;
}
---

<button data-flow-on-click="save" data-flow-args="[{&quot;__flow&quot;:&quot;$event&quot;}]">Save</button>
<button data-flow-on-click="removeItem" data-flow-args="[&quot;item-1&quot;,{&quot;__flow&quot;:&quot;$el&quot;}]">Remove</button>