A Blocks App Workflow

Wix Blocks lets you create apps that you can reuse on as many Wix sites as you want, use on your clients' sites or publish in the Wix App Market.

Plan Your App

Here are some questions to start with, when you're planning your app:

• Does your app include site widgets? How many widgets? Note that you can use nested widgets. You can also easily create various design presets for the same widget, rather than duplicating it.
• What panels do you need for each widget? Note that you can build designated panels for various areas of your widget - no need for one large settings panel.
• Does your app use a database? If it does, consider adding a dashboard page for users to easily manage the data.
• Do you want to publish your app in the Wix App Market? If so, it's important to plan the app in a way that matches different pricing plans, such as free and premium.

Here is an example workflow for building your app. Of course, not all apps will use all features.

Create an app

Go to Custom Apps in your Wix Studio workspace and create a new app.

Add widgets

Widgets allow you to add a user-interface (UI) to your app. When designing a widget, we recommend that you start with a ready-made composition, or add layout elements such as grids, flexboxes or repeaters.

Before building your widget, read our design guidelines, to make sure that it behaves responsively and blends well with Wix sites. Use our Figma kit if you want to create your design in Figma.

To add widgets: Go to the Widgets and Design panel.

Add design presets

Design presets save you lots of work, if you want different layouts or styles for your widgets. Users can later choose between the presets when your app is installed on a site.

To add design presets: Go to the Design Presets section in the Widgets and Design panel.

Add widget code

Every widget can have its own Velo code for its business logic. Every widget can also have its own Widget API, with its own properties, events and functions.

To add widget code: make sure you are in the Widgets and Design area. Then, go to the code panel at the bottom of your widget. If you can’t see the code editor, click the Open arrow .

Configure the Editor Experience

The Editor Experience panel enables you to define the way your widget and its elements look and behave when they're installed on a site.

Make sure to go over our UX guidelines for Editor Experience so that your widgets and panels are easy to understand and useful.

In the Configuration tab, you can modify display names, set your widgets or elements as non-selectable and configure widget and element action bars (floating panels).

To define configuration settings: go to the Editor Experience panel and click Configuration.

Build Custom Panels

Your Blocks widgets and their elements come with default panels for settings, design, presets and more. You can also build custom panels for your widgets and their elements.

To create custom panels: go to the Editor Experience panel and click Panels.

Preview and test your widgets

Preview your widgets to test how they work. You can easily test how your widget looks on various site themes, and with various widget API properties.

After previewing, it's recommended to build a test version and install the app on a site, to see how it works in real life.

To test your widgets: click the Preview icon in Blocks. Then, click Build > Test Version, and install the app on a site.

Add CMS database collections

Blocks makes it easy to add collections to your app. When your app is installed on a site, it can use the default data that you provided, or data from the site.

To add CMS collections: go to the Code panel and click Databases > + Create collection.

Add a Dashboard page

The Blocks Dashboard page is your app's backoffice. It can be used to manage your database collections, or other app settings. Unlike panels, which are used per-widget, the Dashboard page serves your entire app. When a user installs your app on a site, your Dashboard page will be added to their site Dashboard, as a separate page.

To add a Dashboard page: click the App Dashboard icon, then click Add Dashboard Page.

Add code files to your app

Use Blocks to easily package and reuse code, with backend modules, and frontend files and a configuration file. Unlike the widget code that works per-widget, code files apply to the entire app.

To add code files: go to the Code panel and click Public & Backend.

Configure your app Installation Settings

Installation settings let you determine how your app is first installed on a site. You can select which widgets to show, which design presets, what to do on mobile devices, etc.

To configure installation settings: click the WixBlocks logo and go to App > Installation Settings.

Prepare your app for pricing

If you plan to publish your app in the Wix App Market, consider its behavior across different pricing plans, such as free and premium. This includes different UI and logic. Learn more about pricing plans in Blocks.

To start publishing your app in the App Market: go to to the WixBlocks icon and click App > Publish App.

Build a version of your app

Create a test, minor or major version for your app, depending on where you are in the development process.

To build a version: click Build and select your version type.

Install your app on a site

Install your app on a site to test it or use it. You can install your app on any site you own or collaborate with, or on your clients’ sites. You can also share it with a limited number of people using an install link. Finally, you can publish your app in the Wix App Market.