Review: Wix Code for Quick Site and App Building

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.

Wix Code enables you to build content-rich websites and powerful web applications. Set up databases to store and manage all your site info, make custom forms, create dynamic pages and layouts and add your own JavaScript and Wix APIs to take full control of your site’s functionality. And, all that is possible with zero to minimal coding and without having to run your own servers—similarly to Wix’s other web tools.

In this review, we’ll have a look at what Wix Code has to offer for web designers and developers alike.

Wix Code Homepage

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.

In Wix Code’s Code Panel, you can add your own JavaScript and code that lets you connect to Wix and third-party APIs. In the Properties Panel, you can add event handlers to page elements. Each of these handlers prepopulate your Code Panel with JS code that you can then customize to fit your needs.

Wix Code Structure

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.

Wix Code Site Selector

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:

Wix Code Developer Tools

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.

Wix Code Create Database Collections

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.

Wix Code Content Manager

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.

Wix Code Create Dynamic Page

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.

Wix Code Connect Data and Layout

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.

Wix Code Database Collection for Form Submission

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 Add User Input

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.

Wix Code Properties Panel

With the Properties panel, you can add custom scripts to different JavaScript events, for instance when the user clicks a button on the page. To add a new interaction, simply select the element you want to make interactive and choose an event such as onClick or onMouseIn.

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.

Wix Code Source Code Editor

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.

For instance, here’s an example of how you can embed an interactive chart to your page. The chart uses the Chart.js third-party library, together with Wix Code’s own functionality.

Wix Code Chart Example

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.

Conclusion

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.



5

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.