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

# Web Builder

> Combine HTML, JavaScript, and CSS into a localhost site. Exact configuration, ports, placement, and execution behavior.

**Node type:** `web_builder` · **Version:** `1` · **Category:** System

Combine HTML, JavaScript, and CSS into a localhost site. This node can change external state or produce an external side effect.

## Configuration

| Field         | Type    | Default | What it controls                                                                                  |
| ------------- | ------- | ------- | ------------------------------------------------------------------------------------------------- |
| `html`        | string  | `""`    | HTML source, normally mapped from the `code` output of an HTML Code node.                         |
| `javascript`  | string  | `""`    | Browser-side JavaScript source, normally mapped from the `code` output of a JavaScript Code node. |
| `css`         | string  | `""`    | CSS source, normally mapped from the `code` output of a CSS Code node.                            |
| `port`        | number  | `0`     | Loopback port from 0 to 65535. Use 0 to choose an available port automatically.                   |
| `openBrowser` | boolean | `true`  | Open the generated localhost URL in the default browser after the server starts.                  |

<Note>The node card exposes separate HTML, JS, and CSS connectors. Connecting a matching Code node creates both the dependency edge and its `code` output binding.</Note>

<Note>The server binds only to `127.0.0.1`. Port 0 selects an available port, `/health` reports server status, and rerunning this node replaces its previous server for the same workflow.</Note>

<Note>The combined source is limited to 4 MB. The local site remains available while the desktop app is running.</Note>

## Workflow JSON

The editor stores this node with the following implemented default configuration:

```json title="Default node configuration" theme={"system"}
{
  "type": "web_builder",
  "version": 1,
  "configuration": {
    "html": "",
    "javascript": "",
    "css": "",
    "port": 0,
    "openBrowser": true
  }
}
```

Values may be entered literally or mapped from an earlier compatible output when the inspector exposes a mapping control. See [Variables and data mapping](/workflows/variables-and-data).

## Inputs

| Port         | Type     | Required | Description |
| ------------ | -------- | -------- | ----------- |
| `html`       | `string` | Yes      | HTML        |
| `javascript` | `string` | Yes      | JavaScript  |
| `css`        | `string` | Yes      | CSS         |

## Outputs

| Port     | Type     | Required | Description   |
| -------- | -------- | -------- | ------------- |
| `url`    | `string` | No       | Localhost URL |
| `port`   | `number` | No       | Port          |
| `status` | `string` | No       | Server status |

## Where it can run

* Desktop local runner

## Test and inspect

Use **Test node** in the editor to preview this step with the current configuration. A full run records resolved inputs, outputs, logs, duration, and any artifacts in the execution inspector. Side-effecting or destructive nodes can require an additional confirmation or approved workflow permission.