What is the Interactivity API in WordPress 6.5?

WordPress 6.5 is set to introduce the groundbreaking Interactivity API, a lightweight JavaScript library built on preactjs. Its primary objective is to standardise the reactive manipulation of HTML elements, revolutionising how developers interact with WordPress websites.
Traditionally, developers utilized various methods in vanilla JavaScript to achieve similar results. However, managing these approaches becomes cumbersome and unwieldy as applications grow more complex. The Interactive API addresses this challenge by simplifying the process.
In this video I'll walk through how to set it up and develop a simple but pratical calculator.
All links and references
Here is the link to my Github repo
github.com/eirichmond/interac...
Here’s the node package template command
npx @wordpress/create-block@latest pizza-dough-calculator --template @wordpress/create-block-interactive-template
More on scaffolding your first Interactivity block using npx
developer.wordpress.org/block...
More documentation on the Interactivity APIdeveloper.wordpress.org/block...

[@cdaveeeez]

Great video! You're very easy to listen to and learn from, please make more WP videos

[@elliottrichmondwp]

Thank you 🙏

[@tsxpneo]

Clearest Interactivity API walk-through I've seen so far! thanks a lot!

[@elliottrichmondwp]

Thank you so much 🙏

[@tsxpneo]

@@elliottrichmondwp you're very welcome! One question, since you mention that you attented a workshop with one of the project leads. Was there any discussion about how to do the backend represenation of frontend interactive blocks? Just placeholders? I'm wondering because that runs counter to the "visual" editing idea in Gutenberg, doesn't it? But it's probably impossible to rebuild more complex inter-block-interactivity in react in the editor without a similar API. It would also mean duplicating a lot of code. So I'm wondering if there was a favored approach or if that issue wasn't even on their minds.

[@saqibKisana]

Thank you Elliott Richmond for producing this video.

[@elliottrichmondwp]

No worries!

[@SiteStudio]

I love that a hypermedia-driven tool is now native to WordPress. That said, I prefer using HTMX with my WordPress sites.

[@ivanbarta2821]

I have a very similar feeling

[@nusapixelweb]

Not a developer, but so excited with what's possible with the Interactivity API.
Great explanation!

[@elliottrichmondwp]

Great to hear!

[@visualmodo]

Truly good work!!!

[@elliottrichmondwp]

Thank you 🙏

[@cholo2605]

Great tutorial as always, thanks🚀🙏

[@elliottrichmondwp]

Appreciate it!

[@jamiewp]

Fab video 👍

[@elliottrichmondwp]

Thanks Jamie 😀

[@thebilalafsar]

Hey bro! Have you considered doing a WordPress speed tutorial or maybe a series geared towards freelancers, covering things like bug fixing or web development projects related to WordPress? It would be awesome if you could also do a dedicated tutorial on Core Web Vitals. Thanks!

[@mahmodissa4169]

Hey, thanks for this awesome video, can you share the repo link please?

[@elliottrichmondwp]

Oh sorry, I meant to add that to the description, check again in 5 mins

[@theaminul]

I have a question, how to handle page navigation?? I mean how to handle headless route with Interactivity API??

[@elliottrichmondwp]

There is a package you can dyamically import for routing developer.wordpress.org/block-editor/reference-guides/packages/packages-interactivity-router/ its already being used in the Query Loop block.
You can also see an example of this in core query block's view.js file github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/query/view.js