Release notes

September 27, 2021

v2.3 Beta

What's new

CSS Classes
The long-awaited CSS classes are here! You can now create, reuse and link classes to elements.

Classes are defined on the project level and they can be seen in the CSS Classes Panel.
Every project comes with three default classes that are linked by default to the elements corresponding to the names of the classes. You cannot delete or rename them, but you can edit the styles from the panel.
imageIn the Inspector Panel you can create new classes or link existing classes to the selected element. When you create a new class the styles of the selected element are automatically moved from the node to the class.
You can edit the class styles from the Edit Class Panel as you would in the Advanced Inspector. Another way to edit is by setting styles on the selected element in the Visual Inspector and pressing Extract new styles in the Edit Class Panel.
image
Learn moreCollaborator Roles
Project owners can set roles for the collaborators to either Editor or Viewer. Editors can do everything the owner can except delete the project, and viewers can see all the project content but cannot modify anything.

In addition, there are also three new project access types: Restricted, Can view and Can clone. While restricted projects can only be accessed by collaborators, public projects (with access type Can view or Can clone) can be viewed by anyone with a link.
image
Learn more Anonymous Sessions
You can now share your projects and get feedback on your work in progress with people who don't have an account yet.
Better yet, if you choose so, they can even make a clone of your project and take the platform for a spin before signing up.
imageGradients Editor
Discover the new Background section from the Visual Inspector. Now you can choose to add backgrounds of type color, gradient or image.

We also support multiple background images. You can add both images and gradients and reorder them. When clicking on the preview box, a panel with advanced options will appear. For images you can change the size, position or repeat properties, and for gradients you can edit the colors, opacity, rotation and gradient type.
image

Improvements & Fixes

• Improved validation and keyboard shortcuts for link panel
• Media Query indicator is more visible
• Show styles for the selected state in Advanced Inspector
• Fixed changing project slug redirecting to Not Found page
• Fixed selecting children of hidden elements
• Fixed id attribute validation
• Fixed autocomplete input dropdown overflow

What's coming next

• Team accounts
• HTML & CSS code generators
• Map your own domain
• Import from Figma
made-with-teleport