Meet the Code Editor

Everything you place on your Canvas, i.e. any Element, Section, or Add-on, is created using Vev’s built-in Code Editor. By understanding how Vev works, how it structures content, and how we ourselves use the Code Editor to modify anything and everything, we believe you will come to see how unlimited the possibilities are.

Learning how to use the Code Editor will greatly improve your ability to create unique experiences in Vev, so let’s get right into it.

Get started

Start by creating or opening a project in Vev. Once you are in the Design Editor or Content Editor, the Code Editor is one click or keypress way; click the Code Editor icon in the Top Bar or press ⌥ + 4 / ALT + 4.

The Code Editor will then reveal itself to you in its full glory and you will be presented with its simple, and familiar, Welcome Screen.

Quick overview

You will notice the Top Bar now has a few buttons at your disposal:

Run — Compile and run your code. This will detect any errors you may have and render your code in the Preview panel.

Deploy — Compile and upload a new version of your code. The latest uploaded version will be used when publishing your projects. When you deploy, you add a new version to the Element's local VCS (Version Control System). This lets you quickly see the history of your code and spot differences between deploys.

To get a more in-depth overview of the new panels and buttons, take a deep dive into the Code Editor Introduction. Introduction to the Code Editor

The Welcome Screen contains quick links to start creating code in Vev, see some useful learning material, as well as learn about available keyboard shortcuts, which we highly recommend you check out!

Code in Vev

A quick run through what you can create with the Code Editor:

  • New Element — Elements are sized and positioned freely on the Canvas. Keep that in mind when making them.

  • New Section — Sections are rendered with 100% width and stack on top of each other. They have a children prop which is a reference to all the elements, components and frames contained in them.

  • New Add-on — Add-ons extends your Elements or Sections behaviour, and are used to animate, link, track and more.

  • Open Package — Opens the list of Packages you have access to edit.

You can change the type of an Element to become a Section at any point after creating it. The same applies to Sections (by making them into Elements). You can even choose to set the type as a hybrid between Elements and Sections, allowing for maximum flexibility.

Add-ons, however, cannot be changed into a different type once created. You cannot change an Element or Section into an Add-on, either.

In case you need a refresher, make sure you’re up to speed on what each of the above terms means by reviewing: Sections and Elements and Extending elements/sections with add-ons.

Now that you have an overview of the Code Editor and what you can build with it, it’s time to roll up some sleeves and make some Elements.