# Adding bricks to mods

Watch this 23-second video **or** read the steps below to learn how to add, copy, and delete bricks in your mod.

{% embed url="<https://youtu.be/AeNKd1lW-PA>" %}

### Adding Bricks to New Mods

You'll add bricks to mods inside Page Editor. Make sure you're comfortable with the [page-editor-components](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components "mention") before adding bricks, as it will be helpful to understand what is happening in each of the panels.

#### **1. Open the Page Editor.**

{% hint style="info" %}
Having trouble finding the Page Editor? Check [these docs](https://docs.pixiebrix.com/platform-overview/page-editor/open-the-page-editor), and make sure your Chrome Dev Tools are docked at the bottom of the page instead of to the right. Your screen should look like this:
{% endhint %}

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FPmaZDgnbSAF110dN0Sh3%2Fimage.png?alt=media&#x26;token=f8f8abea-af32-4d0a-b93a-4555d0976bab" alt=""><figcaption></figcaption></figure>

#### 2. Add a starter brick.

Every mod must begin with a special type of brick, called a Starter Brick. **Before searching for other bricks, you'll need to pick one of the from one of the Starter Bricks**, which can be found by clicking the green Add button in the top left of the Page Editor, next to the PixieBrix logo.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FCW8WtWBp4ZCGjVHpqdxe%2F2023-11-22%20at%2011.47.11%20-%20Rose%20Lamprey.gif?alt=media&#x26;token=ce89d16f-b3e2-45c6-b648-af178be6e084" alt=""><figcaption></figcaption></figure>

If you're curious about which starter brick to choose, you can [learn more about the types of starter bricks](https://docs.pixiebrix.com/developing-mods/developer-concepts/types-of-mods), but starting with a **Context Menu** is the simplest.

{% hint style="info" %}
You're ready to move to the next step when you have a starter brick at the top of the Brick Actions panel. *(*[*What's that*](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel)*?)*\
![](https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Fed8tKqevavXkDV8vQq2z%2Fimage.png?alt=media\&token=5012237d-2e33-4cf0-a66f-20911b103e6a)
{% endhint %}

#### 3. Click the + button below your starter brick

Below the starter brick, you should see a + icon. Click that to open the Add Brick modal.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FNwUylTznjDNm0amRW5wY%2Fimage.png?alt=media&#x26;token=d5909162-dd2d-4f3f-92a3-4b01d0f27cd8" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
Skip to [#using-the-add-brick-modal](#using-the-add-brick-modal "mention") for next steps.
{% endhint %}

### Adding Bricks to Existing Mods

If you want to add a brick to an existing mod (one that already has at least a starter brick and perhaps other bricks as well), click the **+** button below any brick to open the Add brick modal.

{% hint style="info" %}
You can always move the brick up or down later if you need to
{% endhint %}

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FzHFyXOPBIee8Cj0eV5NL%2Fimage.png?alt=media&#x26;token=e2e25be6-b592-4a36-9798-0c5ba37a6c53" alt=""><figcaption></figcaption></figure>

### Using the Add Brick Modal

#### 1. Search for a brick

Once the Add Brick Modal has appeared, search in the top bar for a brick that serves the purpose you need. If you're using a specific tool, such as Google Sheets, you might search for `Google`. Or if you need to extract data from a page, you might search `extract`.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Fg1gJue7UfzH4W0fQuPIT%2Fimage.png?alt=media&#x26;token=1805a77d-4c74-4ea9-9d3a-a9d733439dbb" alt=""><figcaption></figcaption></figure>

You can also use the categories on the left side to look for bricks by category.

{% hint style="info" %}
You're ready to move to the next step when you see a brick you'd like to add below the search field.
{% endhint %}

#### 2. Hover over the desired brick and click +Add

Mouse over the brick you want to add, and you'll see a blue **+Add** button appear.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FGTj0lvFklsw9A4iTvyN9%2Fimage.png?alt=media&#x26;token=8d35c6d3-cc1b-4056-9724-d75dab880f3d" alt=""><figcaption></figcaption></figure>

Click the **+Add** button and your new brick will be added to your Brick Actions pipeline, ready for you to configure.

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FMvl1amZPvceVpIdb4bte%2Fimage.png?alt=media&#x26;token=14156214-3495-4300-a363-c5f9c1e42b0c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
You've successfully added your brick when you see the desired brick in the Brick Actions Pipeline.
{% endhint %}

### Copying Bricks

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FPKCE7xqdzcRGIMTDs1lI%2F2023-11-22%20at%2012.34.03%20-%20Chocolate%20Mammal.gif?alt=media&#x26;token=2303e05d-81cc-441a-bc39-60eedcef0324" alt=""><figcaption></figcaption></figure>

To copy a brick, make sure the desired brick is selected in the Brick Actions Pipeline *(*[*What's that*](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel)*?)*. You'll know it's selected when the brick is blue.

At the top of the Brick Actions Pipeline, click the **copy** icon.&#x20;

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2Fbxc8W5w6evLJM9uYgTjD%2Fimage.png?alt=media&#x26;token=586949a2-384b-4e4f-97da-75a9ff111c70" alt=""><figcaption></figcaption></figure>

You'll notice after each brick there is a paste icon. Click the area you'd like the copied brick to be pasted.&#x20;

Your copied brick will appear in the location where you clicked the paste icon.

### Deleting a Brick

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FT1c52tz7ZvV9WDQSA6Cd%2Fimage.png?alt=media&#x26;token=c71bc40e-eb4c-4fd7-8a38-3b803e8233b8" alt=""><figcaption></figcaption></figure>

If you want to delete a brick, make sure the desired brick is selected in the Brick Actions Pipeline *(*[*What's that*](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel)*?)*. You'll know it's selected when the brick is blue.

Click the trash can icon at the top of the Brick Actions panel.&#x20;

Your brick will be removed.&#x20;

{% hint style="danger" %}
At this time there is no way to undo the Remove Brick action.
{% endhint %}

### Moving a Brick

<figure><img src="https://2274778196-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fq123bF1HPQPV35s5vHa1%2Fuploads%2FxrQtv4lxAkp233ZnZWvm%2Fimage.png?alt=media&#x26;token=2e5d5ba6-98cb-4224-b7b8-1043d2bb6991" alt=""><figcaption></figcaption></figure>

To move a brick, find the desired brick in the Brick Actions Panel *(*[*What's that*](https://docs.pixiebrix.com/platform-overview/page-editor/page-editor-components/brick-actions-panel)*?)* and click the up or down arrow on the brick to move it's location above or below the bricks around it. Keep doing this until the brick is in the position you'd like.