jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML & Accessibility Tools

Free HTML Invoker Command Generator

Use the Invoker Commands API to create buttons that control dialogs, popovers, details elements, and custom targets without JavaScript event listeners. Generate commandfor and command attributes for built-in commands like show-modal, toggle-popover, and open/close. Includes target element templates and optional JS fallback for older browsers.

Loading tool...

What is HTML Invoker Command Generator?

The Invoker Commands API is a declarative HTML feature that lets buttons control other elements without JavaScript. Using the commandfor attribute (pointing to a target element's id) and the command attribute (specifying the action), a button can open/close dialogs, toggle popovers, expand/collapse details, or fire custom command events. This replaces onclick handlers with declarative, accessible HTML.

quickAnswer

Use the Invoker Commands API for declarative buttons that control dialogs, popovers, and details without JavaScript. Set commandfor to the target element ID and command to the action (show-modal, toggle-popover, open, close). Built-in commands work natively; custom commands fire a 'command' event on the target.

Last updated: 2026-05-28

limitations

  • Invoker Commands only work for specific target types: dialog (show-modal, close), popover (show-popover, hide-popover, toggle-popover), and details (open, close, toggle). Other elements need custom command event handlers.
  • Browser support is Baseline 2025: Chrome 117+, Edge 117+, Safari 18+. Firefox support is in development. Older browsers need a JavaScript click handler fallback.
  • Custom commands (using a custom command value) fire a 'command' event but do not perform any built-in behavior. You must add a JavaScript event listener on the target to handle custom commands.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

How to use this tool

  1. Enter the target element ID and select the target type (dialog, popover, details, or custom).
  2. Choose the command —different target types support different commands (show-modal, toggle-popover, open, etc.).
  3. Set the button text. Optionally include the target element template and JS fallback.
  4. Copy the generated HTML. No JavaScript is required for built-in commands in supporting browsers.

What you can use it for

  • Create a modal dialog trigger with a button that opens the dialog declaratively, and a close button inside the dialog that also works declaratively.
  • Build a popover menu with a toggle button —no click handlers, no state management.
  • Create a details/disclosure widget controlled by an external button instead of the summary element.

Use cases

Practical examples

example

Declarative modal dialog

A settings dialog needs open and close buttons. Use commandfor="settings-dialog" command="show-modal" on the open button and command="close" on the close button inside the dialog. No JavaScript required for the open/close behavior.

example

Popover menu toggle

A user menu popover toggles open and closed with one button. Use commandfor="user-menu" command="toggle-popover". The browser manages the popover state —no JavaScript tracking needed.

Common mistakes

  • Using commandfor without a matching target element id —the button silently does nothing. Always verify the target id matches.
  • Using a command that is not supported by the target type —show-modal only works on dialog elements, toggle-popover only on popover elements.
  • Forgetting that invoker commands are Baseline 2025 —older browsers need a JavaScript click handler fallback.

verification

  1. Click the command button and verify the target element opens, closes, or toggles correctly.
  2. Test with JavaScript disabled to confirm built-in commands work without any scripts.

FAQ

Questions about HTML Invoker Command Generator

Do invoker commands work without any JavaScript at all?

Yes, for built-in commands on dialog, popover, and details elements. The browser handles the showModal(), close(), showPopover(), hidePopover(), and toggle commands natively. For custom commands, you add a 'command' event listener on the target element —one listener handles all command invocations.

What is the difference between command and onclick?

command is declarative —it tells the browser what action to perform on the target. onclick is imperative —you write JavaScript to perform the action. command works without JavaScript for built-in actions. It also communicates intent to assistive technology: a button with command="show-modal" announces its purpose more clearly than a generic click handler.

Related tools

More html & accessibility tools

HTML & Accessibility Tools

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

HTML & Accessibility Tools

Customizable Select Generator

Generate CSS for customizable select elements using appearance: base-select, picker icons, checkmarks, and open/closed state styling.

Open tool

Also try

Also try

CSS & Design Tools

CSS Carousel Generator

Generate native CSS carousel markup with scroll-snap, scroll buttons, scroll markers, and accessible list structure. No JavaScript required.

Open tool

CSS & Design Tools

CSS Scroll-State Query Generator

Generate CSS scroll-state() container queries for styling snapped, stuck, or scrollable elements. Includes JavaScript fallback for cross-browser support.

Open tool