Beta Release: New Designer Canvas

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! :tada:

-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! :slight_smile:

16 Likes

Great news! Can’t wait for Interactions 2.0!!!

I just tried it on a page that I’ve just built with a lot of interactions. In the preview mode, the elements that are set to “display: none” still show up instead of disappearing…

https://preview.webflow.com/preview/magicbymark?preview=376da506478463459d651106c2f4aa7e

2 Likes

Adding a name to an Interaction was acting strange, every time I added a space it told me the name was taken.

Video here of the error: Naming Interaction Weirdness

On Chrome 59
Operating system - Windows NT 10.0

@aaron - it’s very likely that bug exists even outside of the new canvas (the new canvas only touches code inside the white area, the design surface), so my hunch is that it’s not related :grimacing:

Got you! Thanks for clarifying, I’ll stick to the brief… Bugs in the Canvas! :stuck_out_tongue:

1 Like

Just tried the new Canvas:

New Canvas:

Old one:

Every components is using Flexbox

Read Only: https://preview.webflow.com/preview/apnn-3?preview=9d4009d3807a8ed3b3c0f6abf4e842f7

1 Like

Thanks @philippe! That’s related to the “empty node” outlining known issue, we’re working on it! :muscle:

2 Likes

Interactions not working in Preview mode in new Canvas, working fine in old Canvas though.

https://preview.webflow.com/preview/aarons-canvas-beta?preview=748cc98af1f5830e08d1dd72c382961c

Aaron.

2 Likes

Hi @magicmark @philippe @aaron thank you so much for reporting these issues! Thanks a million for your help! :bowing_man:

We’ve pushed a fix for each issue.

Can you please take a look on your end (after refreshing the site in the Designer) to make sure that everything is working correctly with this feature?

Thanks in advance and standing by for your confirmation.

Please be sure to send me a DM with your information (t-shirt size and address) so that we can get those Webflow swag packages sent out ;) :webflow_heart: :hugs:

2 Likes

Video Has moved up in preview mode on new canvas.

Old canvas

New canvas

Thank you so much @Andrew_Nalder could you please post or send me a Read-Only link via DM and details to your site so that I can investigate further? :bowing_man:

Here you go mate

https://preview.webflow.com/preview/clythmac-final?preview=3baaa9d0f495abea6b0f10d1d67fdb54 https://preview.webflow.com/preview/clythmac-final?preview=3baaa9d0f495abea6b0f10d1d67fdb54

1 Like

Drop downs in new canvas in preview mode after a couple of clicks end up staying down an wont close back up.
https://preview.webflow.com/preview/clythmac-final?preview=3baaa9d0f495abea6b0f10d1d67fdb541

1 Like

Hi @Andrew_Nalder it looks like the old canvas was actually rendering that video piece incorrectly and it’s rendering correctly on the new canvas, change your video settings to Relative position instead of Absolute position and that resolves the issue:

Looking into your other issue right now :bowing_man:

cool :grinning: sorted

1 Like

Hey @Waldo it works! That was a quick fix!

1 Like

I was able to reproduce this, great work and thank you so much for the report! Please be sure to DM me your details. I’ve filed a report and will let you know as soon as a fix is live. :bowing_man:

Root issue only occurs in the new canvas in Preview mode, confirmed that it works as expected on the live site though.

If you set a dropdown menu to open on hover, then set a link within it to a page and click on that link and navigate to the current link page, click on the link again and the dropdown list will remain open until you navigate to another page.

Collection category templates are acting strangely.

If I navigate directly to them in the designer, they appear just fine. If I preview the site and navigate to one using a button, I get a 404, and when I switch out of preview back into the designer, the template is gone. They reappear after I refresh.

Old canvas showing template exists.

New canvas preview after clicking on a button that navigates to a collection template page.

New canvas after switching back to designer once preview has given me a 404.

Edit for project link: https://preview.webflow.com/preview/ideliver?preview=7e24813526e8566bdf07688627821111

Rich text images are broken.

Old canvas.

New canvas.

The issue does not carry through to publishing. I re-published and the images are as they should be.

Edit for project link: https://preview.webflow.com/preview/contented-puppies-paradise?preview=7fd54a72bd232cd6d940ed5edb946447

@Cricitem We fixed that bug last night - can you see if refreshing the Designer still exhibits the same issue? :pray: