🧠 Val Town UI Project Guide for Future Me

This is a checklist + guide to avoid the mistakes we made while building simple UIs (like Dice Roller).

✅ Entry File

Must be named: main.tsx
Must be of type: http
Must export a default async function server() that returns HTML
Must include a client() function that calls createRoot(...).render(...)

Must include hydration logic:

Create val
if (typeof document !== "undefined") client();

client() must be re-exported:
```
Create val
export { client };
```

✅ React Import Rules

At the top, include:

Create val
/** @jsxImportSource https://esm.sh/react@18.2.0 */

Import from URLs:

Create val
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import { useState } from "https://esm.sh/react@18.2.0";

✅ HTML Boilerplate

The server() function should return:

Create val
return new Response(`<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>
    <script type="module">
      import { client } from "${import.meta.url}";
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', client);
      } else {
        client();
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>`, {
  headers: { "content-type": "text/html; charset=utf-8" }
});

✅ Style Guide

Use Tailwind classes for layout, spacing, buttons, etc.
Optionally import from CDN or inject inline CSS.

🛠 Recap Workflow

Create a Val with http type file main.tsx
Set up JSX import and server() / client() boilerplate
Build your UI in a function App() and render it inside client()
Return correct HTML in server()
Add a moi.md with title, url, image, and tags

You’re ready to make any UI with just "make a X". 🚀