Function to ReactiveElement Demo

This demo shows how simple functions can be automatically converted into reactive web components. Just write a function with destructured parameters and defaults, and get a fully reactive custom element!

Square Root Calculator

A simple math component that reactively updates when the num attribute changes:

User Cards

User profiles with multiple reactive properties including booleans:

Try in Console

Open dev tools and try:


        function myTest({text = "hello", num = 42}) { return `<div>${text} - ${num}</div>` }

        const elem = createElement(myTest)

        elem.text = "world"

        document.body.appendChild(elem)