Invoker Commands API

JavaScript is great but managing modals with it can feel like overkill. The recent addition of the Invoker API can streamline this with cleaner, more simple code AND is compatible with standard HTML.

Advantages

• Less Code, More Clarity - Define actions directly in HTML.

• Accessibility Out of the Box - Provides built-in support for assistive technologies.

• Simplified State Management - No more juggling multiple event listeners.

• Framework (using this loosely) Agnostic - Works seamlessly with standard HTML or any framework you’re already using.

Old timey JS example

<button id="openModal">Open Modal</button>
  <div id="modal" class="hidden">
  <p>This is a modal</p>
  <button id="closeModal">Close</button>
  </div>

<script>
  const openModal = document.getElementById('openModal');
  const closeModal = document.getElementById('closeModal');
  const modal = document.getElementById('modal');

  openModal.addEventListener('click', () => {
      modal.classList.remove('hidden');
});

closeModal.addEventListener('click', () => {
  modal.classList.add('hidden');
});
</script>

This works, but it’s a lot of boilerplate code for something so basic.

Invoker Commands example

<button data-command="open-modal">Open Modal</button>
<div id="modal" hidden>
  <p>This is a modal</p>
  <button data-command="close-modal">Close</button>
</div>

<script>
  document.addEventListener('click', (event) => {
    const command = event.target.dataset.command;

    if (command === 'open-modal') {
      document.getElementById('modal').removeAttribute('hidden');
    } else if (command === 'close-modal') {
      document.getElementById('modal').setAttribute('hidden', '');
    }
  });
</script>

Key differences:

• Buttons tell you exactly what they do with data-command attributes.

• One event listener handles everything—no more micromanaging individual buttons.

• Modal visibility toggles using standard DOM methods.

• It’s easier to read, extend and debug.

So why is it great?

• Fewer Listeners: Manage all commands with a single listener.

• Easy to Scale: Need more commands? Just add them to the handler.

• Cleaner Code: Focus on what buttons should do, not how to wire them up.

TLDR

Invoker Commands are a no brainer if you are tired of bloated JS for mundane UI tasks like modals/etc (and you aren't using a library). It is straightforward, accessible and will scale well with your app. Now you just have to worry about browser adoption