Code & Dev
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.
{Section Title}
{Section Description}

{Section Title}
{Section Description}

{Section Title}
{Section Description}

{Section Title}
{Section Description}

{Section Title}
{Section Description}

Intro
TRY IT YOURSELF
Exercise on intro to velo.
Open Academy X from desktop to complete this exercise.
01
Enable dev mode. In the top menu select Dev Mode and click on Turn on Dev Mode.
02
Add a button. From the Add Panel, drag a button to the section.
03
Change the button’s ID to “changeTextButton”. Click on the button you’ve just added to select the element. Then, go to the Properties and Events Panel and change the ID.
04
Add a title. Return to the Add Panel and drag a title to the section.
05
Change the title’s ID. Change this ID to “helloText”.
06
Change the text of the title. Add any text you’d like.
07
Add an Event Handler. Click on the button element you’ve added, then navigate to the Properties and Events Panel and, under Event Handlers, choose onDblClick(). Finally, click on the plus symbol to add the Event Handler.
08
Paste the following code into the function that you’ve added, between the curly braces:
$w('#helloText').text = 'Hello from Velo';
This code line replaces the current text in the title you dragged onto the canvas to “Hello from Velo” when the button is double clicked.
09
Preview the site to see the final result. Click on Preview, then double-click the button you’ve added the function to, and notice how the text changes.
{No.}
{Exercise Description}
Open Academy X from desktop to complete this exercise.
Did you find this resource helpful?
Thank you for your feedback!
Next lessons.

COLLABORATION
Design Libraries
Learn how to create, manage and share design libraries with your team.

COLLABORATION
Team Accounts
Find out how to set up a team account to give teammates access to every site in your account.

COLLABORATION
Roles & Permissions
Learn how to give every teammate and collaborator a custom role on each site.

COLLABORATION
Live Comments
Discover how to communicate with fellow creators in real time on the Editor X workspace.
Related learning resources.

VIDEO LIBRARY
Title
Learn how to add new sections, rearrange them & flip them to vertical.
▶

LESSONS & EXERCISES
Title
Learn how to work with sections—the building blocks of your site.
▶

VIDEO LIBRARY
Title
Get to know where you control size, position and behavior of all elements.
▶

LESSONS & EXERCISES
Title
Learn how to take precise control over the positioning of elements using grid.
▶

Ready to start creating?

Top searches
People are searching for
VIDEO LIBRARY
Introducing Editor X
Discover the Editor X workspace. Get an introduction to your advanced layouting tools and an overview of responsive web design features like breakpoints, flexbox and CSS grid.
VIDEO LIBRARY
Getting Started
Learn the basics of creating a site on Editor X. Get a step by step walkthrough covering the key features and capabilities.
LESSONS & EXERCISES
Hover Interactions
Design dynamic web experiences by adding a variety of interactions to any element on hover. Customize the interaction settings for every breakpoint, from transform adjustment to advanced design capabilities and timing control.