Skip to content
Docs | Val Town

Your first website

This is a guide to making a website on Val Town using React JSX, such as a link-in-bio page or a personal website.

Step 1: Sign up to Val Town

Section titled “Step 1: Sign up to Val Town”

Sign up to Val Town. It’s free.

Step 2: Remix this template

Section titled “Step 2: Remix this template”

The quickest way to get started in Val Town is to remix someone else’s val. Remixing a val creates a copy of the val in your own account, which you can then edit.

  1. Go to https://www.val.town/x/valdottown/linkInBioTemplate
  2. Click on the Remix button in the top right corner.
Source Code
Section titled “Source Code”

View and run this example on Val Town

/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";


export default async function(req: Request) {
  return new Response(
    renderToString(
      <html>
        <head>
          <meta charSet="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Joe Schmo</title>
        </head>
        <body
          style={{ padding: "30px", width: "300px", margin: "0 auto", fontFamily: "sans-serif", textAlign: "center" }}
        >
          <h1>Joe Schmo</h1>
          <p>Just an average Joe</p>
          <div style={{ display: "flex", flexDirection: "column", gap: "15px" }}>
            <a href="https://www.instagram.com/joeschmo" style={itemStyle}>Instagram</a>
            <a href="https://github.com/joeschmo" style={itemStyle}>Github</a>
            <a href="https://www.linkedin.com/in/joeschmo" style={itemStyle}>LinkedIn</a>
            <a href="https://twitter.com/joeschmo" style={itemStyle}>Twitter</a>
            <a href="https://www.youtube.com/joeschmo" style={itemStyle}>YouTube</a>
          </div>
        </body>
      </html>,
    ),
    {
      headers: {
        "Content-Type": "text/html",
      },
    },
  );
}


const itemStyle = {
  padding: "10px",
  color: "white",
  backgroundColor: "#ff748d",
  borderRadius: "20px",
  textDecoration: "none",


  boxShadow: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
};
Output
Section titled “Output”

Step 3: Customize it!

Section titled “Step 3: Customize it!”
  1. Edit your name in <title> </title> in h1
  2. Edit your self-description line
  3. Customize your links
  4. Customize the styles
  5. Highlight a block of text and ask AI to rewrite it to suit your needs
  6. Ask Townie, our AI coding assistant, to help you with any of the above

Next steps

Section titled “Next steps”

🥳 Congratulations! You now have a live website with a URL that you can share.

You can add a custom subdomain (ie steve.val.run) or custom domain. The following website were made with Val Town: