base.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Starting with XO Forms</title>
    <style>
        @import url(https://xo-js.dev/v2.0/xo.css);
        @import url(/css/test/xo-test.css);

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
    </style>

    <link rel="stylesheet" href="/css/xo.css" />
    <script type="module" src="/dist/xo.js" defer></script>
    <!-- 
        <script type="module" src="https://xo-js.dev/v2.0/xo.min.js" defer></script> 
    -->
    <script type="module" defer>

        const schema = {
            theme: "thin",
            pages: [
                {
                    legend: "My First XO Form",
                    fields: [
                        {
                            type: "text",
                            caption: "Your name",
                            bind: "#/data/name",
                            placeholder: "John Doe"
                        }
                    ]
                }
            ]
        };
        const frm = await xo.form.run(schema, {
            on: {
                post: e => {
                    alert(JSON.stringify(e.detail.postData, null, 2))
                }
            }
        });
        document.getElementById("form").appendChild(frm);
    </script>
</head>

<body>
    <h1>Starting with XO Forms</h1>
    <section id="form"></section>
</body>
</html>