Embed live Google Sheet data in any HTML website
Two lines of code. Works on static sites, AI generated websites, GitHub Pages, and any plain HTML page. Your sheet updates. Your site updates automatically.
Live demo
This widget is powered by a real Google Sheet
The menu below comes live from a Google Sheet. Paste the embed code into any HTML file and it works immediately.
<div data-sheetrocket="cmt7a2ijb000cd8xez5dsseav" data-widget="menu-widget"> </div> <script src="https://sheetrocket.com/catalog-widget.js" async> </script>
How it works
Three steps to add live data to HTML
Connect your Google Sheet
Paste your Google Sheet URL in SheetRocket. Share the sheet with our service account or connect through Google OAuth. Your column headers become field labels automatically.
Get your embed code
Pick a template and customize colors, layout, and which columns appear where. Copy the two line embed code from SheetRocket.
Add two lines to your HTML
Paste the SheetRocket div and script tag into your HTML file. Publish or upload your page. The widget loads live data from your sheet automatically.
<!DOCTYPE html>
<html>
<head>
<title>My Restaurant Menu</title>
<meta name="viewport"
content="width=device-width,
initial-scale=1">
</head>
<body>
<h1>Our Menu</h1>
<!-- SheetRocket widget -->
<div
data-sheetrocket="your-sheet-id"
data-template="menu-widget"
data-theme="light"
data-columns="3">
</div>
<script
src="https://sheetrocket.com/widget.js"
async>
</script>
</body>
</html>Built your site with AI?
If you used Cursor, v0, Bolt, Lovable, or Framer AI to generate your website you still need a way to add live updatable content. SheetRocket is the missing data layer for AI generated sites.
- Cursor generated a restaurant site
Add a live menu with SheetRocket - v0 generated a SaaS landing page
Add a live pricing table from a sheet - Bolt generated a portfolio
Add a live project gallery from a sheet
Popular use cases
Static site built with plain HTML
Add a live menu, product grid, or data table to any hand coded HTML site without a backend.
GitHub Pages or Netlify site
Pure client side JavaScript works on static hosting. No server configuration required.
AI generated website needing live data
Cursor, v0, and Bolt generate the design. SheetRocket provides the live updatable data layer.
Single page app needing a data table
Embed a searchable, filterable table from your Google Sheet without building an API integration.
Portfolio site with filterable projects
Manage projects in a sheet. Visitors browse and filter on your site automatically.
Landing page with live pricing table
Update pricing in your spreadsheet. Your landing page reflects changes instantly.
Frequently asked questions
Does this work with GitHub Pages?
Yes. SheetRocket widgets are pure client side JavaScript. They work on any hosting including GitHub Pages, Netlify, Vercel static exports, Cloudflare Pages, and any HTML file you open in a browser.
Will it work with sites built using AI tools like Cursor or v0?
Yes. This is one of the most common use cases. AI tools generate the HTML and CSS. SheetRocket provides the live data layer. Paste the two lines of embed code into the generated HTML and your site has live Google Sheet data.
Do I need a server or backend?
No. SheetRocket handles the backend. Your HTML page calls our widget script which fetches data from your Google Sheet and renders it. No server setup, no API keys in your HTML, no backend code.
Can I use this with a Content Security Policy?
Add sheetrocket.com to your script src and connect src in your CSP. Contact us if you need help with your specific CSP configuration.
Does the widget work without JavaScript?
The widget requires JavaScript to render. For users with JavaScript disabled the div shows nothing. If you need server side rendering use our REST API to fetch data in your build process instead.
Related guides
Add live Google Sheet data to any HTML page
Free to start. Two lines of code. Works on static sites, GitHub Pages, and AI generated websites.
Free plan available · No credit card required