Your HTML. Your CSS. Live data from Airtable.
Write the markup you want and put {{ field name }} wherever a value should go. SheetRocket fills it in from your Airtable table, repeating it once per record.
How it works
Airtable to HTML in three steps
Connect your Airtable table
Sign in with Airtable or paste a personal access token, pick a base, and create an API. Copy the endpoint URL from your dashboard.
Write your template
Put your markup inside a <template data-template> tag. Use your Airtable field names as placeholders. Field names are case sensitive and can contain spaces.
<div class="products" data-sheetrocket-api="YOUR_API_URL" data-limit="12">
<div data-loading>Loading products...</div>
<div data-empty>No products yet.</div>
<template data-template>
<article class="product">
<img src="{{ Photo }}" alt="{{ Name }}">
<h2>{{ Name }}</h2>
<p>{{ Description }}</p>
<strong>{{ Price }}</strong>
</article>
</template>
</div>
Add the script
Add one script tag before the closing body tag. Every block on the page loads its own table.
<script src="https://sheetrocket.com/templates.js"></script>
What people build with Airtable and plain HTML
Your team edits Airtable. Your site stays exactly the way you designed it.
HTML template
Portfolio and case studies
Keep projects in Airtable and render them into your own hand built layout.
HTML template
Product and pricing pages
Update prices and stock in Airtable without redeploying the site.
HTML template
Event and class listings
Publish upcoming dates from an Airtable calendar table.
HTML template
Team and speaker pages
Names, roles, and photos from Airtable, styled with your CSS.
Static hosting
Static sites and landing pages
GitHub Pages, Netlify, Vercel, or any host that serves HTML.
AI sites
AI generated websites
Ask your AI tool for the layout, then swap the sample text for {{ field }} placeholders.
Building it yourself vs using SheetRocket
Rendering Airtable records into HTML is simple. Doing it safely is not.
| Situation | Without Sheetrocket | With Sheetrocket |
|---|---|---|
| Getting the data | Write a server function to call the Airtable API and hide your token. | Point the template at your SheetRocket endpoint. No server code. |
| Rendering records | Write JavaScript to loop over records and build DOM nodes. | Write normal HTML with {{ field }} placeholders. |
| Security | Remember to escape every value so a record cannot inject scripts. | Values are always inserted as text, and unsafe links are dropped. |
| Attachments | Dig the URL out of Airtable's attachment objects. | Attachment fields arrive as a plain image URL. |
Frequently asked questions
Does my Airtable token appear in the HTML?
No. The page only references your SheetRocket endpoint URL. Your token stays on SheetRocket's servers.
Can a record inject HTML or scripts into my page?
No. Values are inserted as text or attribute values, never as HTML. Links only accept http, https, mailto, tel, and relative URLs, and placeholders inside event handlers like onclick are removed.
Can I limit how many records show?
Yes. Add data-limit="6" to the container to show at most six records.
Can I style the loading and empty states?
Yes. Add elements with data-loading, data-empty, or data-error inside the container. The container also gets a data-sheetrocket-state attribute you can target in CSS.
Does this work with Google Sheets and Notion too?
Yes. The same script works with any SheetRocket API, whatever the data source.
Use Airtable as the CMS for your HTML
Free to start. One script tag. Your design stays yours.
Get your Airtable endpoint free