Many of you would agree that one of Vev’s superpowers lies in the variety of pre-built components on offer. Now, we’re happy to announce that some of these components have gotten a major upgrade using the CLI. 🫡 For our developer community, the CLI may be a familiar framework that you’ve been already using to create bespoke React components.

So, what does it mean to you in your day-to-day experience in Vev? Let’s find out.

1. YouTube, Vimeo & HTML Audio

Our media components are now compatible with Interactions, meaning you can integrate these components with any other elements in the canvas to play, pause, or end interactions.

2. Lottie Animation

We have expanded our support to include the .dotLottie file format, along with the ability to integrate it with Interactions. This opens up new possibilities to play, pause, end, or loop animations.

3. 3D Object

You can now adjust the speed and direction of auto-rotate, customize the initial view, and modify light and animation settings. With Interactions, these 3D objects can interact with an element/frame using the "On hotspot clicked" trigger or "Focus hotspot" action.

4. Embed Anything

When embedding Vev content into a smaller section than the content itself, a scrollbar will now be automatically added for a better experience.

5. Google Maps

You can now write and search for the address to display, set the initial zoom level, and choose the type of map (roadmap or satellite).

5. Number Counter

Paired with Interactions, the Number Counter now offers “On end” as a trigger option to start, stop, reset and continue, or reset and stop. We've also added advanced settings that allow you to customize digit separators, select animation easing, determine number formatting based on user location, and specify a number's prefix and postfix.

We have also updated several other components using our CLI, relocating the settings to the right side of the panel for easier interaction. For you developers out there, all of our upgraded components are available on Github—for you to copy, fork and make your own versions of.

We can't wait to hear your feedback and hope these improvements inspire even greater creativity! 🫶

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? Many of you have experienced this as beta users, and we're thrilled to announce that the all new Add-Menu is now available to everyone. Let’s find out what’s changed. 🫡

New UI & UX: Streamlined Navigation

With this update, we've reimagined the accessibility of our Add-Menu. The Add-Menu has now moved from the top bar to a new, more intuitive location in the far left corner, along with the Image, Video and Shape library. We thought this relocation would not only optimize your workspace but also align with natural navigation patterns.

Easily Browse and Swap Assets

Previously, browsing and switching between videos, images, and shapes required opening the Add-Menu modal directly over your canvas. Now, with the menu integrated to the left side as part of the asset library, swapping assets is more intuitive and significantly faster.

Setting Up for Future Updates

You’ll be happy to know that we’re just scratching the surface with this update. It lays the essential foundation for exciting developments planned for later this year. As a teaser, we've been hard at work behind the scenes to introduce Variables, Libraries, States, and Variants into Main components—all of which will be seamlessly accessible through the new Add-Menu library.

As always, we'd love to hear your feedback. Please feel free to reach out to us at hello@vev.design or join our community. We're excited to see how it will streamline your experience in Vev. 🫶
​

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.

Today, we are thrilled to announce that Interactions and Slider are graduating from beta and are officially available for all of you! 🥳

➡️ How to Access Interactions

• Select a component and click "Interaction" in the top right corner. Alternatively, hover over a component until you see the "+" button.

➡️ How to Access Slider

• Click "+" icon to access the Add Menu and search "Slider"

We hope you feel inspired to try out these features and let us know what you think, either via a chat bubble or in our community. 🫶
​

This month, we've spiced things up in the design editor with enhanced text styling options, along with bug fixes and improved speed performance. 🥷

Design Editor

• CLI Form Schema: Working with custom CLI components your developer created? You'll find tweaking and customizing them in the Properties tab much easier with the latest update.
• Text Styling with Image & Gradient: You now have the option to set an image or a gradient as your text background, giving your designs that extra layer of personality.

All-New Add-Menu Beta Release

Would you like to try out a new and improved Add-Menu before its public release? Go to your user profile and enable the "All-New Add-Menu" toggle under experimental features to test it out.

Bug Fixes

• Resolved an issue causing some projects to load very slowly in Safari.
• Reduced the bundle size for published projects to enhance speed.
• Enhanced navigation and fixed bugs in the slider.
• Improved the search functionality for publishing destinations.

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!
​

We're super excited to roll out a bunch of cool updates that are set to make managing your projects more efficient! For all you organization lovers out there, this one's for you. 👀

Let us dive into what’s changed. 🫶
​

🌈 New Project Cards

Your dashboard just got a splash of colors! Project cards now pick up colors from the project thumbnail, giving your workspace a more personalized look. Hover over these cards to check project plans, view publishing status, and even directly access your workspace.

🚀 Introducing Teams Dashboard

Your team now have a dashboard. By clicking on the team name in the sidebar, you can explore all workspaces within each team right from the dashboard. Watch out as we populate this space!
​

🗂️ Accessing Ready-to-Use Templates

Creating projects based on templates has become more streamlined. Only templates marked as "Ready" will appear in the "Create Project" template overview, allowing your team to pick up only those ready for production.
​

📊 Dashboard Project Filters

Now you can filter projects by Last Modified, Date Created, Date Published, Alphabetically, and even order them in ascending or descending fashion to match your workflow.
​

Thank you for being an essential part of our community. Your feedback and suggestions continue to inspire us. Explore the new features today and let us know what you think!
​

Happy organizing! 💅
The Vev Team

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.