Merrick Christensen's Avatar
All problems in computer science can be solved by another level of indirection.Butler Lampson

Webflow Design Language

2024-11-25

I finally got the chance to talk about the core of what I've worked on at Webflow for the past 7 years. We evolved a programming language that is:

  • Projectionally edited (modify the code by directly modifying the result). Direct manipulation is at the heart of No Code.
  • Foreign function interfacing (FFI) to interoperate with JavaScript. This lets Webflow provide code that our customers can visually consume. For example, date formatting functions or other JavaScript values.
  • Host extensible type system with typed holes and inference that enables our team to provide unique custom visual editing interfaces that offer bindings out of the box with full support for type aliases that provide tailored editing experiences for the same underlying type. A good way to visualize this is a phone number editing experience being different than that of an email, but they're both ultimately strings.
  • Pure evaluation which enables many of our interactive live evaluation and debugging experiences.
  • Holes which enable us to support live editing, even if values are missing or corrupt.
  • Replaying computations without executing effects again and so much more.

Webflow Design Language is the DNA of a Webflow site and its design decisions facilitate our visual editing experience. Read about it on our engineering blog here.