Get Started with an Example

Wix Studio provides a pre-built example page that demonstrates some of Velo's features:

• Text Manipulation: Set and change text content dynamically.
• Element Visibility: Show and hide page elements.
• Expandable Sections: Create and manage foldable content areas.

This article explains how to access and use this example page.

Access the example page

To open the example page with code snippets:

1. Open a Wix Studio site that you haven't added code to yet.
2. In the left sidebar, click the Code icon and then Start with an example.

A new page named "Get Started with Code" is created.

Use the example page

The "Get Started with Code" page demonstrates basic Wix Velo functionality. Here's how to get the most out of it:

1. Review the examples: The page features several interactive demonstrations.
2. Test the behavior: Preview to see how each example works.
3. Study the code: Examine the snippets associated with each example.
4. Modify and experiment: Change the code and observe the effects.
5. Preview your changes: Check the results after modifying the code.

Try an example

To see an example in action:

1. Go to the "Get Started with Code" page.
2. Choose an example from the page, such as the "Change text on button click" example. The following screenshot shows this example:

3. In the code editor, review the existing code for the example.
4. Modify the code:
   • Find the line that sets the text for the button.
   • Change the text inside the quotation marks.
5. Click the preview icon in the top right corner to see your changes.
6. Click the blue "Click to Change Title" button. The existing text changes when you click the button.

Next steps

After exploring the examples:

• Use these examples as inspiration for your own Wix Studio site.
• Explore the Wix Velo API Reference for all API functionality.
• Visit the Wix Velo Examples to see even more examples.