About Site Development

Developing websites on Wix offers a unique blend of flexibility, ease-of-use, and powerful features. Wix provides the tools and technologies needed to craft visually appealing and fully-functional dynamic web applications tailored to your specific needs.

Until now, custom code on Wix sites was written using Velo APIs. You can now also use the Wix JavaScript SDK for both site development and app building with Blocks. If you have sites with existing Velo code, you might want to migrate them to use the SDK instead.

Wix's transition to the SDK is a gradual process. At this stage, not all Velo APIs have SDK equivalents that can be used for site development or for app creation with Blocks. For functionality that is not yet supported in the SDK, use Velo APIs alongside the SDK.

The Velo APIs that should still be used at this stage fall into 2 categories:

• APIs that are imported from Velo modules.
• APIs that work by file and name conventions.

APIs that are imported from Velo modules

The following APIs that are imported from Velo modules do not currently have SDK equivalents. Therefore, if you need the functionality of these APIs, you need to use their Velo versions. When necessary, import and use these APIs as described in the Velo reference.

• $w: For working with page elements.
• $widget: For working with Blocks widgets.
• wix-http-functions: For exposing site functionality as an API.
• wix-configs-backend: For working with the configuration of Velo packages.
• wix-realtime-backend: For working with realtime publishing and permissions.

APIs that work by file and method name conventions

The following APIs may have SDK counterparts, but the SDK versions don't work for site development and for app creation with Blocks. Therefore, if you need the functionality of these APIs, you need to use them with their Velo file and method name conventions as described below.

• Backend event handlers: Handlers for backend events, such as when a booked service is canceled. Place Velo backend event handlers in a backend events.js file using the naming conventions described in the Velo reference.
• Service plugins: Plugins that allow you to inject custom logic into existing flows, such as conditionally adding additional fees on checkout. Install service plugins in the editor, update the getConfig() method in the plugin's -config.js file, and implement the main service plugin method in the .js file that is added to your site.
• Data hooks: Hooks that run before or after data operations, such as updating an item. Place data hooks in a backend data.js file using the naming conventions described in the Velo reference.
• Routers: For custom routing of incoming requests. Place router code in a backend routers.js file using the naming conventions described in the Velo reference. Note that some functionality from the Routers API works by convention while other functionality must be imported from Velo modules.

Example

This example demonstrates using SDK functionality alongside Velo APIs. Here we create a router using the Velo API by using method naming conventions and some methods imported from the wix-router module. The router retrieves data using the @wix/data SDK package.