# Running the examples

Try WU APIs, connect React and Vue, and explore a service with contracts, RPC, permissions, and cleanup.

Also try [Apps in motion](/labs/interaction/): a React editor, Vue inbox, windows and PiP, typed delivery, transitions and keep-alive. The [scenario guide](/docs/guides/interactive-workspace/) explains how to apply it to your application.

<span id="elige-qué-quieres-comprobar"></span>

<span class="section-anchor" id="section-1"></span>

## Choose what to check

If you just created `mi-plataforma` and added `inspector`, start with **Shared counter**, then continue with **Sum between apps**. Both guides include complete files and a ZIP to apply to the same workspace. Laboratories let you explore more scenarios from this portal afterward.

| Flow | What it runs | Where to open it |
| --- | --- | --- |
| Shared counter | Connects your workspace's React and Vue counters through the store | [Guide and files](/docs/guides/shared-counter/) |
| Sum between apps | Adds client and provider with RPC, manifests, and permissions | [Guide and files](/docs/guides/rpc-between-apps/) |
| API recipes | RPC, contracts, grants, hooks, plugins, timeline, synchronization, and loading | [Laboratory](/labs/) |
| Composition | React/Vue mounting, shared counter, and event publishing | [React and Vue](/labs/composition/) |
| Services and RPC | Contract consumption, versioned request, response, cancellation, and revocation | [Connected service](/labs/backend/) |
| CLI builder | Generates and copies a command to run later in your terminal | [Composition](/labs/composition/) |
| SSR, AI, and MCP | Node rendering, local actions, and a browser-connected relay | [Downloadable examples](/examples/wu-server-recipes.zip) |

The [API explorer](/api/) lets you review signatures, parameters, returns, errors, permissions, and cleanup before running a recipe. The [coverage map](/api/coverage/) connects the 397 catalog entries to available examples. These entries do not represent a framework testing percentage.

<span id="ejecutar-una-receta-de-api"></span>

<span class="section-anchor" id="section-2"></span>

## Running an API recipe

Open the [laboratory](/labs/), choose a recipe, and run it. Selection alone starts no work. Each check shows what was expected and what happened; completion also reports resource cleanup.

The eight recipes contain **49 checks** for their scenarios. A successful run verifies these specific conditions, not every possible API combination.

| Recipe | Observable operations |
| --- | --- |
| [RPC](/labs/?recipe=rpc) | Handler response, incompatible range, timeout, abort signal, and provider removal |
| [Contracts](/labs/?recipe=contracts) | `provide`, `consume`, compatible-version access, revocation, and provider replacement |
| [Grants](/labs/?recipe=grants) | Manifest requests, shell grants, permitted writes, denial, and revoked facade after `unmount` |
| [Hooks](/labs/?recipe=hooks) | Priority, continuation with `next()`, cancellation, and mounting after guard removal |
| [Plugins](/labs/?recipe=plugins) | Plugin-granted permissions, event reception, and listener removal on uninstall |
| [Timeline](/labs/?recipe=timeline) | Change recording, `seek`, return to live state, and effects that do not rewind |
| [Synchronization](/labs/?recipe=sync) | Two stores and real BroadcastChannel messages, followed by channel closure |
| [Loading](/labs/?recipe=loading) | Strategies, hints, local module loading, mounting, allowed overrides, and cache expiration |

Share the URL with `?recipe=rpc` or another table identifier. `/labs/api/` retains access to the same laboratory. Displayed code corresponds to recipes included in the project; the interface does not evaluate visitor-supplied text.

Each run creates its own WU instance in the current document. Apps mount into elements inside a Shadow DOM; the runner releases its handlers, contracts, listeners, channels and apps when it finishes. Canceling, changing recipes or removing the component requests abort and cleanup. If cleanup is not confirmed in time, the receipt says so and diagnostics retain the pending resources.

<span id="del-laboratorio-a-tu-código"></span>

<span class="section-anchor" id="section-3"></span>

## From the laboratory to your code

In recipe source, **`h` is this portal's test helper**. It is not imported from `wu-framework`. The runner creates that object and passes it to the recipe function.

| In the recipe | In your project |
| --- | --- |
| `const { wu } = h` | Import `wu` from `wu-framework` in the shell's client module. |
| `h.init(...)` | The shell calls `await wu.init({ apps, ... })` with its real catalog. |
| `h.app(nombre, grants)` | An `apps` entry with `name`, the URL serving its `wu.json`, and granted `grants`. |
| `h.check` / `h.rejects` | Test checks; your interface displays results or handles errors with `try`/`catch`. |
| `h.defer` | Registers test cleanup. In an app, retain unsubscribe functions and execute them in `unmount`. |
| `h.sleep` / `h.until` | Test-scenario waits; not WU runtime methods. |

