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: a React editor, Vue inbox, windows and PiP, typed delivery, transitions and keep-alive. The scenario guide explains how to apply it to your application.
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 |
| Sum between apps | Adds client and provider with RPC, manifests, and permissions | Guide and files |
| API recipes | RPC, contracts, grants, hooks, plugins, timeline, synchronization, and loading | Laboratory |
| Composition | React/Vue mounting, shared counter, and event publishing | React and Vue |
| Services and RPC | Contract consumption, versioned request, response, cancellation, and revocation | Connected service |
| CLI builder | Generates and copies a command to run later in your terminal | Composition |
| SSR, AI, and MCP | Node rendering, local actions, and a browser-connected relay | Downloadable examples |
The API explorer lets you review signatures, parameters, returns, errors, permissions, and cleanup before running a recipe. The coverage map connects the 397 catalog entries to available examples. These entries do not represent a framework testing percentage.
Running an API recipe
Open the laboratory, 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 | Handler response, incompatible range, timeout, abort signal, and provider removal |
| Contracts | provide, consume, compatible-version access, revocation, and provider replacement |
| Grants | Manifest requests, shell grants, permitted writes, denial, and revoked facade after unmount |
| Hooks | Priority, continuation with next(), cancellation, and mounting after guard removal |
| Plugins | Plugin-granted permissions, event reception, and listener removal on uninstall |
| Timeline | Change recording, seek, return to live state, and effects that do not rewind |
| Synchronization | Two stores and real BroadcastChannel messages, followed by channel closure |
| 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.
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.
An Astro page with RPC
The A sum between applications 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 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.
Sharing state and events between React and Vue
In 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.
- Click +1 from React. The value also changes in the Vue inspector through the WU store.
- Increment or reset from Vue. React receives the new value.
- Change the name and framework in the builder. Publish to the bus shares the command and produces an event displayed by the inspector.
- Click Pause subscriptions in Vue and increment from React again. The store changes while the inspector keeps observation paused.
- Reconnect: Vue rereads the current value and registers subscriptions.
- 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, communication, and 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 and the CLI reference.
Following a request between applications
Open Services and RPC 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 explains signatures, grants, versions, and cleanup.
Running the Node examples
Download and extract wu-server-recipes.zip. From the extracted folder, with Node 22.12 or later:
npm install
npm test
npm run test:mcpnpm test checks SSR and local actions. The MCP test needs a compatible browser and connects a relay process to a real page. Follow SSR and AI/MCP to prepare requirements and run each case. Opening the portal’s static page does not turn these recipes into Node services.
Versions and implementation
Homepage examples, labs and downloads use WU Framework 4.0.0; terminal guides use CLI 1.2.0. Read distribution and migration 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.