Whole Code



Reviewed July 24, 2019

Webflow is a no-code website creator, featuring 100% visual design tools, animated interactions, a fully customizable CMS, hosting and deployment, and ecommerce functionality. It's used by freelancers and agencies, in-house marketing teams, business owners, and for prototyping. What stands it apart from other website creators (Wordpress, Squarespace, etc) is that design (CSS) is fully customizable via a direct manipulation editor, akin to Photoshop. It was started in 2012 and raised an unusually large Series A of $72M in August 2019.

Product Feel

Basic Usage

In the above video, I create and narrate the beginnings of a basic webpage, including a navbar and call to action text and button. It demonstrates:

CMS Collections

Webflow's CMS (content management system) is just about as customizable as its WYSIWYG visual editor. It features a simple UI to create a schema for collections, be them products, blog posts, or a totally custom entity, and add string, text, boolean, color, etc attributes. The magic happens when you add CMS content to the page, where you can continue to leverage the fully customizability of the WYSIWYG editor. The following video demonstrates creating a new collection, adding dummy content, adding a custom boolean and color attributes, and displaying the content in the editor, where we edit it into a number of custom visual configurations, such as paginated and filtered.


The Webflow Ecommerce functionality builds on top of the CMS editor to allow products, shopping carts, and purchases. In the following video, I create a t-shirt product with size and color varients, and then customize its product page. All facets of Webflow Ecommerce are visually customizable, including the look-and-feel of the products page, shopping cart, the checkout page, and the confirmation emails sent to customers.


While Webflow's editor allows for the full range of CSS animations, it also features a series of pre-built Powerpoint-like animations, such as "spin-in" and "wiggle". Custom animations are built by interpolating attributes established at keyframes. In the following video, I demonstrate some built-in animations as well as building a custom bounce and shrink animation. Animations can be triggered on mouse or scroll events, such as clicks or mouse movements.


Webflow is constantly autosaving user work, and creates a snapshot every 20th autosave. But you can also manually create and label a snapshot. You can then preview and restore previous versions from the backups page. If you want to just regain a single element from a previous version, you can copy and paste single elements from previous versions into the current version. Below is a video from the Webflow tutorials that shows how it works:


The pricing has three tiers for basic websites ($12, $16, and $36 per month) and three tiers for Ecommerce ($29, $74, $212 per month). Agency pricing is $35 per login.


Further Reading