TurboWarp React Islands

This extension describes React islands for HTML responses produced by turbowarp-http-server and turbowarp-html.

Blocks

MVP boundary

The extension returns descriptors and HTML fragments. React, React DOM, MUI, hooks, CSS, hydration, and Vite dev/build integration belong to the application bundle.

Descriptor shape

{
  "kind": "react-island",
  "version": 1,
  "component": "Counter",
  "mountId": "counter-root",
  "props": {"initialCount": 0}
}

TurboWarp React Islands: complete block reference

All 4 blocks are documented below, including compatibility blocks and blocks available through optional features. Select a block to read its behavior, arguments, default values, and menu choices. Each block has a permanent link.

register React component [COMPONENT] from [MODULE]

Registers a React component name and the browser module that will hydrate it later.

Block type: COMMAND. Opcode: registerComponent. Permanent link

ArgumentTypeDefault valueMenu choices
COMPONENTSTRINGCounter
MODULESTRING/assets/react-islands.js

React island [COMPONENT] at [MOUNT_ID] props [PROPS_JSON]

Returns a JSON mount descriptor for a React island.

Block type: REPORTER. Opcode: reactIsland. Permanent link

ArgumentTypeDefault valueMenu choices
COMPONENTSTRINGCounter
MOUNT_IDSTRINGcounter-root
PROPS_JSONSTRING{"initialCount":0}

React island HTML [COMPONENT] at [MOUNT_ID] props [PROPS_JSON]

Returns a safe HTML fragment that marks where a React island should be mounted.

Block type: REPORTER. Opcode: reactIslandHtml. Permanent link

ArgumentTypeDefault valueMenu choices
COMPONENTSTRINGCounter
MOUNT_IDSTRINGcounter-root
PROPS_JSONSTRING{"initialCount":0}

React component registry JSON

Returns the registered React component registry as JSON.

Block type: REPORTER. Opcode: componentRegistryJson. Permanent link

This block has no arguments.

Repository guide and examples