Getting Started with Code

With Wix you can easily extend your site’s functionality using code. In this tutorial, we walk you through the essential steps to get you quickly up and running with code.

You’ll learn how to:

  • Enable coding in the editor
  • Select a UI element in your code
  • Add a code interaction
  • Use a Wix API
  • Preview your code in action
  • View console logs

We added a text element and button to our site, and then used Wix APIs to change the element’s text when the button is clicked. To get started, watch the video tutorial, or follow the steps below.

Before you begin

Sign up for a Wix Studio account and log in.

Step 1 | Enable coding

To start coding in your site, you need to enable Wix developer mode.

In the left sidebar, click and then Start Coding.

This sets up your developer environment which includes a built-in code editor (IDE) at the bottom of your page, and a Code sidebar with advanced developer functionalities such as access to your site’s page code, backend and public code files, databases, code packages, and other tools and features to extend your development experience.

Step 2 | Add elements to a page

In this step, we add elements to the Home page of our site, and change the default text of the elements using the UI.

To do this:

  1. In the left sidebar, click Add Elements .

  2. Add the following elements to your site:

    • Text
    • Button

  3. Use the UI to change the default text of the elements to whatever you like. We changed the text of our button to 'Click Me', and our text element to 'Hello World!'. Later in the tutorial we show how to change the text of our text element using code.

Step 3 | Select UI elements in your code

To select these UI elements in your code, do the following:

  1. Click the button element. You can now see the button element’s ID in the Properties & Events panel next to the built-in code editor.

  2. Change the button’s ID. We call ours 'btnClick'. It’s best practice to change all of your element IDs to more descriptive text so that you can easily identify them when you start writing code. We also changed our text element ID to 'txtMessage'.

  3. To use the elements in our code, we need to look at the Wix API Reference. The reference contains various APIs to interact with site elements, your site’s database content, Wix business solutions, and more. In our example, we use the $w selector function to select elements on a page by ID or by type.

    We select our elements by ID as follows:

    • Button: $w('#btnClick')

    • Text: $w('#txtMessage')

    Note: To access and modify elements on your site, you must use the $w selector function. You can't use Web APIs or 3rd party libraries such as jQuery to access or manipulate the DOM.

Step 4 | Add an event handler

Now that you know how to select UI elements in your code, let’s add an onClick() event handler to the button. Events run when they are triggered by a specific action on their element. In our example, every time the button is clicked, the event’s code will run.

To add the event handler:

  1. Go to the code editor at the bottom of your page. Notice the onReady() function in your page code. We write the code for our event handler inside this function since it runs when all the page elements have finished loading.

  2. In the onReady() function, add the button element using the $w function and the element ID we gave it earlier, $w('#btnClick'). Notice that when you start typing '$w', you can see a list of all the available elements. This is useful to be able to find your target elements, especially as your site grows.

  3. Attach the onClick() event handler to the selected button element.

    Copy

Step 5 | Define the code in the event handler

Now that we have a button with an onClick() event handler, we need to define the code we want to run when the button is clicked. In our example, we want to change the text of the text element when the button is clicked.

To define the code we want to run when the button is clicked, do the following:

  1. First add a console log in the onClick() event handler function to test that it is working.

    Copy

  2. Now let’s run the code in Preview mode to test if it is working. Click Run on the top right of the code editor. Once in Preview mode, click your button. If everything is working as expected, you’ll see our console log, 'clicked!' printed in the Developer Console at the bottom of the page.

  3. Now that our button’s event handler is working, we define our event. In our case, we want the text element’s text to change from the current 'Hello World!' to 'Hello from Wix Studio!' when the button is clicked.

    To do this, we select our text element, $w('#txtMessage'), and then add the Text API’s .text property:

    Copy

Step 6 | Preview your code in action

Before publishing our site, let’s see a preview of our code in action.

  1. To enter Preview mode, you can either click the Run button like we did in the previous step, or click the Preview icon in the top right corner of the editor.
  2. In preview mode, click the button. The text element’s text will change to 'Hello from Wix Studio!', and you’ll see our console log, 'clicked!' printed in the Developer Console at the bottom of the page.

Your code is up and running, and you’ve now learned the basics of how to code with Wix.

Next Steps

Learn more about coding with Wix:

  • Customize your site’s UI: Interact with site elements and add custom behaviors with the $w() API.
  • Add advanced backend functionality: Write server-side code on your site's backend, and call the backend code from your frontend. Then test your backend code in the code editor using Functional testing.
  • Integrate with external resources: Add npm packages, and access 3rd-party services with the fetch API.
  • Manage your site data: Use the Data API to work with your database collections using code. Use the Wix CMS, or integrate with popular external databases such as MySQL, Google Cloud, and AWS.
  • Start with pre-built examples: Use the Get Started with an Example feature in Wix Studio to access a page with pre-built code snippets, helping you begin coding and explore Velo's basic features.
Was this helpful?
Yes
No