> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Create an App with Wix Blocks

## Article: Create an App with Wix Blocks

## Article Link: https://dev.wix.com/docs/build-apps/get-started/quick-start/create-an-app-with-wix-blocks.md

## Article Content:

# Tutorial | Create an App in Wix Blocks

In this tutorial, you'll create an app with a simple [site widget extension](https://dev.wix.com/docs/build-apps/develop-your-app/extensions/site-extensions/site-widgets/about-site-widget-extensions.md) in [Wix Blocks](https://dev.wix.com/docs/build-apps/develop-your-app/frameworks/wix-blocks/about-wix-blocks.md).

## Before you begin

* Make sure you're logged into your Wix account, or [create an account](https://www.wix.com/) if you don't have one yet.
* If you haven't done so yet, move to the new [Wix Studio workspace](https://manage.wix.com/account/custom-apps) by [joining Wix Studio](https://support.wix.com/en/article/wix-studio-switching-to-wix-studio).
* Make sure you have a Wix site that you can use for testing purposes. If you don’t have one yet, [create a new site](https://www.wix.com/website/templates/html/blank).

## Step 1 | Open the Wix Studio workspace and create an app

You can access Wix Blocks through the Wix Studio workspace.

1. Open the [Custom Apps](https://manage.wix.com/account/custom-apps) section of the Wix Studio workspace.
1. Click **Create New App**.
1. Click **Build from scratch**. 
1. Click **Wix Blocks**.

Your newly-created app opens in Wix Blocks.

## Step 2 | Design and code a site widget

We'll now build an interactive site widget in Blocks.

1. To get started, select **Blank canvas**.  
   The Wix Blocks editor opens with a default widget.
2. Let's start by adding a text element to the widget.  
   Click **Add Elements** ![add-elements-icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/blocks-quick-start-md_build-apps-portal_get-started_quick-start_images_add-elements-icon-1.png) at the top of the editor, and then click **Quick Add > Title**.  
   Your widget now looks something like this:  
   ![text-element](https://wixmp-833713b177cebf373f611808.wixmp.com/images/blocks-quick-start-md_build-apps-portal_get-started_quick-start_images_text-element-1.png)
3. Since we'll be interacting with the elements using code, we need some way to identify them. We do that using element IDs. You can see an element's ID when you hover over it or select it. When an element is selected you can change its ID using the **Properties & Events** panel.  
Change the text element's ID to be `message`.  
   ![text-id-message](https://wixmp-833713b177cebf373f611808.wixmp.com/images/blocks-quick-start-md_build-apps-portal_get-started_quick-start_images_text-id-message.png)
1. To interact with an element in code, you first need to write code to select it. Now that our element has a unique identifier, selecting it with code is easy. We use the `$w()` selector function to select an element by ID. We simply pass the element's ID, preceded by a hashtag (`#`). So, to select an element with the ID `elementId`, we write `$w('#elementId')`.  
Once an element is selected, we can use its properties and functions to interact with it. So, we can use the text element's text property to change the message like this:  
`$w('#message').text = 'Hello World';`  
Place this code in the `onReady` event handler that appears in the Code Panel by default. Code in the `onReady` event handler runs during the widget loading process when all the elements in the widget have finished loading.
The code should look like this:

   ```js
   $w.onReady(function () {
       $w('#message').text = 'Hello World';
   });
   ```

1. Next, let's run some code in response to a button on our widget being clicked.  
​First, we'll need to add a button to the widget.  
   Click **Add Elements** ![add-elements-icon](https://wixmp-833713b177cebf373f611808.wixmp.com/images/blocks-quick-start-md_build-apps-portal_get-started_quick-start_images_add-elements-icon-1.png) on the top of the editor, and then click **Quick Add > Button**.  
Give it the ID `button`.

1. We’ll change what the button says, just like we did for the text element. To change the text of a button, make sure to use the label property. The code to change the button's text should look like this together with the previous code:  
   ```js
   $w.onReady(function() {
       $w('#message').text = 'Hello World';
       $w('#button').label = 'Click Me';
   });
   ```
2. Finally, we'll add code that responds to the button being clicked. We again start by using the `$w()` function to select the button. Then we use the `onClick()` function to define what happens when the button is clicked. In this case, let's change the contents of the text element when the button is clicked.  
Place the following code below the existing code:

   ```js
   $w('#button').onClick (() => {
       $w('#message').text = 'Hello from Blocks!';
   });
   ```

   So, the complete code looks like this:

   ```js
   $w.onReady(function () {
       $w('#message').text = 'Hello World';
       $w('#button').label = 'Click Me';
   });

   $w('#button').onClick(() => {
       $w('#message').text = 'Hello from Blocks!';
   });
   ```

1. Click **Preview** ![blocks-preview](https://wixmp-833713b177cebf373f611808.wixmp.com/images/blocks-quick-start-md_build-apps-portal_get-started_quick-start_images_blocks-preview.png) at the top of the editor to preview your widget.  
When previewing the widget, click the button on the widget to see the text change.

## Step 3 | Install your app on a site

We'll now install the app on a site to see how the widget behaves in the site editor.

1. In the top-right corner, click **Build**.  
   When prompted to provide an app name, enter any name you like and then click **Save & Continue**.
2. When prompted to select the type of version to build, select **Test version**.  
3. When your test version is built, click **Select a Site** and select the site that you'd like to test your app on.  
   The selected site opens in the editor.
4. Click **Install App**.  
   When the app is installed, the **Add Elements** panel opens, showing your widget.
5. Click the widget to add it to the current page.

The widget is now added to the site. You can drag it, resize it, and modify its design using the widget's action bar.

![widget-on-site](https://wixmp-833713b177cebf373f611808.wixmp.com/images/blocks-quick-start-md_build-apps-portal_get-started_quick-start_images_widget-on-site.png)

## Next steps

You now have a fully working app that can be installed on Wix sites. Take some time to play around with the widget in Blocks and try to add more features to your app.

Use the following resources to continue building your app:

* [Editor elements](https://support.wix.com/en/article/studio-editor-adding-elements-4240855): Learn about the types of elements that you can add to your widget.
* [Coding in Blocks](https://support.wix.com/en/article/wix-blocks-about-coding-in-blocks): Learn how to add code to an individual widget, as well as code for the entire app.
* [Editor experience](https://support.wix.com/en/article/wix-blocks-about-configuration): Learn how to control the way site creators interact with your widget in the editors.
* [App templates](https://dev.wix.com/apps-templates?filter=blocks): Explore templates that demonstrate how to build Blocks apps.
* [Extension catalog](https://dev.wix.com/docs/build-apps/get-started/overview/how-apps-extend-wix.md#extension-catalog): Learn about other extensions you can add to your app.