What Is Wix Code?

This article was sponsored by Wix. Thank you for supporting the partners who make SitePoint possible.

You probably already know that Wix is a cloud-based web design platform that lets users create stunning HTML5 websites using its online drag and drop editor.

Wix Code takes Wix to the next level, turning it into an open platform for building robust, content-rich sites and web apps. With Wix Code, Wix becomes a powerful and extensible tool for web developers.

Wix Code adds a bunch of new features and functionality to Wix:

Databases

Dynamic pages

Repeating layouts

Custom forms

Built-in online IDE

Custom interactions using our APIs and JavaScript

Access to 3rd party APIs

Call backend code from the front-end with Web Modules

HTTP functions: Exposing your site’s functionality as a service with your own API

And, don’t forget, this is still Wix, so everything is hassle-free:

It’s serverless: All this added functionality comes in a serverless environment that lets you get your work done without any of the normal full-stack development headaches.

Just code and go: Wix Code has a built-in, online IDE and backend so you can just add the code you need to your page or your site, publish, and you’re live.

All these new features mean that you can think about the kind of site you want to build on Wix in whole new ways. Let’s consider an example.

Do you want to build a full-fledged real estate site, where users can browse your offerings and search by location or other property features? You probably don’t want to build a separate page for each listing, right? You might also want to let your clients sign up for your newsletter.

How about if, on the same site, you want to give your agents access to special pages with admin permissions so they can add or update listings in a database? Maybe they also need to maintain a database of all their clients?

Maybe you need to connect your site to an existing database? What if you have a dedicated mobile app and you want your site to integrate with it? Of course you want any changes you or your agents make to go live in real-time.

Wix Code makes all this possible. Using a combination of Wix Code features, our APIs, and JavaScript that you add, you can make your Wix site behave exactly the way you need it to. You can even expose your site as a service or use your site exclusively as a backend for an external application.

And it’s all within the Wix ecosystem so it’s hosted, secure, and SEO-compatible, and you never have to worry about scalability.

With Wix Code you can use all the stunning templates and styling options from Wix and add extra functionality and code to make your site even more awesome. This way you can focus on the fun part of making your site work exactly the way you want.

Databases

Imagine our real estate site. You probably want one database for your available properties, one for your agents, and another for your clients. But you’ll need to associate your agents with the properties they’re handling and also to associate potential clients with each property.

Now with Wix Code you can add a database with multiple collections to your site. The Wix Code database is automatically integrated into your Wix site so there’s no need to set anything up—we do all the magic for you. As soon as you create a collection, it’s available for you to use with the elements in your site, to either display or store data, all without writing a line of code.

You can also create complex data structures with reference fields so that one collection can refer to the records, or what we call items, in another collection. The Wix Code database also includes a permissions model that gives you control over which visitors are allowed to interact with your data and what they are allowed to do.

Once your collections are set up, you can use our wix-data API to manage your data. It lets you query your collection with a long list of functions to control your query results. It even has hook functions so you can add custom code that runs before or after different actions on your data.

One of the most powerful things you can do with a collection is use its content in dynamic pages, so let’s talk about that next.

Dynamic Pages

Back to real estate. As your users browse your site, you want them to be able to view a dedicated page for each property. Each listing should be displayed using the same layout with the same basic elements. You just need the content of those elements to change and for each page to have a unique URL. That’s what dynamic pages do.

When you create a dynamic page, you design one page layout that’s used each time your site calls that page. And each time it’s called, it displays the content of a different item in your collection with its own URL.

Now you no longer need to create a unique page when you have a lot of data that you want to display in the same way. Just create a dynamic page, connect it to your collection, and you automatically get a unique page with its own URL for each item in your collection. And whenever your collection’s data changes, your page contents change automatically.

Dynamic Pages and SEO

The content in dynamic pages can change each time the page is displayed, and you’re going to want search engines and social networks to index that page for any of the content it could display. The SEO settings for dynamic pages let you control how your pages are indexed, and they let you reference the data in your collections for indexing.

You can control the page’s title, description, keywords, and social images using the data from your collection that’s associated with your page. You can also hide the page from search results if you want.