HTML Can do this without JS Now . 😳

@codevibes_1

52.7K followers · usually 2.2K views a post

Views

39.2K

Likes

3.3K

Comments

339

SoundTikTok sound · original sound - codevibes_1

Why it worked

The video effectively demonstrates a new, powerful HTML feature that simplifies common UI interactions, reducing the need for JavaScript. This direct, code-focused explanation with clear visual examples makes it highly valuable for developers.

Summary

This video explains the new Invoker Commands API in HTML, which allows buttons to control other elements like modals and popovers without requiring JavaScript. It demonstrates how to use built-in commands like 'show-modal', 'close', 'show-popover', and 'toggle-popover', as well as how to create custom commands. The video also highlights the good browser support for these new features.

Structure

1Introduction to HTML commands replacing JavaScript
2Demonstration of modal control using 'show-modal' and 'close' commands
3Demonstration of popover control using 'toggle-popover', 'show-popover', and 'hide-popover' commands
4Explanation of custom commands with '--' prefix
5Overview of browser support for Invoker Commands API

On-screen text

CSS JS If you thought replacing javascript HTML 5 Baseline 2025 Newly available Invoker Commands API The Invoker Commands API provides a way to declaratively assign behaviors to buttons, allowing control of interactive elements when the button is enacted (clicked or invoked via a keypress, such as the spacebar or return key). <button onclick="..."> <button command="..."> HTML ONLY The command attribute has 6 built-in commands that let us control modals and popovers. <button command="--my-command"> Get in Touch Have a question? Open the form and send us a message. Contact Us Send us a message. We typically respond within one business day. Email you@example.com Message How can we help? Cancel Send Message index.html <body> <header class="navbar"> </header> <main> <h1>Get in Touch</h1> <p>Have a question? Open the form and send us a message.</p> <button class="cta" id="open-dialog">Contact Us</button> </main> <dialog id="example-dialog"> </dialog> </body> <button commandFor="" class="cta" id="open-dialog">Contact Us</button> <dialog id="example-dialog"> <form class="dialog__form" id="contact-form"> <div class="dialog__header">... </div> <div class="dialog__body">... </div> <div class="dialog__footer"> <button type="button" class="btn-secondary" id="cancel-dialog">Cancel</button> <button type="button" class="cta" id="submit-dialog">Send Message</button> </div> </form> </dialog> <button commandFor="example-dialog" class="cta" id="open-dialog">Contact Us</button> <dialog id="example-dialog"> <form class="dialog__form" id="contact-form"> <div class="dialog__header">... </div> <div class="dialog__body">... </div> <div class="dialog__footer"> <button type="button" class="btn-secondary" id="cancel-dialog">Cancel</button> <button type="button" class="cta" id="submit-dialog">Send Message</button> </div> </form> </dialog> <button commandFor="example-dialog" command="show-modal" class="cta" id="open-dialog">Contact Us</button> <dialog id="example-dialog"> <form class="dialog__form" id="contact-form"> <div class="dialog__header">... </div> <div class="dialog__body">... </div> <div class="dialog__footer"> <button type="button" class="btn-secondary" id="cancel-dialog">Cancel</button> <button type="button" class="cta" id="submit-dialog">Send Message</button> </div> </form> </dialog> <button commandFor="example-dialog" command="close" type="button" class="btn-secondary" id="cancel-dialog">Cancel</button> <button type="button" class="cta" id="submit-dialog">Send Message</button> <dialog id="example-dialog"> <form class="dialog__form" id="contact-form"> <div class="dialog__header">... </div> <div class="dialog__body">... </div> <div class="dialog__footer"> <button type="button" class="btn-secondary" id="cancel-dialog">Cancel</button> <button type="button" class="cta" id="submit-dialog">Send Message</button> </div> </form> </dialog> <button commandFor="example-dialog" command="request-close" type="button" class="btn-secondary" id="cancel-dialog">Cancel</button> <button type="button" class="cta" id="submit-dialog">Send Message</button> <dialog id="example-dialog"> <form class="dialog__form" id="contact-form"> <div class="dialog__header">... </div> <div class="dialog__body">... </div> <div class="dialog__footer"> <button type="button" class="btn-secondary" id="cancel-dialog">Cancel</button> <button type="button" class="cta" id="submit-dialog">Send Message</button> </div> </form> </dialog> <button commandFor="account-menu" command="toggle-popover"> <span class="avatar">JS</span> <span>john.smith</span> <svg width="16" height="16" viewBox="0 0 24 24" fill="none"> </svg> </button> <div id="account-menu" popover> </div> <button commandFor="mobile-menu" command="show-popover"> ≡ </button> <div id="mobile-menu" popover> <button commandFor="mobile-menu" command="hide-popover"> X </button>  </div> index.html <button commandFor="my-element" command="--my-command"> Do Something </button> <div id="my-element"></div> app.js const target = document.querySelector("#my-element"); target.addEventListener("command", event => { if (event.command === "--my-command") { // Run custom logic } }); Requires HTML HTML JS HTML HTML HTML JS Commands show-modal close request-close show-popover hide-popover toggle-popover --custom Invoker commands Baseline 2025 Newly available across major browsers. Usage % of all users Global 78.41% The command and commandfor attributes for the <button> HTML element dispatch an action to an element when the button is invoked (by click or keystroke), as a declarative alternative to addEventListener() calls or on-click attribute handlers. Current aligned Usage relative Filtered All Chrome Edge Safari Firefox Opera Chrome for Android Safari on iOS Samsung Internet Opera for Android Android Browser Firefox for Android QQ Browser KaKao Browser 10-12.1 3.2-26.1 4-28 12-12.1 2.1-4.4.4 15-15.5 2.5 135-148 135-148 12-13.4 3.1-26.1 12-13.4 3.1-26.1 4-28 26.2-26.3 144-151 15-119 26.2-26.3 144-151 15-119 26.4 26.4 12-12.1 12-12.1 2.1-4.4.4 2.1-4.4.4 149 149 15-15.5 15-15.5 151 151 149 149 150-152 26.5 26.5 150-152 26.5 26.5 26.5-TP 153-155 26.5-TP 153-155 Browser Support

Original caption

HTML Can do this without JS Now . 😳 like and follow for more. #foryou #fyp #viral #programming #codinglife

More from @codevibes_1

More breakout videos from this creator.

Transcript

If you thought CSS was the one replacing Javascript, wait until you see what HTML has been up to. With the Invoker Commands API, HTML elements can now run built-in commands that previously required click handlers or Javascript logic. But what can we use them for? The command attribute has 6 built-in commands that let us control modals and popovers. We also have the option to create custom commands, but more on that later. Let's start with modals. Now, imagine you have a button that should open this dialog. Until now, we first had to select both elements in Javascript, add click event listeners, and then call showModal on the dialog. But now we can remove all of this. Instead, we now add two attributes directly to the button. The commandFor attribute points to the ID of the HTML element you want to control. Here, there will be the modal. And the command attribute tells the browser what it should do with that element. In this case, I use the built-in command show-modal. You have to write it exactly like this. And now, when you click on the button, it will show the modal. And the rest of the page becomes inactive while the modal is open. We also have a backdrop behind it, which also comes with all the necessary accessibility rules. Now, closing the dialog is very easy. Inside the modal, we add another button. We point it toward the same dialog, and then change the command to close. So these two buttons can open and close a dialog without any event listeners or any Javascript functions. The relationship is visible directly in HTML. Now, dialogs are only half of what commands can control. We can also use them on popovers to create dropdown menus. For example, this button is controlling the account menu. The account menu is this div over here, which also uses the popover attribute. Now we can add a command. What do we want to do when we click the button? This time, I use the toggle-popover command. Clicking the button will open the menu. Clicking it again will close the menu. And because this is a native popover, it appears in the top layer and can automatically close when the user clicks somewhere else on the page. We also have two more explicit commands: show-popover and hide-popover. These work exactly the same like show-modal and close. For example, we could have a hamburger menu that uses show-popover, and inside, there's a close button that uses hide-popover. It works exactly the same. Now, just to be clear, HTML-only popovers were already possible using the popovertarget attribute. But I guess we got an alternative now. Now, as I said before, we can also create our own custom commands. For that, you have to start the value with two hyphens. When this button is activated, the targeted element receives a command event. So this event is something you can listen for in Javascript. And here, using a simple condition, you can check for that specific command and then apply the logic. So at the end, this is just an alternative to the onclick attribute. But with some features already implemented in HTML without needing Javascript. Now, the best part is browser support is actually looking quite good. With a baseline support across major browsers. The command and commandfor attributes for the <button> HTML element dispatch an action to an element when the button is invoked (by click or keystroke), as a declarative alternative to addEventListener() calls or on-click attribute handlers. Current aligned Usage relative Filtered All Chrome Edge Safari Firefox Opera Chrome for Android Safari on iOS Samsung Internet Opera for Android Android Browser Firefox for Android QQ Browser KaKao Browser 10-12.1 3.2-26.1 4-28 12-12.1 2.1-4.4.4 15-15.5 2.5 135-148 135-148 12-13.4 3.1-26.1 12-13.4 3.1-26.1 4-28 26.2-26.3 144-151 15-119 26.2-26.3 144-151 15-119 26.4 26.4 12-12.1 12-12.1 2.1-4.4.4 2.1-4.4.4 149 149 15-15.5 15-15.5 151 151 149 149 150-152 26.5 26.5 150-152 26.5 26.5 26.5-TP 153-155 26.5-TP 153-155 Browser Support