The **Test helper (h)** and **Recipe runner** links expose this infrastructure. In Grants, **App manifest** shows requested permissions: compare them with the code's `granted` array. The app requests writing to `docs.api.*`, but the shell grants only `docs.api.allowed`; writing `docs.api.denied` must therefore fail.

<span id="una-página-astro-con-rpc"></span>

<span class="section-anchor" id="section-4"></span>

## An Astro page with RPC

The [A sum between applications](/docs/guides/rpc-between-apps/) recipe brings **7 + 8 = 15** to your workspace: one app receives numbers, another calculates, and the Astro shell grants permissions and mounts them in order. It also includes a recoverable failure when stopping the provider.

Download [wu-rpc-sum.zip](/examples/wu-rpc-sum.zip) and follow the guide to add the apps before copying their files. Apply the ZIP inside `mi-plataforma/`; the README lists every destination. The resulting page is `shell/src/pages/suma.astro`. If you already created the sum running entirely in the host, replace that file with the complete recipe.

Each app uses the `context.wu` received on mount. Manifests request permissions; the host grants them. You can follow the complete `cliente → request → handle del proveedor → respuesta` flow, inspect each side's code, and check what happens when the service disappears.

<span id="compartir-estado-y-eventos-entre-react-y-vue"></span>

<span class="section-anchor" id="section-5"></span>

## Sharing state and events between React and Vue

In [Composition](/labs/composition/), the shell mounts two WU apps. React controls the command builder; Vue observes the store and events. Their visual controls are Lit Custom Elements.

1. Click **+1 from React**. The value also changes in the Vue inspector through the WU store.
2. Increment or reset from Vue. React receives the new value.
3. Change the name and framework in the builder. **Publish to the bus** shares the command and produces an event displayed by the inspector.
4. Click **Pause subscriptions** in Vue and increment from React again. The store changes while the inspector keeps observation paused.
5. Reconnect: Vue rereads the current value and registers subscriptions.
6. Unmount an app from its toolbar and mount it again. Observe lifecycle and resource removal for that instance.

The counter uses `docs.lab.counter`; the last command uses `docs.lab.lastCommand`. Events are `docs:lab:counter`, `docs:lab:command`, and `docs:lab:lifecycle`. See [state](/docs/framework/state/), [communication](/docs/framework/communication/), and [lifecycle](/docs/framework/lifecycle/) to apply the pattern to your applications.

The copy button generates text for your terminal. The portal does not execute the WU CLI binary, install packages, or modify the visitor's system. To create a real workspace, follow [Your first workspace](/docs/guides/quickstart/) and the [CLI reference](/docs/cli/api-reference/).

<span id="seguir-una-solicitud-entre-aplicaciones"></span>

<span class="section-anchor" id="section-6"></span>

## Following a request between applications

Open [Services and RPC](/labs/backend/) to observe a client consuming `docs:backend:service` and calling its provider's published channel.

First send a manifest with `name` and `entry`. Then remove `entry`, request an incompatible version, or unmount the provider. These cases distinguish service-rejected data, a contract not satisfying the range, and a provider that became unavailable.

The slow recipe allows cancellation during execution. The provider connects WU's signal to interruption of its work; stopping only the client's wait would not guarantee this. [A WU-connected service](/docs/guides/browser-backend/) explains signatures, grants, versions, and cleanup.

<span id="ejecutar-los-ejemplos-node"></span>

<span class="section-anchor" id="section-7"></span>

## Running the Node examples

Download and extract [wu-server-recipes.zip](/examples/wu-server-recipes.zip). From the extracted folder, with Node 22.12 or later:

```sh
npm install
npm test
npm run test:mcp
```

`npm test` checks SSR and local actions. The MCP test needs a compatible browser and connects a relay process to a real page. Follow [SSR](/docs/framework/server-recipes/) and [AI/MCP](/docs/framework/ai-recipes/) to prepare requirements and run each case. Opening the portal's static page does not turn these recipes into Node services.

<span id="versiones-e-implementación"></span>

<span class="section-anchor" id="section-8"></span>

## Versions and implementation

Homepage examples, labs and downloads use WU Framework **4.0.0**; terminal guides use CLI **1.2.0**. Read [distribution](/sources/) and [migration](/docs/guides/releases/) before upgrading an existing project.

The service implementation uses a Worker and a WASI program to process real data in the browser without deploying a server. This infrastructure sits behind the WU provider: it enables the example while the studied contract remains `provide`/`consume`, `handle`/`request`, permissions, and lifecycle. It adds no general WASI engine to the framework and replaces neither an HTTP listener, Node SSR, nor an MCP relay.