Wix Code is a new IDE (integrated development environment) created by Wix, a popular cloud-based website builder. Launched in December 2017, Wix Code gives web designers and developers advanced functionality to create professional websites.
In this review, we’ll have a look at what Wix Code has to offer for web designers and developers alike.
Structure of Wix Code
Wix Code separates content and design, which is one of the most important principles of modern web development.
All your site info is managed and stored in database collections. Set it up once and everything you do in your database will update your site. If your site has a lot of content, you can easily create 100s of dynamic pages using a single page design. Because Wix Code is built like a layer on top of the existing Wix Editor, you get all the design tools you need and can customize everything just the way you want.
Get Started with Wix Code
To get started with Wix Code, you need to sign up for Wix.com and log in to your account. After logging in, you can follow the steps of the onboarding process as they come up on the screen.
The process is really simple and self-explanatory. First, connect the fields in your Database to the page elements on your Dynamic Page.
You’ll be taken to the Wix Editor. To enable Wix Code, go to Tools from the menu and click Developer Tools.
After turning on Developer Tools, the Site Structure sidebar (left), Properties Panel (right) and the Code Panel (bottom) will appear on your screen. As you can see below, I have chosen a template for vegetarian restaurants with seven pre-built pages:
Create Database Collections
First, you need to create Database Collections to store content related to your site, for instance product information, images, or visitor details. When you have the content, you can add design elements to the page, that will display your content on the screen. Wix will store all the content you place into your Database Collections in its cloud servers.
After setting up your database collection, connect page elements on your site to fields in your database. You can even set up permissions about who can view, edit, or add content to your different Database Collections.
To create your first Database Collection, choose the
Database > Add new collection menu in the Site Structure sidebar on the left of the screen. Then, you simply need to name your collection and select its type. For instance, it can be site content, form submission, member-generated content, and other content types.
As my template is for vegetarian restaurants, I will call my first database collection “Recipes” and will populate it with a few recipes. A collection is similar to a spreadsheet, you can quickly create the fields you need and add data to them.
If you click on your new Database Collection in the left sidebar Wix will open it in the Content Manager with which you can easily add fields and items. In my Recipes collection, I have four fields and added six items to it.
You can assign field types for every field in your collection, set permissions, add filters and more.
Add Dynamic Pages
With dynamic pages, you can create a single page design and use that layout for 100s of pages. Each page has its own URL and includes unique content from your database. This is an excellent feature for those creating content-rich websites, such as a blog, recipes, product pages or business listings.
In the Site Structure sidebar, click on the settings icon next to your Database collection. Select Add a Dynamic Page. Wix Code provides you with two kinds of Dynamic Pages: Item Pages for showing one item and Category Pages for showing a group of items at a time.
Select your Dynamic Page Type, set the URL for this new page and you’re all set. Your Dynamic Page is instantly added to your Site Structure sidebar for quick access and editing.
Next, you can start to create the design for your new Dynamic Page. First, you need to connect the items in your Database Collection to the website elements on the Dynamic Page.
Luckily, Wix Code has an easy-to-use and straightforward graphical user interface. When you see it, you will instantly understand how it works. Basically, you just have to drag the items and drop them to the right place.
Below you can see how I connected the Page Title text box to the Recipe Item dataset and the Recipe title field – no coding needed.
Similarly to the Page Title, you can create a separate design element for each item in your Database Collection. Then, you can simply arrange the items until you reach the result you want.
Create Custom Forms
Wix Code also allows you to gather user input to create custom forms. You can use it to create different forms, review sections, quizzes, and other site components that need user input. Wix Code will store the data you collect from your users in a Database Collection. Even better, you can instantly reuse the collected data in other parts of your website.
Before you build a custom form, you need to create a Database Collection in which you will store the data users enter on your site. When prompted “What’s this database collection for?”, choose Form Submission. This sets the permission for your database to write-only, so users can submit data.
After setting up the fields for your form collection, design the web page for your form. Click the + button on the right in the Wix Editor and add different User Input elements for your form. Just drag and drop the elements you need onto your page.
From here, the process is quite straightforward, just find the User Input section and simply drag and drop all the inputs you need onto the page.
Wix Code lets you add custom interactions to your site using the Properties Panel. This means you can control how page elements, like buttons and images, react based on user’s behavior. You can also easily change the style of form elements, such as alignment, margins, colors, and opacity. You can even add animations to your form.
Add Custom Interactions
Wix Code allows you to add interactivity to your site with its smart Custom Interaction feature. This means that you can control how elements such as buttons and images react to user actions.
After you select the event, the Code Panel will appear at the bottom of your screen. You will already find some code in the editor such as the name of the function and the related parameters. You only need to add your custom script for the selected event.
Don’t worry if you don’t have enough coding knowledge to write the scripts. Wix Code has a great documentation with many code examples you can simply copy-paste into the Code Panel.
As you can see in the API reference, Wix Code has code snippets for date pickers, galleries, Google Maps, notifications, sliders, and many other interactive features.
Use Third-Party APIs
Wix Code lets you connect to Wix and third-party APIs. Documentation on the Wix Code Resources page showcases several examples of what you can do.
You can read more on how to use third-party services and make client-side and backend service calls in Wix Code’s detailed documentation.
Overall, Wix Code is a great platform for web designers who want to build content-rich websites and powerful web applications without too much coding. However, as it’s also possible to add code to the design wherever it’s necessary, Wix Code can be an appealing option to code-savvy developers as well.
As you can get started with Wix Code for free, it’s definitely worth giving it a try. And, if you want to learn more also have a look at Wix Code’s Resources Center where you can find video tutorials, articles, examples, API references, and other helpful materials.