Hey everyone,
We are very excited to announce the beta release of the new Webflow Designer Canvas! By “canvas”, we mean the main design area that represents the website/webpage you’re creating - or everything you see in the yellow box:
This new canvas will allow us to build and deliver new features faster, and has been in the works for quite some time, so we are very excited to share it with you! In fact, it’s a major pre-requisite for some very popular features that are right around the corner - including Site Search and Interactions 2.0 - so we want to have high confidence that it works as expected across many types of sites.
We’ve done a lot of testing of the new canvas internally, but there’s only a handful of us - so odds are we missed something.
So now we need your help! We need this awesome community to help us battle test the new canvas before enabling it across the board for everyone, and we’re hoping many of you can pitch in!
How to enable the new canvas
You can enable the new canvas by loading the Designer with ?ac
added to the Designer URL. For example, if your usual URL is https://webflow.com/design/my-site
(where my-site
is the subdomain of the project you’re working on), you can enable the new canvas by loading it like this:
https://webflow.com/design/my-site?ac
(notice the added ?ac
at the end)
Once activated, you will see a notification on the upper right corner that confirms the new canvas has been activated.
After the Designer loads, you can continue designing as usual, and report anything that does not seem right (or behaves differently from the existing canvas, which you can try out by removing the ?ac
URL parameter).
How is this different to the previous canvas?
The new canvas should behave like the previous one, and it should render your site as usual. If you see anything different, please let us know.
Is it safe to work on a live project in the new canvas?
Yes. While this new canvas is in BETA, we’ve already been using it to design webflow.com
, help.webflow.com
, and other large Webflow projects.
For your peace of mind, however, you can save a dedicated version/backup before starting testing by pressing the Cmd+Shift+S
or Ctrl+Shift+S
keyboard shortcut and adding a name (e.g. “Before New Canvas Testing”) - that way if anything at all glitches out, you can restore the older version and go back to using the existing non-beta canvas. Any changes made with the new canvas will still be accessible in the old one, and vice versa - the saved data is compatible across both versions.
Are there any special areas that I should pay attention to?
We’re glad you asked! The more canvas-related functionality we can cover, the better - including:
- Switching to preview mode, and navigating around there
- Editing text on the page (including basic text like Paragraphs as well as Rich Text blocks)
- Working with symbols
- Resizing images
- Working with dynamic collection lists
- Working on dynamic collection pages
- Working with pseudo states (like Hover, Active, Pressed, etc)
- Working with all the different Webflow components (Navbars, Sliders, Dropdowns, etc), in both design and preview mode
- Using Interactions 1.0
In a nutshell, we want to make sure the canvas behaves exactly as before - in both design and preview modes - so what you’re looking for are obvious differences from the non-?ac
version of the canvas.
Are there any known issues that I should not report?
Yes, there are a few we’re aware of:
- Performance will be slightly slower on the new canvas in some cases, and especially on large sites. This is temporary, as we are currently running two canvases side by side (and comparing the output) - and performance will get faster as we fine tune the new code and completely remove the older code.
- When editing text inside of a symbol or a dynamic collection item, the new canvas will no longer mirror every keystroke to all instances of that symbol or dynamic instance. Instead, when you click out of text editing mode, the new edited text will update across all instances.
- “Empty node” outlining might behave slightly differently for elements that have custom width/height/background styling in the StyleTab. We’re still working on fine-tuning this part of the new canvas.
How can I report issues with the new canvas?
You can just reply to this topic, where our engineering team will be following along. If possible, please include a description, screenshot (or video recording!), and a read-only link to your site.
Thank you for your help, and happy designing!
-Vlad
P.S. For everyone that finds, documents, and reports a meaningful new canvas bug on this thread, we’ll send you a lovely Webflow swag package as a thank you!