Introduction to the Code Editor
Vev’s online React+TypeScript code editor automates tasks like compiling, bundling, and dependency management so that you can create new re-usable high-performing components in a matter of minutes.
Add your custom code anywhere you want on the Canvas. Build configurable and theme-able Elements that you and your team can use, reuse and extend in all your projects.
To open the Code Editor create or open a project, then select the Code Editor Mode or press ⌥+4 / ALT+4
Code Editor Dashboard from inside a Project
When you create widgets inside a Vev Project, the project becomes the “Code Package”. Bundle together multiple Elements and share them in your package.json for easy usage anywhere in Vev.
Code Editor with an open index.tsx file
Create components that can be used anywhere in Vev. The default export of your component will be rendered to the Canvas. You can preview your code on the right. All custom Elements come with a “Custom Preview” you can modify, or you can click “Current Project” at the bottom of the Preview window to see how the code looks inside your project.
The preview is fully functional and will respond to your click events, load events (click the circled arrow to reload your view), and gestures.

Code Editor Navigation

The Top Bar changes slightly when inside the Code Editor.
  • Create Element
  • Open / Find Package
  • Search Files
  • Package VCS

Create Element

Click to open the Create Element popup. Select Element, Section, or Add-on. You can change this type for Elements and Sections after you create them.

Open / Find Package

Click to open other Code Packages you have created / have access to.

Search Files

Quickly find and navigate between the files inside your current package.

Package VCS

Packages come with their own Version Control System, see commits for this package, and which files were changed.
After clicking a specific version, you will be able to see which files were changed and click them to see their exact changes in our diff viewer.
Last modified 2mo ago