Webflow

This content was generated with the assistance of AI and should be verified against the official Webflow documentation before being relied on in production.

This sub-section’s Webflow bibliography lists the reference material consulted while preparing these pages.

Webflow is a hosted visual website builder: you design pages in a browser-based Designer that writes real HTML, CSS and JavaScript, you model and edit content in a built-in CMS, and Webflow publishes and hosts the result. It also has an ecommerce engine, localization, forms, an analytics and optimization add-on, AI features, and a developer platform (a REST Data API, a command-line interface, Apps, Designer Extensions, DevLink, code components, Webflow Cloud and a Model Context Protocol server) for people who want to extend or automate it. This sub-section explains all of it, from the first click in the Designer to a Node.js script that imports plants into the CMS.

Who this sub-section is for

  • Site owners and project managers choosing plans, seats and roles, and deciding what Webflow can and cannot do.

  • Designers who build layouts, design systems and animations visually and want to know the HTML and CSS behind every panel.

  • Content editors and marketers who run collections, publish and schedule content, and manage SEO, forms, redirects and localization.

  • Developers who customize sites with custom code, automate them with the Data API, build Apps and Designer Extensions, export React components with DevLink, host server code on Webflow Cloud, or use Webflow as a headless CMS.

The running example: Fernbrook Gardens

Every page uses one fictitious scenario, Fernbrook Gardens, a botanical garden whose site is built step by step. The site has Home, Visit, Plants, Events, Shop, Garden Journal, About and 404 pages and a password-protected Volunteers area. Its design system holds a brand variable collection with Day and Night modes, utility classes and the PlantCard, EventBanner and SiteHeader components. Its CMS holds Plants, Zones, Events, Journal and Staff. Operations add a group-visit enquiry form, Spanish and German locales, redirects from an old site and a seed shop. The developer work adds fernbrook-sync, a Node.js and TypeScript script (with a Python variant) that imports plants from a fictitious nursery feed, a webhook receiver, and Plant Label Kit, a Designer Extension that grows into a hybrid app. No real names, tokens or credentials appear anywhere; secrets are always placeholders.

Check date and pinned versions

Webflow is software as a service and has no version numbers, so its facts are dated: everything in this sub-section was checked against the official documentation on 2026-10-28, and plans are named by tier only (Starter, Basic, Premium, Team, Enterprise and the Ecommerce tiers) without prices. The developer examples are pinned to these versions:

Tool Version Notes

webflow-api (Node.js SDK)

3.3.4

Data API v2 client for JavaScript and TypeScript.

webflow (Python SDK)

2.0.0

The Python client of the same API, installed from PyPI.

@webflow/webflow-cli

2.15.0

Requires Node.js 22.13.0 or later.

GSAP

3.15.0

The animation library behind Interactions with GSAP and custom animation code.

Product Changes and Deprecations explains how to follow what has changed since the check date.

Which pages should I read?

If you want to …​ Read

Build a site visually

Introduction and Architecture, First Site and the Dashboard, Designer Tour, then the Designing pages from HTML and CSS in Webflow to Images and Assets, and the design system pages

Run content and a publishing workflow

CMS Concepts and Content Modeling, Collections and Field Types, Content Editing on the Canvas, Publishing and Scheduling, Forms, SEO and AEO and Localization

Add motion

Interactions with GSAP, Scroll and Page Animations and Classic Interactions

Customize with code

Custom Code: Head, Footer and Embeds, Custom Attributes and JavaScript, Third-party Libraries and Scripts and Code Export and Portability

Automate with the API

Developer Platform Overview, Webflow CLI, Data API Authentication and Scopes, Data API: CMS and Webhooks

Build apps and integrations

Apps Overview and OAuth, Designer Extensions and the Designer API, Hybrid Apps and Publishing Apps and the Marketplace

Go headless or host server code

Content Delivery API and Headless, DevLink Export, Code Components and Webflow Cloud

Connect AI agents

