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 |
|---|---|---|
|
3.3.4 |
Data API v2 client for JavaScript and TypeScript. |
|
2.0.0 |
The Python client of the same API, installed from PyPI. |
|
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?
What’s covered
Getting Started
What Webflow is, how its plans and seats work, what changed over time, and a first site.
Designing
How Designer actions become HTML and CSS: elements, the Style panel, classes, layout, typography, backgrounds, responsive design and images.
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.
Data API and Headless
The developer platform, the CLI, the Data API v2 (authentication, SDKs, sites, CMS, assets, ecommerce), webhooks and headless delivery.
Apps and Extensions
Apps and OAuth, Designer Extensions and the Designer API, hybrid apps, and publishing to the Marketplace.
DevLink, Cloud and Agents
DevLink export, code components, Webflow Cloud and its storage, the MCP server, enterprise governance and testing.
Related material on this site
| Page | Why it relates |
|---|---|
The parent section: traditional, headless and hybrid CMS architectures and open source versus SaaS delivery. |
|
Webflow generates HTML and CSS; the Designer pages link here for what each property means. |
|
The accessibility rules that the Designer’s alt text, headings and Audit panel help you meet. |
|
Image and video optimization beyond what Webflow does on upload. |
|
The library behind DevLink components and code components. |
|
The framework used for headless front ends and Webflow Cloud apps. |
|
Webflow ships jQuery on published sites, which custom scripts can use. |
|
Why browser code cannot call the Data API directly and a server is needed. |
|
Playwright checks against a staging site. |
|
The protocol behind Webflow Apps and the Data API authorization flow. |
|
The Model Context Protocol itself, behind the Webflow MCP server. |
|
Background on cloud platforms and edge runtimes, relevant to Webflow Cloud. |
|
Code frameworks, which exclude CMSs; the decision guide here links to it. |
|
Server frameworks for the custom back ends that integrations need. |
|
Shopify, PrestaShop, Magento and WooCommerce, to compare with Webflow Ecommerce. |
|
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
-
Ali Rushdan Tariq, Webflow by Example: Design, build, and publish modern websites without writing code (Packt Publishing, 2021), ISBN 978-1-80107-539-8 (print): Packt product page. Companion code repository: PacktPublishing/Webflow-by-Example. The book was used to compare teaching order and workflows only; it predates 2022, and Where Older Books and Tutorials Are Outdated lists every point on which current documentation differs. No text or figure is copied from it.
Webflow: official sites
-
webflow.com — the product site.
-
Webflow Help Center — user documentation for the Designer, CMS, Editor, hosting, plans, workspaces and seats.
-
Webflow developer documentation — Data API, CLI, Apps, DevLink, code components, Webflow Cloud and MCP.
-
Webflow University — lessons and the glossary.
-
Webflow updates — the product changelog.
-
Webflow blog — official announcements.
Webflow: developer documentation
Developer documentation: DevLink
Developer documentation: browser
Webflow: Help Center articles
-
Get contextual help using Webflow with the Webflow AI Assistant
-
Webflow Help Center: Get page-level insights with Analyze mode
-
Webflow Help Center: Analyze and Optimize compliance with privacy laws
-
Webflow Help Center: Interactions with GSAP vs. Classic Interactions
-
Webflow Help Center: Create and manage Interactions with GSAP
-
Webflow Help Center: Updated pricing and simplified plans for May 2026
-
Webflow Help Center: Control the look of social shares with Open Graph
-
Webflow Help Center: What’s the difference between the legacy Editor and content editing in Webflow?
-
Webflow Help Center: How do I import content into the Webflow CMS?
-
Webflow Help Center: Customize the shopping cart and checkout experience
-
Webflow Help Center: Configure shipping methods for different shipping zones
-
Webflow Help Center: Password protect your site or web pages
-
Webflow Help Center: How do I connect my Webflow site to Google Analytics?
-
Webflow Help Center: Triggers, targets, actions, and animations overview
-
Webflow Help Center: Actions and animations in Interactions with GSAP
-
Webflow Help Center: FOUC prevention for Interactions with GSAP
-
Webflow Help Center: Embed Lottie animations in Classic Interactions
-
Webflow Help Center: Using Lottie actions in Interactions with GSAP
-
Webflow Help Center: Add a Spline scene to your Webflow site
-
Webflow Help Center: Control Rive animations with Interactions with GSAP
-
Webflow Help Center: How do I publish or unpublish a Webflow site?
-
Webflow Help Center: Triggers and animations in Classic Interactions
-
Webflow Help Center: Control the look of social shares with Open Graph
-
Webflow Help Center: Add schema markup in Webflow to improve SEO and AEO
-
Webflow Help Center: Integrate Adobe Fonts into a specific site
Webflow: product updates
-
Webflow updates: Improve accessibility with more control over image alt tags
-
Webflow updates: Smooth scroll setting will soon respect user preferences
-
Webflow updates: Fill text with gradients, images and overlays with background clipping
-
Webflow updates: Introducing Webflow interactions powered by GSAP
-
Webflow updates: CSV import now supports reference and multi-reference fields
-
Webflow updates: New action types in Interactions with GSAP, Lottie and Set
-
Webflow updates: Animate variables using Interactions with GSAP
-
Webflow updates: Manipulate Rive animations using Interactions with GSAP
-
Webflow updates: Mouse move animations using Interactions with GSAP
-
Webflow updates: Real-time collaboration comes to Page Branching
-
Webflow updates: Scheduled publishing for collection items is now in beta
-
Webflow updates: Shared Libraries now include assets and variable modes
-
Webflow updates: Simplify brand governance with bulk Library updates
Webflow: blog, features and other pages on webflow.com
-
Webflow Blog: Embracing more composability with component slots
-
Webflow blog: How to add reCAPTCHA spam protection to Webflow forms
-
Webflow blog: Unlock GSAP-powered motion, visually in Webflow
-
Webflow blog: The biggest announcements from Webflow Conf 2026
-
Webflow: Most commonly used elements now keyboard and screen reader accessible