This month, we’re rolling out Variables, a powerful feature that acts as the backbone of your design system, along with a new UI flow for Interactions.
A variable is a named value that can be reused throughout your project and managed from one place. Change the value once, and it updates everywhere that variable is used, making your workflow much, much more efficient. Check out our guide for setting up and managing variables.
Currently, we support three types of variables:
The best part? Variables can work with Interactions. This means you can set a variable as a target and trigger a new value as the outcome, opening up all kinds of creative possibilities, such as showcasing different product versions or creating light/dark mode for your site.
We’ve also revamped the Interactions UI to improve readability and cut down on extra clicks.
Give these updates a try and see what you can create with them. 🙌
This month’s updates bring major upgrades: “Fluid Breakpoints”, “Auto Constraints”, updates on the top right panel, and a new edit mode for main components.
In Vev, we use "fixed-width" breakpoints by default, meaning your design would snap at specific screen widths—and the jumpy transition may feel abrupt in some cases.
With “Fluid Breakpoints”, you now have the option to let your design scale smoothly within a breakpoint range. Instead of those sharp transitions, content resizes proportionally as screen width changes. Plus, you can design across the full canvas width without being confined to the safe zone.
Constraints manage how elements behave when their container resizes, keeping everything anchored and scaling smoothly across devices. While this process used to be automatic, you can now turn off "Auto Constraints" in the right-side style panel, giving you full control to set constraints manually without automatic adjustments.
We’ve added a new heading at the top of the right panel that instantly tells you the type of element you’re working on. For example, if you’re editing a section, the heading will display 'Section'. Clicking this heading also unlocks quick access to the context menu, the same one you’d normally get by right-clicking on the canvas.
Main components are the backbone of Vev’s scalability—these reusable frames or sections ensure your designs stay consistent across your project. With the new “Edit Mode”, you now get a dedicated space away from the page you are working on to tweak main components.
On a slightly bittersweet note, with every new chapter comes a farewell to some old friends. 🥹
Animated words, Animated letters, Animated words advanced, and Animated letters advanced are officially retiring and won’t be popping up in the Add menu anymore. But don’t worry—if you’ve already used them in your projects, they’ll still be available for access. That said, we’re no longer supporting them as we shift gears to focus on building even more cool features for all of you.
Exciting news—we’ve just released Multi-Account support to make switching between different accounts a breeze, plus rolling out beta access to Variables and Scrolling Slides.
Let’s find out more!
Multi-Account is finally here, making collaboration across multiple Vev accounts possible—perfect for freelancers and agencies. Now you’ll see account-specific avatar in your dashboard, making it easier to know exactly where you are and switch between accounts. Plus, drafts and recent dashboards are tied to each account, keeping everything even more organized. (Tip: Be sure to get an invite from the account admin to have it show up in your menu.)
We’re thrilled to introduce Variables, a handy feature that lets you define reusable values for things like colors, typography, spacing, and sizes—all in one place. When you update a variable, it instantly updates everywhere you’ve used it in your project. It’s currently in closed beta, so if you’re interested in giving it a spin, just leave a comment on our community post to get access.
Introducing Scrolling Slides—a new, experimental component that progresses through slides as you scroll. One of the prime use cases that this component is designed to support is horizontal-scrolling.
How to access:
Open the public project below, and you will find the component that you can copy and paste into one of your projects. Along with a brief introduction on the first page, you will find examples of how the component can be used on the second page.
It's a wrap! We've successfully closed Q1 in Vev. This month, we've introduced several updates to the Design Editor, including improved Main Components and a new feature named Scroll Snap.
Additionally, our CLI has become more robust as we phase out The Code Editor. Let’s take a look!
Hope you're all having a great start to 2024. 🥳 Here at Vev, we've been working hard to release some small but mighty features.
Special thanks to our community member Nico for suggesting this! 😘
(Note: These improvements have been developed to replace the “tag” filtering for a smoother project discovery experience.)
Lastly, we’re sorry that some of you had to experience challenges regarding the sticky position after our latest roll out.
The issue was quickly rectified, but we sincerely thank you for your patience and understanding on this one! We want to be transparent on issues such as these as your trust in us means everything to us!
Add-Menu is a feature you all love and use in your project almost daily. What if it's become even easier to browse, add, and swap components?
The "All-New Add-Menu" is now available for beta access. 🎉
🏃🏾♂️🏃🏾♂️🏃🏾♂️Head over to your Vev profile and turn on the toggle under Experimental Features.
Pro & Org users can now access advanced SEO settings. 🎉
Features:
Think you've seen it all in no-code web building? Head over to your Vev profile and turn on the toggle under Experimental Features to meet this power duo. 🚀
Meet Interactions
Meet Slider
At Vev, we're not just focused on rolling out shiny new features—we also make sure to keep our dev team well-caffeinated to ensure that what you love about Vev remains steady and consistent. 🫡
That said, here are some of our recent improvements and resolved bugs. 🤩
schemaOpen
option to use the useEditorState
hook, which enables the widget to determine if the form is open.