Webflow MCP Server and AI Agents and AI Features and Credits

Decide whether Webflow fits

Comparison and Decision Guide

Check what an older book or tutorial got wrong

Where Older Books and Tutorials Are Outdated

Get a one-page printable summary

Cheat Sheet (PDF)

flowchart LR SITE["Fernbrook Gardens site"] --> DES["Designer: layout, styles, components"] SITE --> CMS["CMS: Plants, Zones, Events, Journal"] DES --> INT["Interactions with GSAP"] CMS --> OPS["Forms, SEO, localization, redirects"] SITE --> API["Data API, CLI, webhooks"] API --> APPS["Apps and Designer Extensions"] API --> HEAD["Headless front end"] HEAD --> CLOUD["Webflow Cloud app"] API --> MCP["MCP server and AI agents"]

What’s covered

Getting Started

What Webflow is, how its plans and seats work, what changed over time, and a first site.

Design Systems

Variables and modes, components with properties, slots and variants, shared libraries, and a complete design system.

Interactions

Interactions with GSAP, scroll and page animations, Classic Interactions, and Lottie, Spline, Rive and video.

CMS

Content modeling, Collections and their 16 field types, references, Collection lists, template pages, conditional visibility, CSV and limits.

Content and Publishing

Editing on the canvas, publishing and scheduling, page branching, releases and approvals, comments and the activity log.

Site Settings and Operations

Forms, SEO and AEO, redirects, domains and hosting, backups, protection and search, accessibility, performance and localization.

Commerce, Growth and AI

Ecommerce, Analyze and Optimize, integrations and marketplace apps, AI features and credits.

Custom Code

Head, footer and embeds, custom attributes and JavaScript, third-party libraries, reverse proxies and code export.

Apps and Extensions

Apps and OAuth, Designer Extensions and the Designer API, hybrid apps, and publishing to the Marketplace.

Reference

Outdated advice, the comparison and decision guide, and the cheat sheet.

Page Why it relates

CMS (Content Management System)

The parent section: traditional, headless and hybrid CMS architectures and open source versus SaaS delivery.

HTML & CSS

Webflow generates HTML and CSS; the Designer pages link here for what each property means.

Web Accessibility

The accessibility rules that the Designer’s alt text, headings and Audit panel help you meet.

Media Optimization (Web)

Image and video optimization beyond what Webflow does on upload.

React

The library behind DevLink components and code components.

Next.js

The framework used for headless front ends and Webflow Cloud apps.

jQuery

Webflow ships jQuery on published sites, which custom scripts can use.

CORS

Why browser code cannot call the Data API directly and a server is needed.

E2E Testing

Playwright checks against a staging site.

OAuth

The protocol behind Webflow Apps and the Data API authorization flow.

MCP

The Model Context Protocol itself, behind the Webflow MCP server.

Cloud

Background on cloud platforms and edge runtimes, relevant to Webflow Cloud.

Web Frameworks Comparison

Code frameworks, which exclude CMSs; the decision guide here links to it.

Backend Frameworks Comparison

Server frameworks for the custom back ends that integrations need.

E-commerce

Shopify, PrestaShop, Magento and WooCommerce, to compare with Webflow Ecommerce.

Documentation Tools

Tools for documenting a Webflow-based project as code.

Bibliography

Every source below is the official site, repository, standard or documentation page of the product, library or service it supports, and each entry links to it. The links were collected on 2026-10-28 from the == References section of every page in this sub-section, where each page lists the exact pages its facts and examples derive from. Webflow publishes no version numbers, so its sources are dated rather than versioned, and its documentation changes often: open an entry and confirm its content, plan names and limits before you rely on it. Where this bibliography and a page’s own == References section appear to disagree, the official documentation linked from the page wins.

Book

Webflow: official sites

Webflow: developer documentation

Developer documentation: Data API v2 (guides and reference)

Developer documentation: llms.txt

Webflow: Help Center articles

Webflow: product updates

Webflow: blog, features and other pages on webflow.com