HTML-tools

Gratis HTML Invoker Command Generator

Generate declarative command buttons for dialogs, popovers, and disclosure elements using the Invoker Commands API. No JavaScript needed.

Tool laden...

Wat 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.

Snel antwoord

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.

Beperkingen

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.

Zo gebruik je deze tool

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

Waarvoor je het kunt gebruiken

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.

Gebruik

Praktische voorbeelden

Voorbeeld

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.

Voorbeeld

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.

Veelgemaakte fouten

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.

Verificatie

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

FAQ

Vragen over 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.

Gerelateerde tools