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 app market to create a new app
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:
Create a new app

Add Widgets

Widgets allow you to add UI to your app.
  1. Go to the Widgets and Design panel in the App Structure app structure menu.
  2. 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 elements

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 properties and events icon at the bottom.

Connect Widget Elements to Site Themes

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
connect to site theme

Add Velo Code to Your Widget

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.
public and backend panel

Define Your Widget API

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 widget public api icon at the bottom.  

Learn more about defining your widget API.

Widget Public API

Preview and Test Your Widget

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.

Configure Your Widget and Create Custom Panels

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.
configuration tab
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). 
panels tab

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 app structure icon and select the Widgets and Design widgets and design icon icon. 

Learn more about design presets in Blocks
add design preset

Add Widgets to Your App

Add more widgets to your app by opening the App Structure , selecting Widgets and Design and clicking + Add Widget.
Make sure you are in the Design tab. 
add widget

Add Code Files to Your App

To add code files to your app, go to the Public & Backend panel in App Structure  menu. Then, select which type of code you would like to add.  

Learn more about code files in Blocks

Add More Features to Your App

You can add more abilities to your app, such as: 

Did this help?