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.

1. Variables

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:

• Number (with units like px, %, or vw)
• Font family
• Color HEX codes

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.

2. Interactions UI Update

We’ve also revamped the Interactions UI to improve readability and cut down on extra clicks.

• New List View: Quickly see the trigger, target, and action at a glance, without diving into each Interaction.
• Inline Interaction Form: Interaction settings are now embedded in the right panel, keeping your canvas clutter-free.
• Reworked Flow: Set your trigger, then select the action before choosing a target. It’s faster and more intuitive.

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.

1. Fluid Breakpoints

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.

2. Auto Constraints

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.

3. Top Right Style Panel Update

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.

4. Main Components Edit Mode

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

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.)

Variables (Beta)

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.

Scrolling Slides (Beta)

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!

Design Editor

• Main Components: We've made improvements to "Main Components". These include better stability, on-canvas editing, and a simplified context menu. Want to give it a whirl? Read more here to learn how you can create a component that can be reused across your projects.

• Scroll Snap: Meet “Scroll Snap”—a native CSS feature designed to enhance your project's scrolling experience. Activate it in Page Settings to apply it across the entire page. With this feature, your sections will effortlessly 'snap' into alignment when scrolling without any mid-scroll stops. (Note: This update begins our transition away from the beloved 'Snap to' addon.)

CLI (Command-Line Interface)

• CLI Update: Our CLI now supports "Interactions and Events." This feature enables dynamic communication between components, allowing them to both respond to and initiate events with each other. You can read more about it here. 🫡

Code Editor

• Code Editor Read-Only Access: As many of you know, we've been gradually phasing out the Code Editor with the introduction of the CLI to support much more robust possibilities. Within the next few weeks, read-only access will be enabled for your widgets, meaning you will no longer be able to edit the ones you have but can still use them. To jump on our new ship, check our Dev docs or join Code Talk in our community.

Bug Fixes

• Fixed an issue preventing template preview from the dashboard.
• Fixed an issue with certain font families not functioning correctly.
• Fixed an issue that restricted scrolling through layers in the Slider when a large number of slides were added.
• Improved the Interactions by making arrows light-up when hovered over in the right side panel for better clarity in editing.

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.

Pricing Changes

• As part of our ongoing effort to refine pricing and support our product strategy, ZIP download with assets has been moved to the Organization plan. This ZIP option enables you to create offline projects and host Vev projects on your own servers. ZIP download without assets (where we host the assets for you) remains available on the Professional plan.
  ​
• "Advanced hosting" is now exclusive to the Professional and Organization plans, while Standard Hosting continues to be accessible across all plans, including the Starter plan. If you’ve already used the Advanced Hosting on the starter plan, you can still access the hosting settings and its content, but no longer re-publish or connect the hosting to a new project.

Design Editor

• Improved differentiation between visible and hidden layers by graying out the hidden layers.
  ​
• Added additional settings to the Image/Background Image editors to make working with scrollytelling and parallax images easier by enabling the setting of focal point position and zoom with numerical input.

Special thanks to our community member Nico for suggesting this! 😘

Project Search, Template, & User Management

• Introduced “caching” to the project filtering options, meaning the option you’ve chosen previously will be remembered.
  ​
• You can also now sort your projects either in ascending or descending order.

(Note: These improvements have been developed to replace the “tag” filtering for a smoother project discovery experience.)

• Implemented a restriction to only allow the creation of projects based on templates marked as "Ready.", to allow for more a reliable workflow within your account.
  ​
• You can now autonomously delete your own user profile… But hey, before you go, can we just say how much we'll miss you? 😿
  ​

Code Editor Deprecation

• As we're slowly starting to deprecate the Code Editor, you no longer will be able to create new widgets using the Code Editor. But not to worry—you can still manage the ones you've already created for a little while longer. For new widgets, please use our Command Line Interface (CLI).
  ​
  ​Learn how to get started with the CLI here: https://developer.vev.design/docs/cli/

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. 🎉

Here is what's changed:

• The "+" icon can now be accessed from the new left panel.
• All components can be found here, whilst addons (e.g. animations) can be found from the right-hand style panel in the "Addons / Interactions" tab.

🏃🏾‍♂️🏃🏾‍♂️🏃🏾‍♂️Head over to your Vev profile and turn on the toggle under Experimental Features.

Pro & Org users can now access advanced SEO settings. 🎉

Features:

• Robots.txt: Gain control over which pages are indexed by search engines with our new robots.txt settings.
• Editable Sitemap.xml: Manually adjust your sitemap.xml for better management of how search engines crawl and index your site's content.
• Advanced HTTP Headers: Define specific headers for improved cache control, domain verification, and to establish network rules. Recommended for use with a developer.

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

• Trigger: Select an object that will trigger actions.
• Target: Choose where actions occur (like a frame or an image).
• Action: Decide what happens upon activation (show/hide or next slide).

Meet Slider

• Drop in ANY design element (from 3D files to full frames).
• Forget fixed arrows; customize navigation YOUR way with Interactions.

Create Template from Page

• Pro and Org users can now create a template from a project page.

Improved “Change Teams” UI

• Enhanced dashboard UI for easier switching between teams.
• New "Bookmark" feature to mark preferred teams for swift access (for Org users).

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. 🤩

Improvements

• The pre-render step for "publish" has been improved by a whopping x10 in speed.
• The loading speed of the "Create project" feature has been improved, so you can create even faster.
• The embed.js file has now been included in the zip download, allowing you to do offline or self-hosted embedding of Vev content.
• The CLI has added the schemaOpen option to use the useEditorState hook, which enables the widget to determine if the form is open.
• Published projects now have improved performance for animation and show/hide triggers.
• For the labled image, we've added a "%" symbol to the title of X and Y fields, so you know if it's in %, and not pixels.

Bug fixes

• Fixed the issue where the editor would sometimes crash when elements were moved between frames/sections (holding cmd/ctrl when dragging).
• Fixed the issue with uploading the access key to S3 hosting.
• Fixed the problem with pinch zoom on canvas zooming the browser window. No more zooming out to infinity and beyond.
• Made some minor stability fixes to the editor, so it won't crash when addons fail to save.
• Fixed the issue where the publish destination path didn't use both team and core hosting settings.
• Fixed the bug with incorrect line-breaks of words in table cells.
• Fixed the bug with the Burger Menu not always directing to the correct location.
• Fixed the issue with double $$ on Vev site appearing as $.