With the launch of the CLI, we will start the process of deprecating the Code Editor. For a forward-looking approach, we encourage you to create all new widgets using the CLI. Read more
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.
Getting 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 bottom left menu.
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.
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 Add-on — Add-ons extend your Elements or Sections' behavior, and are used to animate, link, track, and more. They have a prop called children, which is a reference to all elements wrapped in the addon.
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.
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.