Wix Blocks: A Blocks App Workflow

7 min read

Wix Blocks is open to all Wix Studio users. To get access to Blocks, join Wix Studio.

Wix Blocks enables you to create apps that you can use again and again on as many Wix sites as you like. Or, you publish your app in the Wix App Market and reach millions of users!

Plan Your App

Your app can include:

You should also plan your:

Create an App

When you are working on your site, you can open Wix Blocks from the App Market

to create a new app.

Tip

When you choose to create an app, Wix Blocks opens automatically in a new window. You can return to your website to import the app once you have built it.

Choose Your App Type

Choose if you want to start with a:

Blank Canvas: add UI widgets to your app
Code packages: add code files and folders to your app
Custom element: embed your HTML code
Predesigned widget

Add Widgets

Widgets allow you to add UI to your app.

Go to the Widgets and Design panel in the App Structure menu.
Click + Add Widget to add your first widget.

Add Elements

Design elements are the basic building blocks of your widget: text elements, buttons, images, user input fields and more. Wix Blocks is a responsive workspace to create apps that automatically adjust to the screen or device being viewed to deliver the best user experience.

The Blocks Add Elements panel gives you lots of options for adding design elements (also known as UI elements) to your widget.

Learn more about adding elements to your app.

Add Properties and Events to Elements

Properties allow you to customize your widget's elements. For example, whether or not an element is hidden when the widget is loaded. Event handlers allow you to determine the interactivity of elements. For example, what happens when a button is clicked. You can do this by selecting your element and clicking the Properties and Events

icon at the bottom.

Since your widget will eventually be installed on a Wix site, it's important to make sure that it blends with site colors and fonts, which are defined in the site theme. Make sure to connect every element to the color theme and the text (typography) theme.

You can add Velo code to your widget in a similar way that you can add it to Wix websites (learn more about Velo by Wix). To add code to your widget, open the Design tab and use the code editor at the bottom.

The Widget API allows you to add properties, events and functions to your entire widget. Any property, event or function that you add is then accessible to site creators working with the widget on the Wix Editor or Editor X. Properties will appear in your widget's default Settings panel in the editor.

For example, in our counter widget tutorial, we define a `step` property that controls the counter's increments (such as 1,2,3,4 or 2,4,6,8).

To add properties, events and functions to your widget API, click the Widget Public API

icon at the bottom.

Learn more about defining your widget API.

Learn more about using your widget API when editing a site.

Preview your widget to test how it works. Your widget should work in preview mode exactly as it would when installed on a site. You can interact with your widget and see how it works. You can also test the theme and the API properties.

The Configuration tab enables you to define the way your widget and its elements look and behave when they're installed on a site. You can modify the display names, add and remove buttons to the action bars and change button settings. You can also determine whether elements can be selected, duplicated, or deleted.

Learn more about configuring your widget.

The Panels tab allows you to create custom panels that open when a site creator edits your widget in their Editor, instead of any of the widget's default panels (such as Settings or Design).

Learn more about creating custom panels in Blocks.

Build Design Presets

You can create more than one layout and style for your widget by using design presets. When you create design presets your widget keeps the same elements and functionality, but you can change colors, layout, and so on.

You can find Design Presets in the Widgets and Design panel. If you are working in the Design tab, click the App Structure