Web64 Developer Docs

Build compact websites for a browser running directly on Nintendo 64 hardware.

Starter

This starter uses one HTML file, one stylesheet, preconverted .sprite artwork, and a built-in font fallback chain. Upload the folder to an HTTP host and open it from Web64.

Folder layout

my-site/
  index.html
  style.css
  images/
    logo.sprite
    background.sprite

index.html

<!doctype html>
<html>
<head>
  <title>My Web64 Site</title>
  <link rel="stylesheet"
    href="style.css">
</head>
<body>
  <div class="page-shell">
    <img src="images/logo.sprite"
      alt="My logo"
      width="128" height="64">
    <h1>Hello, N64!</h1>
    <p>My site is online.</p>
    <a href="about.html">About</a>
  </div>
</body>
</html>

style.css

body {
  background: #178edb;
  color: #1d2633;
  font-family:
    "Web64 Roundabout",
    "Web64 Droid Sans",
    "Web64 AT01";
  font-size: 16px;
  margin: 0;
}

.page-shell {
  max-width: 560px;
  margin: 0 auto;
  padding: 8px;
  background-color: #f7f0d5;
  border: 3px solid #8e6425;
}

h1 {
  color: #1c64c7;
  font-size: 32px;
}

a {
  color: #863bd0;
  cursor: pointer;
}

Before you publish

HTML

Use elements and attributes listed in the HTML page.

CSS

Use documented selectors, properties, units, and values.

Fonts

Provide a fallback list ending in a broad built-in family.

Assets

Convert source artwork with libdragon's mksprite tooling, then use .sprite files with explicit dimensions and relative paths.

Hosting

Confirm the site is reachable over HTTP from the network used by web64-net.