> ## Documentation Index
> Fetch the complete documentation index at: https://docs.superblocks.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Developing apps in code

> Extend applications by editing the underlying React code in your IDE

Superblocks supports two-way editing, allowing you to edit the underlying React code directly in your preferred IDE (Cursor, Windsurf, VSCode, etc.). Any changes you make sync instantly with the editor.

## Enabling local edit mode

To enable local editing, click **Cloud editing** in the bottom right corner of the screen, then follow the instructions in the modal.

<img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/local-editing-instructions.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=5adb7a3b4e36f618162b94a0cc367aad" alt="Local editing" style={{ width: '60%' }} width="1824" height="2016" data-path="images/building-with-clark/local-editing-instructions.png" />

### 1. Select your preferred IDE

Choose between VSCode and Cursor—this will be used for installing the **optional** Superblocks extension. For any other IDE, you can still edit apps locally with the Superblocks CLI. More on this below.

### 2. Install Superblocks CLI

Run the `npm` install command from the in-app modal, replacing `2.0.X` with the latest version.

```bash theme={null}
npm install -g @superblocksteam/cli@2.0.X --foreground-scripts --loglevel=notice
```

### 3. Install Superblocks extension

If using VSCode or Cursor, click the download button to install the Superblocks extension for your selected IDE.

### 4. Download application

Click the download button to download the application code to your computer. The first time an application initializes, you will be prompted to enter your personal API key from the [personal settings page](https://app.superblocks.com/personal-settings#profile).

Once the application is downloaded, you can explore the project structure, pages, components, and APIs.

<img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/local_app.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=664ed9b4393fe9ecee3992edb16947c5" alt="Local app" width="2620" height="1884" data-path="images/building-with-clark/local_app.png" />

### 5. Start the local dev server

If using the Superblocks extension, select the koala logo in your IDE and click **Start Dev Server**. When prompted, choose whether you want to upload your files from local or download the latest files from the app.

<div style={{ display: 'flex', gap: '1rem', alignItems: 'flex-start' }}>
  <img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/local_start_dev_server.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=fd81aac2115c9f86f2056850cc2bcc19" alt="Local start dev server" style={{ width: '50%' }} width="1436" height="952" data-path="images/building-with-clark/local_start_dev_server.png" />

  <img src="https://mintcdn.com/superblocks/tt5q66tB8IiNvsPL/images/building-with-clark/local_start_dev_prompt.png?fit=max&auto=format&n=tt5q66tB8IiNvsPL&q=85&s=09faabb97dc7285b7d629432ffe680d8" alt="Local start dev prompt" style={{ width: '50%' }} width="3888" height="2540" data-path="images/building-with-clark/local_start_dev_prompt.png" />
</div>

If you are not using the extension, you can still start the local dev server using the Superblocks CLI command:

```bash theme={null}
superblocks dev [--upload-first] [--download-first]
```

### 6. Enable local dev mode

Once the dev server is running locally, navigate back to Superblocks and toggle on local dev mode. The bottom right corner will now show **Local editing**. Any edits you make in your local application will sync back to Superblocks, and vice versa.

<img src="https://superblocks-demo.s3.us-west-2.amazonaws.com/code-mode.gif" alt="Code mode" />