# Local development process for custom blocks

Source: https://dev.arcxp.com/themes/getting-started/local-development-process-for-custom-blocks/

The local development process for custom blocks leverages the local installation of PageBuilder Engine. This guide walks you through the requirements and key configurations you must set up before developing custom blocks.

## Out-of-the-box Arc XP Blocks

As an Arc XP customer, you can access a collection of Arc XP Blocks and components that are ready to use in PageBuilder Editor. However, if the out-of-the-box Arc XP Blocks do not meet your needs, you can develop and test custom blocks in your local environment. For a complete list and details of Arc XP Blocks and components, see [Components and blocks storybooks](https://dev.arcxp.com/themes/components-and-blocks-storybook/).

## Prerequisites for developing custom blocks

Before developing custom blocks, you must configure a local development environment following these quickstart guides:

- [Setting up your dev playground](https://dev.arcxp.com/tutorials/quick-start/set-up-your-dev-playground/)
- [Configuring local environment variables](https://dev.arcxp.com/tutorials/quick-start/configure-local-environment-variables/)

## Step 1\. Add the `blocks.json` file to your project

The `blocks.json` file specifies which blocks you want available in your bundle and contains various configurations for your organization’s websites. To add the `blocks.json` file to your project, take the following steps:

1. [Download your live bundle](https://dev.arcxp.com/pagebuilder-engine/how-to-guides/optimization-and-deployment/how-to-deploy-a-bundle/#deployment-history)
2. Open (extract) your downloaded bundle and find `blocks.json`
3. Copy `blocks.json` to the root directory of your project

> **Tip:**
> 
> Your project is in the directory where you ran the `npx @arc-fusion/cli init` command from the [Setting up your dev playground](https://dev.arcxp.com/tutorials/quick-start/set-up-your-dev-playground/) guide.

## Step 2\. Add the `arc-themes-components` dependency to your project

To use Arc XP Blocks locally, you must add the `arc-themes-components` dependency to your project. On the terminal, run the following command:

Terminal window

```bash
npm install @wpmedia/arc-themes-components@arc-themes-release-version-4.x.x
```

> **Caution:**
> 
> The `arc-themes-components` version specified in the `package.json` file must match the version specified in the `themesReleaseVersion` property of the `blocks.json` file. See the latest themes version in the [Arc Themes Components Repository](https://github.com/WPMedia/arc-themes-components) to keep your dependencies up-to-date.

## Step 3\. Start PageBuilder Engine

Before starting PageBuilder Engine, open the Docker desktop application to start the Docker daemon. Then run the following command:

Terminal window

```bash
npx fusion start
```

## Step 4\. Start developing custom blocks

At this point, you are ready to start developing custom blocks. Use the following guides:

- To build a block from scratch, see [Creating a custom block with styling](https://dev.arcxp.com/themes/developer-docs/creating-a-custom-block-with-styling/)
- To use an existing block as a starting point for your development, see [Ejecting (forking) an Arc XP block](https://dev.arcxp.com/themes/developer-docs/ejecting-an-arc-block/)