Power a Webflow site from a Google Sheet

Where Webflow CMS runs out of room

Webflow CMS is perfect for the content you author inside Webflow, but it strains the moment the data lives elsewhere — a pricing grid finance owns, an inventory list that changes hourly, a directory a non-Webflow teammate maintains. Item limits, manual re-imports, and one-editor-at-a-time workflows start to hurt.

A Google Sheet sidesteps all of that: anyone can edit it, it updates instantly, and it is already where the data lives. PasteSheet puts a fast, cached JSON API in front of that sheet, so a small script in a Webflow Embed element fetches the rows and renders them into your page — no plugin, no Zapier sync into the CMS.

What to drive from the sheet

Anything that is really a table and changes more often than you want to re-import:

• Dynamic directories and job boards that update daily.
• Product catalogs, pricing tables, and listings.
• Team bios, testimonials, and event schedules.
• Any feed a non-technical teammate should own without a Webflow seat.

Fetch and render in a Webflow embed

Drop an Embed element where the list should render, then fetch your endpoint and build the markup. Filter, sort, and paginate with URL parameters — no query language:

<div id="listings"></div>
<script>
  fetch("https://pastesheet.com/your-endpoint/Listings?status=live&sort=-date")
    .then((r) => r.json())
    .then(({ data }) => {
      document.getElementById("listings").innerHTML = data
        .map((row) => `<a class="card" href="${row.url}">${row.title}</a>`)
        .join("");
    });
</script>

Setting it up end to end

From spreadsheet to rendered Webflow section:

1. 1 Choose the source path. Share the sheet as Anyone with the link for a public source, or connect Google and choose the exact restricted sheet in Picker.
2. 2 Paste the public URL, or finish the Picker flow. Tabs and columns are read immediately, and each column gets an inferred type and a clean alias — so a header like Job Title (public) can be queried as job_title.
3. 3 Copy the endpoint URL and test it in a browser tab. If you see JSON, Webflow will too.
4. 4 In the Webflow Designer, drop an Embed element where the list belongs and paste the fetch script.
5. 5 Style one card in Webflow, copy its class names into your template string, and publish.

Webflow CMS or a live sheet?

Use Webflow CMS when the content is marketing copy you author in Webflow, needs its own indexable URL per item, or has to be editable in the Designer. Blog posts and case studies belong there.

Use a live sheet when the data is genuinely tabular, changes faster than you want to re-import, or is owned by someone who should not need a Webflow seat. Inventory, pricing, schedules, and directories fit here.

One caveat worth stating plainly, because it decides the choice more often than any feature: an Embed renders client-side, so its rows are not part of the page HTML that search engines index first. For a listings section inside an already-indexed page, that is fine. If each row needs to rank as its own page, that is a CMS job, and no amount of fetching changes it.

Things that trip people up

• Testing on the Designer preview. Embed scripts do not execute in the Designer canvas — publish to a staging domain to see the list render.
• Header rows with formatting. Merged cells and a decorative title row above the headers confuse column detection. Keep row 1 as plain headers.
• Trailing blank rows. A sheet someone has scrolled through can carry hundreds of empty rows; filter them out or delete them so the count in your UI is honest.
• Forgetting the tab name. Without one you get the first tab. Append /TabName to read a specific tab.
• Rendering before styling. Style a single card in Webflow first, then copy its generated class names into the template string — reverse order means rewriting the script.
• Private endpoint keys. A client-side embed cannot safely hide a bearer key. Keep a private endpoint server-side, or use a public endpoint only when you intend the returned data to be public.

What about Gmail, Slack, and Webflow together?

People searching for Webflow plus Google Sheets plus Gmail or Slack are usually after an automation — a form submission that lands in a sheet and pings a channel. That is a different job, and Zapier or Make does it well; PasteSheet has no triggers and sends no notifications.

The two pair cleanly though: let an automation tool write rows into the sheet, and let PasteSheet read that same sheet into your Webflow page. See using a sheet API with Zapier and Make for where the line sits.

Safe to expose on a public page

Because the endpoint is read-only by design, it is safe to expose publicly or hand to a teammate: consumers can read and query the data but can never change the sheet. And there is no Google Cloud project, OAuth screen, or service account to set up — you paste a share URL and get a live API.

What it costs

Frequently asked questions

Sources

• Usage limits — Google Sheets API — Google

Related use cases