McFly Demo

This page is in-progress. See the source code.

In this demo, there are several things happening.

Imagine the grey box here is a page where everything is working, and we will go through the code in the Breakdown section below.

const name = "Nitro"

some text: {{greeting.message}}

Let's Break it Down

<!DOCTYPE html> <html lang="en"> <my-head> <script server:setup> const name = "Nitro"; let greeting = { url: "https://www.google.com", message: "hello" }; var count = sum(1, 247); greeting.message = "nope"; function sum(x, y) { return x + y; } </script> </my-head> <body> <a href="/demo/about">{{ count }}</a> <div> <my-hello-world id="my-hello" data-name="{{name }}"></my-hello-world> <input placeholder="Type your name here" onkeyup="document.getElementById('my-hello').setAttribute('data-name', this.value)" /> </div> <code-block language="js">const name = "Nitro"</code-block> <p><a href="{{greeting.url}}">some text: {{greeting.message}}</a></p> <clickable-text></clickable-text> </body> </html>