To get started developing your own widgets, sections or add-ons, you should first get familiar with the Vev developer tool. The editor is split into a left sidebar, main content, and some views have a right sidebar.
The main view of the developer tool will display something similar to the image above. The main view consists of 4 tabs, Settings, Code, Style and Form. All of these tabs are important when creating a widget, section or add-on.
The settings tab contains, not surprisingly, the settings for your widgets. Here you can give your widget a name, default sizes, and set the icon for the widget. You will also be able to choose whether this widget should act like a normal widget or a section. To learn more about this difference, see the Create Widget Guide.
In the settings panel, you will also find methods for making the widget available within a team or workspace.
Under the sharing options you will find the widget icons. Here you can add custom icons to your widgets. You can find more info on how to use them in your component in this guide.
At the bottom of the settings view, you will find the widget version. Every time you deploy a widget, a version of the code is stored, which you later can go back and compare with the current version.
The code tab is where you write your main code for the widgets (React using TypeScript). Learn more in the Creating custom widgets guide.
The style tab is for your widget's CSS. Here you can write CSS/SASS. Learn more in the Styling (SASS/CSS) guide.
If your components need any data which should be adjustable in the Design Editor, these variables can be made available to the user effortlessly using Form. The form is created using JSX syntax. Learn more here: Custom Form (JSX) guide.
Testing and deploying
You may click Test to run/update the code from your custom widget in your project. Click Deploy Version to save a new version of your code. When you publish a project, the code used will always be the last deployed version.
The sidebar shows an overview of the widgets in the current project, as well as the current workspace and the current team you are in. You can easily navigate to the widget by clicking on it. At the top is a search field to make it easier to find the widget you are looking for. Here you will also find an add button to create new widgets and add-ons.