Intro to Velo
Velo is a full-stack development solution that allows you to extend the functionality of your Editor X sites by adding code. Create your desired UI, then add custom functionality using JavaScript and Velo APIs in both the frontend and backend. With Velo you can create anything from small interactions to complete websites.
Enabling dev mode
To start using Velo, click on Dev Mode in the top menu, then click Turn On Dev Mode.
![A screenshot of Editor X. The user has clicked Dev Mode and the cursor is placed over a blue button that reads Turn on Dev Mode](https://static.wixstatic.com/media/829949_274989be9d334df8986e863dcfada6a5~mv2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/829949_274989be9d334df8986e863dcfada6a5~mv2.png)
Changing an element’s ID
Change an element’s ID by clicking on the element and giving it a unique identifier in the Properties and Events Panel.
![A screenshot of Editor X in dev mode. The user’s cursor is placed on the element ID field in the Properties and Events panel](https://static.wixstatic.com/media/829949_af164c2b6a2746d597f3a591dd0ca05a~mv2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/829949_af164c2b6a2746d597f3a591dd0ca05a~mv2.png)
Setting default values
Set an element’s default state when the page loads by navigating to the Properties and Events Panel and clicking on the checkbox beside the state you want to set.
![A screenshot of Editor X where the default value for an element has been set to Hidden](https://static.wixstatic.com/media/829949_fd825122f33b481597d58433957f39ab~mv2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/829949_fd825122f33b481597d58433957f39ab~mv2.png)
Adding event handlers
Add an event handler by clicking on the element that you want to add it to, then click on Event Handler in the Properties and Event Panel and click on the plus symbol beside it.
![A screenshot of Editor X where the Properties and Events panel is open and the OnClick Event Handler is selected](https://static.wixstatic.com/media/829949_fb5a90dcd408400d86c3be5bb4f0159d~mv2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/829949_fb5a90dcd408400d86c3be5bb4f0159d~mv2.png)
Adding your code
Begin adding code to your Editor X site by using the Code Panel. Here you can write JavaScript and use Velo’s APIs.
To learn about all the features and tools you can use to customize your Editor X site, click here.
![A screenshot of Editor X. The code panel is open and it contains sample code](https://static.wixstatic.com/media/829949_dcad96314801417096f28c4f14aa43e7~mv2.png/v1/fill/w_49,h_27,al_c,q_85,usm_0.66_1.00_0.01,blur_2,enc_auto/829949_dcad96314801417096f28c4f14aa43e7~mv2.png)
EXPLORE MORE TUTORIALS
Was this lesson helpful?
Thank you for your feedback!