ABCDEFGHIJKLMNOPQRSTUVWXYZ
1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>A whole page. One cell.</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; background: #f3f1e9; color: #253b32; font-family: Arial, sans-serif; }
main { width: min(100%, 840px); padding: 64px 28px; }
h1 { margin: 0 0 28px; font-size: clamp(44px, 9vw, 88px); line-height: 1.02; letter-spacing: -0.055em; }
p { max-width: 540px; font-size: 19px; line-height: 1.7; color: #526157; }
a { color: inherit; text-underline-offset: 5px; }
.tip { margin-top: 48px; font-size: 14px; }
</style>
</head>
<body>
<main>
<h1>A whooole page.<br>One cell.</h1>
<p>This entire page is the HTML stored in A1. Change the words, colors, layout, or add JavaScript. Your HTML fills the screen.</p>
<p class="tip">Edit A1, then refresh this page to see your changes.<br><a href="https://docs.google.com/spreadsheets/d/1e5WRt0mWLfVkY2KzTb3gyNoiuKV1yHXy2eFdLmiF-R8/edit" target="_blank" rel="noopener">Open the Google Sheet</a> · <a href="https://docs.google.com/spreadsheets/d/1e5WRt0mWLfVkY2KzTb3gyNoiuKV1yHXy2eFdLmiF-R8/copy" target="_blank" rel="noopener">Make a copy</a></p>
</main>
</body>
</html>		homeHomepage in A1. Keep B1 as index. Edit the complete HTML in one cell.
2
# Markdown, straight from a cell

This page uses **bold**, *italic*, and `inline code` without a complete HTML document.

## A short list

- Write your content in column A.
- Give the page a unique slug in column B.
- Refresh the viewer after editing.

## Numbered steps

1. Copy the demo Sheet.
2. Share your copy as Anyone with the link can view.
3. Open it at sheets.built.at using your new Sheet ID.

> You can ask AI to replace one cell with an entire page.

## A small table

| Content | What visitors see |
| --- | --- |
| Plain text | Simple paragraphs |
| Markdown | A formatted document |
| HTML + CSS | Your own design |
| HTML + JavaScript | A live-updating page |
| A standalone HTTPS URL | A redirect |

## Links

[Back to the homepage](index) or [see the live clock](clock).

## A code block

```html
<h1>Hello from a cell</h1>
<p>Edit this, then refresh.</p>
```

---

This page is rendered with the viewer's built-in Markdown formatter. HTML is available when you need more control.
markdownMarkdown: headings, bold, italic, code, lists, blockquote, table, links, rule.
3
This is a plain-text page.

This text comes directly from the Google Sheet. Edit this cell and refresh the preview to see your changes.

No HTML or Markdown is required. Write a short announcement, a description, or a few paragraphs in column A.

The viewer adds a readable layout. Paragraphs are separated by blank lines.

To change the address of this page, change its slug in column B. To change its place in the menu, move the entire row.

Use the Home link in the viewer menu to return to the demo.		plainPlain text: blank lines create paragraphs.
4
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>HTML & CSS from a cell</title><style>:root{font-family:Arial,sans-serif;color:#17231d;background:#f6f7f2}*{box-sizing:border-box}body{margin:0}main{max-width:1000px;margin:auto;padding:64px 28px 80px}h1{font-size:clamp(36px,6vw,66px);letter-spacing:-2px;line-height:1.03;max-width:820px;margin:18px 0 24px}h2{font-size:26px;letter-spacing:-.7px;margin:40px 0 16px}p,li{line-height:1.7}p{max-width:720px;color:#46534b}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:bold}.lead{font-size:19px}.links{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}a{color:inherit;text-underline-offset:4px}.button{display:inline-block;padding:13px 19px;border:1px solid #263d30;border-radius:6px;text-decoration:none;font-size:14px;font-weight:bold}.primary{background:#263d30;color:white}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0}.card{padding:24px;background:white;border:1px solid #dce1d8;border-radius:10px}.card h2{font-size:20px;margin:12px 0}.card p{font-size:14px}.number{font-family:monospace;font-size:12px;color:#64765d}.note{background:#e7eddc;border-radius:8px;padding:20px 24px;margin:30px 0;line-height:1.6}code{background:#e7ebdf;padding:3px 5px;border-radius:3px}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#e7ebdf;padding:20px;line-height:1.6;border-radius:8px}input,button{font:inherit}input{width:100%;padding:12px;background:white;border:1px solid #abb9a5;border-radius:6px;margin:8px 0 18px}label{display:block;font-size:14px;font-weight:bold}.result{font-size:44px;font-weight:bold;letter-spacing:-2px;margin:20px 0}button{padding:12px 16px;border:1px solid #263d30;background:#263d30;color:white;border-radius:6px;cursor:pointer}button.secondary{background:white;color:#263d30}details{padding:18px 0;border-top:1px solid #dce1d8}summary{font-weight:bold;cursor:pointer}figure{margin:36px 0}svg{max-width:100%;height:auto}figcaption{font-size:12px;color:#64765d;margin-top:12px}footer{font-size:12px;color:#64765d;margin-top:48px;border-top:1px solid #dce1d8;padding-top:20px}@media(max-width:700px){main{padding:36px 20px}.grid{grid-template-columns:1fr}h1{letter-spacing:-1.4px}.result{font-size:38px}}</style></head><body><main><div class="eyebrow">HTML / CSS / RESPONSIVE DESIGN</div><h1>Your cell.<br>Your whole design.</h1><p class="lead">This is a complete HTML document with its own CSS, an inline SVG illustration, a responsive grid, and a native accordion.</p><figure><svg role="img" aria-label="An abstract landscape with a sun, hills, and a winding path" viewBox="0 0 920 250" xmlns="http://www.w3.org/2000/svg"><rect width="920" height="250" rx="16" fill="#dde8d3"/><circle cx="735" cy="76" r="38" fill="#ecb471"/><path d="M0 170 Q180 70 360 180 T740 155 T920 150 V250 H0Z" fill="#a6bb99"/><path d="M0 225 Q220 150 430 220 T920 180 V250 H0Z" fill="#58745a"/><path d="M420 250 Q510 195 610 190 T740 155" stroke="#f6f7f2" stroke-width="14" fill="none"/></svg><figcaption>An inline SVG: the illustration is stored in the HTML cell, with no separate image upload.</figcaption></figure><div class="grid"><div class="card"><h2>Layout</h2><p>Resize the window. These cards stack on smaller screens.</p></div><div class="card"><h2>Typography</h2><p>Control type, spacing, colors, borders, and content width with CSS.</p></div><div class="card"><h2>Images</h2><p>Use inline SVG or an image URL accessible to your visitors. External media loads from its source.</p></div></div><h2 id="details">A built-in accordion</h2><details><summary>Can I preview a complete HTML file?</summary><p>Yes. Put the whole document in one cell, including its style and script tags.</p></details><details><summary>Can I add my own media?</summary><p>Yes. An img, audio, video, or embed can reference a publicly accessible source. Some providers restrict embedding.</p></details><p><a href="#details">Jump to the accordion</a> · <a href="index">Back home</a></p><footer>Built.at Sheets demo · Edit a cell. Refresh the preview.</footer></main></body></html>		htmlComplete HTML, custom CSS, responsive cards, inline SVG, accordion, anchors.
5
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fixed Clock</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; background: #f3f1e9; color: #253b32; font-family: Arial, sans-serif; }
main { width: min(100%, 840px); padding: 64px 28px; text-align: center; }
h1 { margin: 0 0 12px; font-size: clamp(36px, 7vw, 64px); line-height: 1.02; letter-spacing: -0.055em; }
#digital-clock { font-size: clamp(24px, 5vw, 42px); font-weight: bold; color: #253b32; margin-bottom: 32px; font-variant-numeric: tabular-nums; }
.clock-container { position: relative; width: 220px; height: 220px; margin: 0 auto 32px; border: 8px solid #253b32; border-radius: 50%; background: #fff; box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.hand { position: absolute; bottom: 50%; left: 50%; transform-origin: bottom; background: #253b32; border-radius: 4px; }
.hour-hand { width: 6px; height: 55px; background: #253b32; transform: translateX(-50%); }
.minute-hand { width: 4px; height: 75px; background: #526157; transform: translateX(-50%); }
.second-hand { width: 2px; height: 85px; background: #c84b31; transform: translateX(-50%); }
.center-dot { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; background: #c84b31; border-radius: 50%; transform: translate(-50%, -50%); }
p { max-width: 540px; margin: 0 auto; font-size: 18px; line-height: 1.6; color: #526157; }
</style>
</head>
<body>
<main>
<h1>Live Clock</h1>
<div id="digital-clock">00:00:00</div>
<div class="clock-container">
<div class="hand hour-hand" id="hourHand"></div>
<div class="hand minute-hand" id="minuteHand"></div>
<div class="hand second-hand" id="secondHand"></div>
<div class="center-dot"></div>
</div>
<p>This clock updates in real time using JavaScript.</p>
</main>
<script>
function updateClock() {
const now = new Date();

// Digital update
document.getElementById('digital-clock').textContent = now.toLocaleTimeString();

// Analog update
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();

const hourDeg = (hours * 30) + (minutes * 0.5);
const minuteDeg = (minutes * 6) + (seconds * 0.1);
const secondDeg = seconds * 6;

document.getElementById('hourHand').style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
document.getElementById('minuteHand').style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
document.getElementById('secondHand').style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;
}

setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>		clockHTML and JavaScript. A live analog and digital clock updates to your local time.
6
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Use this template</title><style>:root{font-family:Arial,sans-serif;color:#17231d;background:#f6f7f2}*{box-sizing:border-box}body{margin:0}main{max-width:1000px;margin:auto;padding:64px 28px 80px}h1{font-size:clamp(36px,6vw,66px);letter-spacing:-2px;line-height:1.03;max-width:820px;margin:18px 0 24px}h2{font-size:26px;letter-spacing:-.7px;margin:40px 0 16px}p,li{line-height:1.7}p{max-width:720px;color:#46534b}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:bold}.lead{font-size:19px}.links{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0}a{color:inherit;text-underline-offset:4px}.button{display:inline-block;padding:13px 19px;border:1px solid #263d30;border-radius:6px;text-decoration:none;font-size:14px;font-weight:bold}.primary{background:#263d30;color:white}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0}.card{padding:24px;background:white;border:1px solid #dce1d8;border-radius:10px}.card h2{font-size:20px;margin:12px 0}.card p{font-size:14px}.number{font-family:monospace;font-size:12px;color:#64765d}.note{background:#e7eddc;border-radius:8px;padding:20px 24px;margin:30px 0;line-height:1.6}code{background:#e7ebdf;padding:3px 5px;border-radius:3px}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#e7ebdf;padding:20px;line-height:1.6;border-radius:8px}input,button{font:inherit}input{width:100%;padding:12px;background:white;border:1px solid #abb9a5;border-radius:6px;margin:8px 0 18px}label{display:block;font-size:14px;font-weight:bold}.result{font-size:44px;font-weight:bold;letter-spacing:-2px;margin:20px 0}button{padding:12px 16px;border:1px solid #263d30;background:#263d30;color:white;border-radius:6px;cursor:pointer}button.secondary{background:white;color:#263d30}details{padding:18px 0;border-top:1px solid #dce1d8}summary{font-weight:bold;cursor:pointer}figure{margin:36px 0}svg{max-width:100%;height:auto}figcaption{font-size:12px;color:#64765d;margin-top:12px}footer{font-size:12px;color:#64765d;margin-top:48px;border-top:1px solid #dce1d8;padding-top:20px}@media(max-width:700px){main{padding:36px 20px}.grid{grid-template-columns:1fr}h1{letter-spacing:-1.4px}.result{font-size:38px}}</style></head><body><main><div class="eyebrow">START HERE</div><h1>Make it yours.</h1><ol><li><a href="https://docs.google.com/spreadsheets/d/1e5WRt0mWLfVkY2KzTb3gyNoiuKV1yHXy2eFdLmiF-R8/copy">Make a copy of this Sheet.</a></li><li>In your copy, choose <strong>Share → General access → Anyone with the link → Viewer</strong>.</li><li>Open <a href="https://sheets.built.at/">sheets.built.at</a> and paste your copied Sheet's link or ID.</li><li>Edit a content cell, then refresh the viewer. Share that preview URL with anyone reviewing it with you.</li></ol><h2>The two columns</h2><p><strong>A: content.</strong> HTML, Markdown, plain text, or a standalone HTTP/HTTPS redirect URL.<br><strong>B: slug.</strong> A unique page address, such as <code>about</code> or <code>guides/faq</code>.<br>Column C contains editing tips. The viewer ignores it.</p><h2>How pages work</h2><ul><li>The row labeled <code>index</code> is the homepage, wherever it lives.</li><li>Blank slugs are ignored. Duplicate slugs produce a clear error.</li><li>Slugs are trimmed and lowercased. Use hyphens instead of spaces.</li><li>Move whole rows to reorder the menu. Content stays paired with its slug.</li><li>Headers <code>content</code> and <code>slug</code> are optional in row 1.</li></ul><h2>Try an AI edit</h2><pre>In my copied Built.at Sheets template, replace A1 with a complete responsive HTML homepage for a neighborhood bakery. Keep B1 as index. Put all HTML, CSS, and JavaScript in A1.</pre><p>To edit a long HTML cell manually, double-click it or use the formula bar. Keep the entire page in one cell.</p><h2>Preview URLs</h2><pre>https://sheets.built.at/?id=YOUR_SHEET_ID
https://sheets.built.at/?id=YOUR_SHEET_ID&amp;slug=about
https://sheets.built.at/?id=YOUR_SHEET_ID&amp;slug=guides%2Ffaq</pre><p>You can add <code>&amp;gid=WORKSHEET_ID</code> to select a different worksheet. <a href="https://sheets.built.at/?id=1e5WRt0mWLfVkY2KzTb3gyNoiuKV1yHXy2eFdLmiF-R8&gid=740306061">Open the second worksheet example.</a></p><h2>Links & redirects</h2><p>A link such as <code>href="about"</code> opens a matching slug while keeping the Sheet ID. Use <code>href="#section"</code> for an anchor on the same page. External links open separately. To create a redirect, put only the destination URL in column A, as shown by the <a href="go">go page</a>.</p><h2>Editing & previewing</h2><p>Every load and Refresh requests current Sheet data. Google may take a moment to return or propagate changes. There is no viewer cache, publish step, scheduled polling, or automatic refresh.</p><p>HTML runs in a sandbox. Browser interactions work, but storage, sign-in, or services that require a normal page origin may need a different hosting setup. A preview form does not acquire a backend automatically.</p><p>When ready, you can copy your HTML to GitHub or another host.</p><p><a href="index">Back home</a></p><footer>Built.at Sheets demo · Edit a cell. Refresh the preview.</footer></main></body></html>		guideCopying, sharing, AI editing, page URLs, worksheet IDs, and practical limits.
7
built.atbuilt.atRedirect: this cell contains only the destination URL.
8
google.comgoogle
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100