Velo: All About Our New Design

5 min read
We've redesigned the Velo interface to give you a cleaner and neater experience. We're sure you'll get used to it quickly but in the meanwhile let's walk through the changes to existing functionality so you can find the stuff you've been working with. 

Then we'll introduce you to the cool new features we've added.

The Site Structure Sidebar Is Now the Velo Sidebar

Search in All Code Files

        Was at the top of the sidebar                                       Now you click the Search Code                
                                                                                                            button in the Velo Sidebar

Page Files for Regular Pages, Dynamic Pages, Router Pages, and Wix App Pages

        Were in the Pages section                                                Now they're in the Page Code section
The Dynamic Pages, Router Pages Wix App pages sections are displayed only if you have pages of these types on your site.
Add a Router here:


        Were in a section in the sidebar                                     Now they're in the Page Code section

Public Files, Backend Files, and node_modules

        Were in their own sections in the sidebar                Now they're sections inside  
                                                                                                             the Site Code section
  • There is a new Site Code button in the Velo sidebar that displays your Public, Backend, and npm packages in the sidebar. This is different than the Site Code tab that was part of the Code Panel in the old design. 
  • node_modules was renamed to Packages (npm)

Database Collections

        Were in their own section in the sidebar                  Now they're in the Databases
                                                                                                             section in Content Collections  

Velo Resources

        Were under the Site Structure Sidebar                                      Now you click the Velo Help 
                                                                                                                               button in the Velo Sidebar

The Code Panel Has Been Simplified and Improved

Some of the buttons have been removed from the toolbar and their functionality is accessible in a right-click menu,
and with keyboard shortcuts.
Mac Shortcut
Windows Shortcut
Ctrl + Z
Ctrl+ Shift + Z
Search in file
Ctrl + F
Format code
Alt + Shift + F
You can also see a list of all the shortcuts under the Show More button, along with a Help link. 

The Properties Panel Moved to the Code Panel and Got a New Name

The Properties panel is now the Properties and Events panel and it's now fixed in the right side of the Code panel.
You open and close the panel with the Properties and Events button in the toolbar.

The Site Code Tab Moved

                                                                                                                                          Now it's in the 
                                                                                                                                          Global (Site) section in 
Was in a side tab in the Code Panel                                                                  Page Code

  • Site code is now saved in masterPage.js in the Page Code section of the sidebar. 
  • The Site Code section of the sidebar contains your Public files, Backend files, and npm packages.

What's New

Now let's take a look at the new functionality you'll enjoy in our new design.

Tabs in the Code Panel

Our new design lets you open multiple tabs in the code panel for different code files. 

Did this help?