PlayHTML

https://github.com/spencerc99/playhtml
Admin
A fast, library-agnostic library for creating interactive, collaborative HTML elements that persist...
Tokens:64,762
Snippets:709
Trust Score:9.9
License:MIT
Update:5 months ago
Show doc for...
Tokens:
Raw
### Generate React Starter Project

Source: https://github.com/spencerc99/playhtml/blob/main/templates/README.md

Use this command to scaffold a new project with the React starter template. Install dependencies and start the development server.

```bash
npx degit playhtml/playhtml/templates/react-starter my-project
cd my-project
bun install
bun dev
```

--------------------------------

### Start PartyKit Dev Server

Source: https://github.com/spencerc99/playhtml/blob/main/CLAUDE.md

Starts the PartyKit development server for real-time synchronization.

```bash
bun dev-server
```

--------------------------------

### Start Extension Dev Server

Source: https://github.com/spencerc99/playhtml/blob/main/CLAUDE.md

Starts the browser extension development server with WXT hot reload.

```bash
bun dev-extension
```

--------------------------------

### Start Local Development Server

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/README.md

Starts the local development server, typically accessible at `localhost:4321`. This command is used for active development and previewing changes in real-time.

```bash
bun dev
```

--------------------------------

### Install Project Dependencies

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/README.md

Installs all necessary dependencies for your Astro + Starlight project. Run this after cloning the repository or creating a new project.

```bash
bun install
```

--------------------------------

### Install @playhtml/react

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/using-react.md

Install the React package for PlayHTMLL. Compatible with React 16.8 and above.

```bash
npm install @playhtml/react
```

--------------------------------

### Run Local Smoke Tests

Source: https://github.com/spencerc99/playhtml/blob/main/smoke-tests/README.md

Execute the local smoke tests after building the site. This includes installing necessary browsers if it's a one-time setup.

```bash
bun build-site
bun run -C smoke-tests install-browsers   # one-time
bun smoke
```

--------------------------------

### Install playhtml React Packages

Source: https://github.com/spencerc99/playhtml/blob/main/README.md

For React projects, install the necessary playhtml packages using npm.

```bash
npm install @playhtml/react @playhtml/common
```

--------------------------------

### Create Astro Project with Starlight Template

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/README.md

Use this command to create a new Astro project pre-configured with the Starlight template. Ensure you have Bun installed.

```bash
bun create astro@latest -- --template starlight
```

--------------------------------

### Composed Grid Example

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/capabilities.mdx

Demonstrates a composed grid of interactive cards, each linking to a live experiment. These examples showcase combinations of can-play, per-user awareness, and shared state.

```html
<div class="ph-composed-grid">
  <a class="ph-composed-card" href="https://playhtml.fun/experiments/4/" target="_blank" rel="noopener">
    <span class="ph-composed-card__kicker">EXPERIMENT · 04</span>
    <span class="ph-composed-card__title">Every color</span>
    <span class="ph-composed-card__body">A page where every visitor adds one color. can-play + per-user awareness + an ever-growing shared palette.</span>
  </a>
  <a class="ph-composed-card" href="https://playhtml.fun/fridge" target="_blank" rel="noopener">
    <span class="ph-composed-card__kicker">COMMUNITY · FRIDGE</span>
    <span class="ph-composed-card__title">Fridge poetry</span>
    <span class="ph-composed-card__body">can-move + can-play + selector-id. Arrange magnets with strangers. Saves forever.</span>
  </a>
  <a class="ph-composed-card" href="https://playhtml.fun/experiments/5/" target="_blank" rel="noopener">
    <span class="ph-composed-card__kicker">EXPERIMENT · 05</span>
    <span class="ph-composed-card__title">Minute faces (together)</span>
    <span class="ph-composed-card__body">1,440 minutes in a day, one color per minute. Paint the clock with everyone who shows up that minute.</span>
  </a>
</div>
```

--------------------------------

### Initialize PlayHTML with Basic Options

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/reference/init-options.md

Demonstrates the basic initialization of playhtml with a specified room and cursor settings. This is a common starting point for integrating playhtml into an application.

```javascript
import { playhtml } from "playhtml";

playhtml.init({
  room: "my-room",
  cursors: { enabled: true },
  // …
});
```

--------------------------------

### Vanilla HTML Setup for PlayHTMl

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/integrations/building-with-ai.md

Configure custom properties and initialize PlayHTMl for vanilla HTML elements. Ensure all properties are set before calling playhtml.init().

```javascript
const element = document.getElementById("myElement");

element.defaultData = { /* ... */ };
element.onClick = (e, { data, setData }) => { /* ... */ };
element.updateElement = ({ data }) => { /* ... */ };

import { playhtml } from "https://unpkg.com/playhtml";
playhtml.init();
```

--------------------------------

### Vanilla HTML: Import + Manual Init (npm)

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/getting-started.mdx

Install playhtml via npm and import it into your project when using a bundler. Ensure playhtml.init() runs after your interactive elements are in the DOM.

```bash
npm install playhtml
```

```javascript
import { playhtml } from "playhtml";
playhtml.init({ cursors: { enabled: true } });
```

--------------------------------

### Install Claude Code Plugin for playhtml

Source: https://github.com/spencerc99/playhtml/blob/main/README.md

Install the playhtml plugin for Claude Code to enhance its ability to build playhtml elements.

```bash
claude plugin marketplace add spencerc99/playhtml
claude plugin install playhtml@playhtml
```

--------------------------------

### Create a Changeset

Source: https://github.com/spencerc99/playhtml/blob/main/CONTRIBUTING.md

Run this command to create a changeset for your changes. It will guide you through selecting affected packages, choosing a version bump type, and providing a summary.

```bash
bun run changeset
```

--------------------------------

### Initialize PlayHTML in React

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/index.mdx

This snippet demonstrates how to set up PlayHTML within a React application using the provided components. Ensure you have installed the necessary packages.

```tsx
// npm install @playhtml/react @playhtml/common
import { PlayProvider, CanToggleElement } from "@playhtml/react";

<PlayProvider>
  <CanToggleElement>
    <img id="lamp" src="/noguchi-hanging-lamp.png" />
  </CanToggleElement>
</PlayProvider>
```

--------------------------------

### React Integration for Transformed Canvas Cursors

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/presence/cursors.md

Example of initializing PlayHTMLL cursors within a React application, specifying a container element for anchoring. This setup is useful for pages with dynamic pan and zoom functionality applied via React state.

```tsx
<PlayProvider
  initOptions={{
    cursors: {
      enabled: true,
      container: ".content",
    },
  }}>
  <div className="content">
    {/* pan/zoom transform applied here via React state */}
    {words.map(w => <FridgeWord key={w.id} {...w} />)}
  </div>
</PlayProvider>
```

--------------------------------

### React: Setup for Duplicating Elements

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/capabilities.mdx

React integration for 'can-duplicate' typically requires setupPlayElement for new clones to register correctly. Refer to 'Dynamic elements' for details.

```tsx
// React wiring for can-duplicate typically pairs with setupPlayElement
// so freshly-mounted clones register themselves. See "Dynamic elements".
```

--------------------------------

### Flat Data Shape Example

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/data-essentials.md

Example of a good, flat data shape for `defaultData`. Keeping shapes flat improves performance, reduces sync bandwidth, and makes refactoring easier.

```javascript
defaultData: { x: 0, y: 0, color: "#ff0000", size: 100 }
```

--------------------------------

### Initialize PlayHTML with Development Mode and Capabilities

Source: https://github.com/spencerc99/playhtml/blob/main/website/test/shared-test-source.html

Initializes PlayHTML with a specified host, enabling development mode and custom capabilities like 'can-post'. This setup is crucial for enabling features such as dynamic data updates and element registration.

```javascript
import { playhtml } from "../../packages/playhtml/src";
console.log("🎯 Initializing PlayHTML...");
try {
  // Initialize playhtml with development mode and can-post capability
  await playhtml.init({
    host: "localhost:1999",
    extraCapabilities: {
      "can-post": {
        defaultData: [],
        defaultLocalData: {
          addedEntries: new Set()
        },
        updateElement: ({ data: entries, localData: { addedEntries }, setLocalData, }) => {
          const entriesToAdd = entries.filter(
            (entry) => !addedEntries.has(`${entry.name}-${entry.timestamp}`)
          );
          const guestbookDiv = document.getElementById("guestbookMessages");
          if (!guestbookDiv) return;
          entriesToAdd.forEach((entry) => {
            const newEntry = document.createElement("div");
            newEntry.classList.add("guestbook-entry");
            const entryDate = new Date(entry.timestamp);
            const time = entryDate.toTimeString().split(" ")[0];
            const isToday = entryDate.toDateString() === new Date().toDateString();
            const dateString = (() => {
              const now = new Date();
              if (
                now.getFullYear() !== entryDate.getFullYear() ||
                now.getMonth() !== entryDate.getMonth()
              ) {
                return "Sometime before";
              } else if (isToday) {
                return "Today";
              } else if (now.getDate() - entryDate.getDate() === 1) {
                return "Yesterday";
              } else if (now.getDate() - entryDate.getDate() < 7) {
                return "This week";
              } else {
                return "Sometime before";
              }
            })();
            newEntry.innerHTML = `<span class="guestbook-entry-timestamp">${dateString} at ${time}</span> <span class="guestbook-entry-name">${entry.name}</span> <span class="guestbook-entry-message">${entry.message}</span>`;
            guestbookDiv.prepend(newEntry);
            addedEntries.add(`${entry.name}-${entry.timestamp}`);
          });
          setLocalData({ addedEntries });
        },
        onMount: ({ getElement, getData, setData }) => {
          const element = getElement();
          element.addEventListener("submit", (e) => {
            e.preventDefault();
            e.stopImmediatePropagation();
            const formData = new FormData(e.target);
            const inputData = Object.fromEntries(formData.entries());
            if (!inputData.name || !inputData.message) {
              return false;
            }
            const timestamp = Date.now();
            const newEntry = {
              name: inputData.name,
              message: inputData.message,
              timestamp,
            };
            setData((d) => {
              d.push(newEntry);
            });
            // Clear form
            element.querySelector('input[name="message" ]').value = "";
            return false;
          });
        },
      },
    },
  });

  // Update domain display
  const currentUrl = window.location.host + window.location.pathname;
  document.getElementById("current-domain").textContent = currentUrl;
  document.getElementById("current-domain-lamp").textContent = currentUrl;
  document.getElementById("current-domain-readonly").textContent = currentUrl;
  document.getElementById("current-domain-guestbook").textContent = currentUrl;

  console.log("🎯 Source page loaded - shared elements should be registered");

  // Dynamic discovery test functionality
  const sourceLogContainer = document.getElementById("source-log");
  function addSourceLog(message, type = "") {
    const entry = document.createElement("div");
    entry.textContent = `${new Date().toLocaleTimeString()}: ${message}`;
    if (type) entry.style.color = type === "discovery" ? "#007acc" : "#dc3545";
    sourceLogContainer.appendChild(entry);
    sourceLogContainer.scrollTop = sourceLogContainer.scrollHeight;
  }

  // Dynamic test for source page
  let dynamicSourceAdded = false;
  document
    .getElementById("add-dynamic-source-btn")
    .addEventListener("click", () => {
      if (dynamicSourceAdded) return;
      addSourceLog("Adding dynamic shared element (source)...", "discovery");
      const dynamicDiv = document.createElement("div");
      dynamicDiv.id = "dynamic-shared-source";
      dynamicDiv.setAttribute("shared", "");
      dynamicDiv.setAttribute("can-move", "");
      dynamicDiv.className = "moveable-box";
      dynamicDiv.innerHTML = `<div style="color: white; font-size: 1.1em">🆕 Dynamic Source</div> <div style="font-size: 0.8em; margin-top: 0.5rem; color: white"> ✨ Added after init </div>`;
      document.getElementById("dynamic-source-container").innerHTML = "";
      document
        .getElementById("dynamic-source-container")
        .appendChild(dynamicDiv);
      // This should register it as a new shared element
      playhtml.setupPlayElement(dynamicDiv);
      dynamicSourceAdded = true;
      document.getElementById("add-dynamic-source-btn").disabled = true;
      document.getElementById("remove-dynamic-source-btn").di
    });
} catch (e) {
  console.error("Error initializing PlayHTML:", e);
}
```

--------------------------------

### React Setup with PlayHTMl Provider

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/integrations/building-with-ai.md

Wrap your React components with PlayProvider to enable PlayHTMl functionality. This is required for using PlayHTMl in React applications.

```javascript
import { PlayProvider } from "@playhtml/react";

function App() {
  return (
    <PlayProvider>
      <MyPlayhtmlComponent />
    </PlayProvider>
  );
}
```

--------------------------------

### CanPlayElement Usage Example

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/reference/react-api.md

Demonstrates using CanPlayElement to manage shared state for a toggleable button, passing state and update functions via children.

```tsx
<CanPlayElement
  tagInfo={[TagType.CanToggle]}
  id="my-lamp"
  defaultData={{ on: false }}
>
  {({ data, setData }) => (
    <button onClick={() => setData({ on: !data.on }) }>
      {data.on ? "on" : "off"}
    </button>
  )}
</CanPlayElement>
```

--------------------------------

### Setting Custom Presence Channel

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/presence/index.mdx

Example of setting a custom 'status' channel to indicate a user is typing.

```js
// Set: replace semantics per channel
playhtml.presence.setMyPresence("status", { text: "typing" });
```

--------------------------------

### Add Dynamic Shared Source Element

Source: https://github.com/spencerc99/playhtml/blob/main/website/test/shared-test-source.html

Adds a dynamic shared source element and calls its setup function. This is used for testing discovery-related functionalities.

```javascript
document.getElementById("add-dynamic-source-btn").addEventListener("click", () => {
  document.getElementById("dynamic-source-container").innerHTML = "<em>Dynamic element added</em>";
  dynamicSourceAdded = true;
  document.getElementById("add-dynamic-source-btn").disabled = true;
  document.getElementById("remove-dynamic-source-btn").disabled = false;
  addSourceLog( "Dynamic shared source element added and setup called", "discovery" );
});
```

--------------------------------

### Get Help with Astro CLI

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/README.md

Displays help information for the Astro CLI, listing available commands and their options. Useful for understanding the full capabilities of the CLI.

```bash
bun astro -- --help
```

--------------------------------

### Vanilla HTML: Cloning Elements

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/capabilities.mdx

Utilize 'can-duplicate' to clone elements. This example shows cloning a bunny image and includes a script to reset spawned clones.

```html
<img id="bunny-template" src="/pixel-bunny.png" alt="" />
<button can-duplicate="#bunny-template" id="clone-btn">clone a bunny</button>

<script>
  // The "reset" button sweeps every spawned rabbit from shared state.
  document.getElementById("reset-btn").addEventListener("click", () => {
    document.querySelectorAll("[data-duplicate-source='#bunny-template']").forEach((el) => {
      playhtml.deleteElementData("can-duplicate", el.id);
      el.remove();
    });
  });
</script>
<button id="reset-btn">reset</button>
```

--------------------------------

### Initialize Playhtml with Cursors Enabled (JavaScript)

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/presence/cursors.md

Enable cursor tracking by setting `cursors.enabled` to true during Playhtml initialization. This is the basic setup for JavaScript projects.

```javascript
import { playhtml } from "playhtml";

playhtml.init({
  cursors: {
    enabled: true,
  }
});
```

--------------------------------

### Initialize PlayHTML and Track Cursors

Source: https://github.com/spencerc99/playhtml/blob/main/website/test/cursor-test.html

Initializes PlayHTML for cursor tracking and sets up event listeners for mouse movement and cursor updates. This is the primary setup for enabling collaborative cursor features.

```typescript
import { playhtml } from "../packages/playhtml/src/index.ts";

const statusElement = document.getElementById("status");
const proximityElement = document.getElementById("proximity-info");
const cursorInfoElement = document.getElementById("cursor-info");
let proximityCount = 0;

function updateStatus(message) {
  statusElement.textContent = message;
}

function updateCursorInfo() {
  if (window.cursors) {
    cursorInfoElement.innerHTML = ` Color: <span style="color: ${window.cursors.color}">●</span> ${window.cursors.color}<br>
 Name: ${window.cursors.name}<br>
 Active Users: ${window.cursors.count}<br>
 All Colors: ${window.cursors.allColors.length} `;
  }
}

// Track real cursor position
window.lastMouseX = window.innerWidth / 2;
window.lastMouseY = window.innerHeight / 2;

document.addEventListener("mousemove", (e) => {
  window.lastMouseX = e.clientX;
  window.lastMouseY = e.clientY;
});

// Initialize PlayHTML
playhtml.init({
  onCursorUpdate: updateCursorInfo,
  onProximity: addProximityEvent,
  onPlayerJoin: (player) => {
    updateStatus(`Player ${player.name} joined.`);
    updateCursorInfo();
  },
  onPlayerLeave: (player) => {
    updateStatus(`Player ${player.name} left.`);
    updateCursorInfo();
  },
});

updateStatus("Initializing cursor tracking...");
updateCursorInfo();
```

--------------------------------

### Interactive Content Editable

Source: https://github.com/spencerc99/playhtml/blob/main/website/test/playground.html

Placeholder for content that can be edited directly. This example does not include specific JavaScript for interaction but indicates the element's capability.

```html
CONTENT EDITABLE
```

--------------------------------

### Get and Subscribe to Cursor Presences

Source: https://github.com/spencerc99/playhtml/blob/main/packages/common/CHANGELOG.md

Retrieve all cursor presences and subscribe to changes. The presences are keyed by a stable ID.

```typescript
const presences = playhtml.cursorClient.getCursorPresences();

const unsubscribe = playhtml.cursorClient.onCursorPresencesChange(
  (presences) => {
    // presences is Map<string, CursorPresenceView>
  },
);

const identity = playhtml.cursorClient.getMyPlayerIdentity();
const stableId = identity.publicKey; // Persists across sessions
```

--------------------------------

### Vanilla HTML can-move Example

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/capabilities.mdx

Demonstrates the `can-move` attribute for creating draggable elements within specified bounds. The `can-move-bounds` attribute defines the container for the draggable items.

```html
<div id="arena" style="position: relative; height: 320px;">
  <img can-move can-move-bounds="arena" id="hat" src="/yankees-hat.png" alt="" />
  <img can-move can-move-bounds="arena" id="cat" src="/long-cat.png" alt="" />
</div>
```

--------------------------------

### Generate HTML Starter Project

Source: https://github.com/spencerc99/playhtml/blob/main/templates/README.md

Use this command to scaffold a new project with the HTML starter template. Then, open the generated index.html file in your browser.

```bash
npx degit playhtml/playhtml/templates/html-starter my-project
open my-project/index.html
```

--------------------------------

### Vanilla HTML Element Configuration

Source: https://github.com/spencerc99/playhtml/blob/main/claude-plugin/skills/building-playhtml-elements/SKILL.md

Configure element properties like defaultData, updateElement, and event handlers before initializing PlayHTML in vanilla JavaScript. Use this for basic element setup and event binding.

```javascript
const el = document.getElementById("myElement");
el.defaultData = { count: 0 };                           // REQUIRED
el.updateElement = ({ element, data }) => { ... };        // REQUIRED
el.onClick = (e, { data, setData }) => { ... };
el.onDrag = (e, { data, setData, localData, setLocalData }) => { ... };
el.onDragStart = (e, { setLocalData }) => { ... };
el.onMount = ({ getData, setData, getElement }) => { ... };
el.resetShortcut = "shiftKey"; // "shiftKey"|"ctrlKey"|"altKey"|"metaKey"

// THEN import — ordering matters!
import { playhtml } from "https://unpkg.com/playhtml@latest";
playhtml.init();
```

--------------------------------

### Vanilla HTML: Emoji-Only Textarea with Mirroring

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/capabilities.mdx

This example uses 'can-mirror' to synchronize textarea content across clients. An input event listener filters the value to only allow emojis.

```html
<textarea can-mirror id="emoji-pad" rows="4" placeholder="emojis only..."></textarea>

<script>
  const emojiOnly = /\p{Extended_Pictographic}/gu;
  document.getElementById("emoji-pad").addEventListener("input", (e) => {
    const match = e.target.value.match(emojiOnly);
    e.target.value = match ? match.join("") : "";
  });
</script>
```

--------------------------------

### React can-move Example

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/capabilities.mdx

Implements the `can-move` capability in React using the `CanMoveElement` component. It allows for draggable elements within defined boundaries, syncing their positions.

```tsx
import { CanMoveElement } from "@playhtml/react";

<div id="arena" style={{ position: "relative", height: 320 }}>
  <CanMoveElement bounds="arena">
    <img id="hat" src="/yankees-hat.png" alt="" />
  </CanMoveElement>
  <CanMoveElement bounds="arena">
    <img id="cat" src="/long-cat.png" alt="" />
  </CanMoveElement>
</div>
```

--------------------------------

### playhtml.init() with Options

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/reference/init-options.md

Demonstrates how to initialize playhtml with various configuration options, such as specifying a room, enabling cursors, and defining event listeners.

```APIDOC
## playhtml.init()

### Description
Initializes the playhtml library with a set of configuration options. These options control aspects like room connection, cursor display, event handling, custom capabilities, and development mode.

### Method
`playhtml.init(initOptions: InitOptions)`

### Parameters
#### `initOptions` Object
- **`room`** (string) - Optional - The room to connect users to. If not provided, it defaults to the current URL's pathname and search. It's automatically prefixed with `window.location.hostname`.
- **`cursors`** (object) - Optional - Configuration for cursor display. Example: `{ enabled: true }`.
- **`host`** (string) - Optional - The public PartyKit host. Use this to self-host the syncing server.
- **`events`** (Record<string, PlayEvent>) - Optional - An object where keys are event names and values are `PlayEvent` objects, used to declare event listeners inline at init time.
- **`extraCapabilities`** (Record<string, ElementInitializer>) - Optional - An object for shipping custom capabilities alongside built-ins. Keys are capability names (e.g., `"can-pulse"`), and values are `ElementInitializer` objects.
- **`defaultRoomOptions`** (DefaultRoomOptions) - Optional - Configuration for the auto-derived URL-based room.
- **`onError`** (() => void) - Optional - A callback function executed upon connection failures.
- **`developmentMode`** (boolean) - Optional - Enables an in-page devtools panel for debugging. Defaults to `false`. Recommended for development builds only.

### Request Example
```js
import { playhtml } from "playhtml";

playhtml.init({
  room: "my-room",
  cursors: { enabled: true },
  events: {
    confetti: {
      type: "confetti",
      onEvent: () => window.confetti({ particleCount: 100 }),
    },
  },
  extraCapabilities: {
    "can-pulse": {
      defaultData: { on: false },
      updateElement: ({ element, data }) => {
        element.classList.toggle("pulsing", data.on);
      },
      onClick: (_e, { data, setData }) => setData({ on: !data.on }),
    },
  },
  onError: () => {
    document.body.classList.add("playhtml-offline");
    console.warn("playhtml could not connect");
  },
  developmentMode: true,
});
```

### Response
This method does not return a value. It initializes the playhtml instance.
```

--------------------------------

### Displaying User Count with Global Cursors API

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/presence/cursors.md

An example of updating a UI element to display the number of online users by listening to the `allColors` event from the global `window.cursors` object. This snippet demonstrates a practical use case for real-time presence tracking.

```html
<div id="user-count">👥 <span>0</span> online</div>

<script>
  const updateCount = () => {
    const count = window.cursors?.allColors?.length || 0;
    document.querySelector('#user-count span').textContent = count;
  };

  window.cursors?.on('allColors', updateCount);
  updateCount();
</script>
```

--------------------------------

### Build Website for Production

Source: https://github.com/spencerc99/playhtml/blob/main/CLAUDE.md

Builds the playhtml website for production deployment.

```bash
bun build-site
```

--------------------------------

### Accessing and Modifying Global Cursor Properties

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/presence/cursors.md

Demonstrates how to interact with the global `window.cursors` object to retrieve all user colors, get your own cursor color, and set your cursor color and name. Changes to these properties are reflected in real-time for all users.

```javascript
// Get all user colors (across the room)
const colors = window.cursors.allColors;  // ["#3b82f6", "#8b5cf6", ...]

// Get/set your cursor color
window.cursors.color;  // "#3b82f6"
window.cursors.color = "#ff0000";

// Get/set your name
window.cursors.name;  // "Alice"
window.cursors.name = "Bob";
```

--------------------------------

### Build Production Site

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/README.md

Builds the production-ready version of your website, outputting the static files to the `./dist/` directory. This is the command to run before deployment.

```bash
bun build
```

--------------------------------

### Deploy PartyKit to Production

Source: https://github.com/spencerc99/playhtml/blob/main/CLAUDE.md

Deploys the PartyKit real-time sync server to the production environment.

```bash
bun deploy-server
```

--------------------------------

### Acceptable Nested Data Shape Example

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/data-essentials.md

An example of an acceptable one-level nesting for `defaultData` where fields are clearly related. Deeper nesting should generally be avoided.

```javascript
defaultData: { position: { x: 0, y: 0 }, color: "#ff0000" }
```

--------------------------------

### Vanilla HTML: Import + Manual Init (CDN)

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/getting-started.mdx

This path is suitable when you need to pass options to playhtml.init() or are using a bundler. For CDN usage without a bundler, place the script at the end of the body.

```html
<body>
  <button id="my-lamp" can-toggle>lamp</button>

  <script type="module">
    import { playhtml } from "https://unpkg.com/playhtml";
    playhtml.init({ cursors: { enabled: true } });
  </script>
</body>
```

--------------------------------

### Avoid Deeply Nested Data Shape Example

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/data-essentials.md

An example of a data shape to avoid in `defaultData` due to deep nesting. Deeply nested objects are harder to update, slower to sync, and more prone to conflicts.

```javascript
defaultData: {
  position: { coords: { x: 0, y: 0 } },
  style: { appearance: { color: "#ff0000" } },
}
```

--------------------------------

### Getting Own Identity

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/presence/index.mdx

Retrieve the identity information for the current local user.

```js
// Your own identity
const me = playhtml.presence.getMyIdentity();
```

--------------------------------

### Props-Dependent withSharedState Config

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/reference/react-api.md

Example of using a callback for the config in withSharedState when defaultData depends on component props.

```tsx
export const Reaction = withSharedState(
  ({ reaction: { count } }) => ({ defaultData: { count } }),
  ({ data, setData }, props) => /* … */,
);
```

--------------------------------

### Project Structure Overview

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/README.md

This is a typical project structure for an Astro + Starlight site. Markdown and MDX files for documentation should be placed in `src/content/docs/`.

```bash
.\n├── public/\n├── src/\n│   ├── assets/\n│   ├── content/\n│   │   └── docs/\n│   └── content.config.ts\n├── astro.config.mjs\n├── package.json\n└── tsconfig.json
```

--------------------------------

### Clearing Custom Presence Channel

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/presence/index.mdx

Example of clearing a custom 'status' channel by setting its value to null.

```js
// Clear: null
playhtml.presence.setMyPresence("status", null);
```

--------------------------------

### Deploy PartyKit to Staging

Source: https://github.com/spencerc99/playhtml/blob/main/CLAUDE.md

Deploys the PartyKit real-time sync server to the staging environment.

```bash
bun deploy-server:staging
```

--------------------------------

### Initialize PlayProvider in App

Source: https://github.com/spencerc99/playhtml/blob/main/packages/react/README.md

Wrap your application with the PlayProvider component to initialize the playhtml client and set up the server connection. You can optionally provide initOptions for room and host configuration.

```tsx
import { PlayProvider } from "@playhtml/react";

export default function App() {
  return (
    <PlayProvider
      initOptions={
        {
          // room: "my-room", // the namespace for syncing and storage set to `window.location.pathname + window.location.search`` by default
          // host: "mypartykit.user.partykit.dev", // if you want to self-host your own partykit server for extra server-side configuration and security guarantees.
        }
      }
    >
      {/* rest of your app... */}
    </PlayProvider>
  );
}
```

--------------------------------

### Updating PlayHTMl Data

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/integrations/building-with-ai.md

Examples of updating data in PlayHTMl, including simple updates and array modifications using draft.js.

```javascript
- Simple: setData({ count: data.count + 1 })
- Arrays: setData((draft) => { draft.items.push(item) })
- LIMITATIONS: In mutator form, use splice() not shift()/pop()/[i]=value
```

--------------------------------

### Preview Production Build

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/README.md

Locally previews the production build of your site before deploying. This helps ensure that the deployed version will function as expected.

```bash
bun preview
```

--------------------------------

### Editable Content with Children

Source: https://github.com/spencerc99/playhtml/blob/main/website/test/playground.html

Indicates a section of content that is editable and can contain child elements. This setup is typically managed by a framework or library.

```html
CONTENT EDITABLE WITH CHILDREN
```

--------------------------------

### Initialize PlayHTML with Event Handlers

Source: https://github.com/spencerc99/playhtml/blob/main/website/test/shared-test-source.html

Initializes PlayHTML and sets up event handlers for dynamic discovery tests. Includes error handling for initialization failures.

```javascript
addSourceLog( "Dynamic discovery test handlers initialized", "discovery" );
} catch (error) {
  console.error("🎯 Failed to initialize PlayHTML:", error);
}
```

--------------------------------

### Playhtml Initialization (New Method)

Source: https://github.com/spencerc99/playhtml/blob/main/packages/playhtml/CHANGELOG.md

This snippet demonstrates the new explicit `playhtml.init()` call required for Playhtml versions 2.0.0 and above. It also shows how to optionally specify a room and host.

```html
<script type="module">
  import "https://unpkg.com/playhtml";
  playhtml.init();
  // Optionally you could call
  // playhtml.init({
  //  room: window.location.pathname,
  //  host: "mypartykit.user.partykit.dev"
  // })
</script>
<link rel="stylesheet" href="https://unpkg.com/playhtml/dist/style.css" />
```

--------------------------------

### Initialize PlayHTML with a Custom Host

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/reference/init-options.md

Specifies a custom PartyKit host for self-hosting the syncing server. This is recommended for enhanced control, custom server-side logic, or to meet data-residency requirements.

```javascript
playhtml.init({
  host: "mypartykit.user.partykit.dev",
});
```

--------------------------------

### Use playhtml in React Application

Source: https://github.com/spencerc99/playhtml/blob/main/README.md

Integrate playhtml into your React application using the PlayProvider and CanToggleElement components. This example shows how to make an image toggleable.

```tsx
import { PlayProvider, CanToggleElement } from "@playhtml/react";

<PlayProvider>
  <CanToggleElement>
    <img id="lamp" src="lamp.png" />
  </CanToggleElement>
</PlayProvider>
```

--------------------------------

### Get My Player Identity

Source: https://github.com/spencerc99/playhtml/blob/main/packages/react/CHANGELOG.md

Obtain the stable player identity, which includes a public key that persists across sessions. This is useful for correlating user data.

```typescript
const identity = playhtml.cursorClient.getMyPlayerIdentity();
const stableId = identity.publicKey; // Persists across sessions
```

--------------------------------

### Vanilla HTML Cursor Configuration

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/integrations/building-with-ai.md

Enable and configure cursors for real-time collaboration in vanilla HTML using playhtml.init().

```javascript
playhtml.init({ cursors: { enabled: true, room: "page" } })
```

--------------------------------

### Build Core Library Package

Source: https://github.com/spencerc99/playhtml/blob/main/CLAUDE.md

Builds the core playhtml library package.

```bash
bun run -C packages/playhtml build
```

--------------------------------

### Vanilla HTML: Drop-in Script Initialization

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/getting-started.mdx

Use this method for the fastest integration without needing a build step or module syntax. Add the script tag at the end of your body to ensure interactive elements are present when playhtml initializes.

```html
<body>
  <button id="my-lamp" can-toggle>lamp</button>

  <script type="module" src="https://unpkg.com/playhtml/init.js"></script>
</body>
```

--------------------------------

### Initialize playhtml with Vanilla HTML

Source: https://github.com/spencerc99/playhtml/blob/main/README.md

To use playhtml in a vanilla HTML project, include the script from a CDN and initialize playhtml. This enables features like 'can-toggle' on elements.

```html
<script type="module">
  import { playhtml } from "https://unpkg.com/playhtml";
  playhtml.init();
</script>
<img can-toggle id="lamp" src="lamp.png" />
```

--------------------------------

### Build All Library Packages

Source: https://github.com/spencerc99/playhtml/blob/main/CLAUDE.md

Builds all library packages within the monorepo.

```bash
bun build-packages
```

--------------------------------

### Playhtml Initialization (Old Method)

Source: https://github.com/spencerc99/playhtml/blob/main/packages/playhtml/CHANGELOG.md

This snippet shows the previous method of initializing Playhtml via a direct script import. Use this if you need to pin to a version 1.3.1 or earlier.

```html
<script type="module" src="https://unpkg.com/playhtml"></script>
<link rel="stylesheet" href="https://unpkg.com/playhtml/dist/style.css" />
```

--------------------------------

### Build React Bindings Package

Source: https://github.com/spencerc99/playhtml/blob/main/CLAUDE.md

Builds the React wrapper components package for playhtml.

```bash
bun run -C packages/react build
```

--------------------------------

### Filter Visible Cursors with `shouldRenderCursor`

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/presence/cursors.md

Use the `shouldRenderCursor` function to control which cursors are displayed. This example renders only cursors from the same page, even when `room` is set to 'domain'.

```javascript
cursors: {
  enabled: true,
  room: "domain",  // Connect everyone
  shouldRenderCursor: (presence) => {
    // Only render cursors from the same page
    return presence.page === window.location.pathname;
  }
}
```

--------------------------------

### React PlayProvider Initialization with Cursors

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/reference/init-options.md

Demonstrates how to initialize PlayHTML with cursor options within a React application using the PlayProvider component.

```tsx
import { PlayProvider } from "@playhtml/react";

<PlayProvider
  initOptions={{
    room: "my-room",
    cursors: { enabled: true },
    developmentMode: true,
  }}
>
  {/* your app */}
</PlayProvider>;
```

--------------------------------

### Build Browser Extension

Source: https://github.com/spencerc99/playhtml/blob/main/CLAUDE.md

Builds the browser extension for Chrome.

```bash
bun build-extension
```

--------------------------------

### Initialize PlayHTML with Cursors

Source: https://github.com/spencerc99/playhtml/blob/main/claude-plugin/skills/building-playhtml-elements/SKILL.md

Enable and configure cursor synchronization for real-time presence indication. Specify the room scope ('page', 'domain', or 'section') for cursor data.

```javascript
playhtml.init({ cursors: { enabled: true, room: "page" } }); // "page"|"domain"|"section"
window.cursors.allColors.length; // user count
```

--------------------------------

### Recipe Folder Structure

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/plans/live-editor.md

Illustrates the expected file structure for a single recipe within the project. Includes frontmatter, HTML entry, and optional React component.

```tree
recipes/
  toggle-basic/
    recipe.md          # frontmatter + narrative body (MDX optional)
    index.html         # vanilla entry (required for MVP)
    component.tsx      # React entry (optional, future)
    preview.png        # static preview (optional; auto-generated fallback)
```

--------------------------------

### Dynamically Change Cursor Color and Name in React

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/presence/cursors.md

Update cursor color and name in real-time using React hooks and the usePlayContext. This example directly modifies window.cursors properties.

```tsx
import { usePlayContext } from "@playhtml/react";

function CursorSettings() {
  const { configureCursors, getMyPlayerIdentity } = usePlayContext();

  const changeColor = (color: string) => {
    // This updates window.cursors.color
    window.cursors.color = color;
  };

  const changeName = (name: string) => {
    // This updates window.cursors.name
    window.cursors.name = name;
  };

  return (
    <div>
      <input
        type="color"
        value={getMyPlayerIdentity().color}
        onChange={(e) => changeColor(e.target.value)}
      />
      <input
        type="text"
        value={getMyPlayerIdentity().name || ""}
        onChange={(e) => changeName(e.target.value)}
        placeholder="Your name"
      />
    </div>
  );
}
```

--------------------------------

### Initialize PlayHTML with Cursor Tracking

Source: https://github.com/spencerc99/playhtml/blob/main/templates/html-starter/index.html

Initializes the PlayHTML library with cursor tracking enabled for a specific room. This allows for real-time cursor synchronization among users.

```javascript
import { playhtml } from "https://unpkg.com/playhtml@2.9.0";

// Initialize with cursor tracking
playhtml.init({
  cursors: {
    enabled: true,
    room: "page"
  }
});

// Make playhtml available globally for script.js
window.playhtml = playhtml;
```

--------------------------------

### File Layout: New Files

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/plans/live-editor.md

Lists the new files introduced in the live editor branch, organized by their location within the project structure.

```text
apps/docs/
  plans/
    live-editor.md                           # this file
  src/
    content/
      recipes/                               # NEW content collection
        toggle-basic/
          recipe.md
          index.html
        ... (see §6 phasing for which ship in MVP)
      config.ts                              # add `recipes` collection schema
    components/
      playground/                            # NEW
        Editor.tsx                           # CodeMirror wrapper
        Preview.tsx                          # iframe + room wiring
        Playground.tsx                       # side-by-side shell
        recipe-loader.ts                     # hash <-> state, content lookup
        iframe-template.ts                   # srcdoc builder
        theme.ts                             # CodeMirror theme
    pages/
      play.astro                             # /play route
      gallery.astro                          # /gallery route (or under /docs/)
      __dev/
        playhtml.js.ts                       # dev-mode CDN shim
```

--------------------------------

### Customize Cursor Appearance with `getCursorStyle`

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/presence/cursors.md

Apply custom CSS styles to cursors using the `getCursorStyle` function. This example fades cursors from different pages to indicate they are less relevant.

```javascript
cursors: {
  enabled: true,
  room: "domain",
  getCursorStyle: (presence) => {
    // Fade cursors from other pages
    if (presence.page !== window.location.pathname) {
      return {
        opacity: '0.4',
        filter: 'blur(3px)'
      };
    }
    return {};
  }
}
```

--------------------------------

### Color Utility Functions

Source: https://github.com/spencerc99/playhtml/blob/main/website/story.html

Provides functions to generate random hex colors, convert hex to RGB, and get RGB values for CSS variables. Used for user identification and styling.

```javascript
function randomColor() { const hex = Math.floor(Math.random() * 16777215).toString(16); return "#" + hex; }
function convertHexToRGB(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}
function getColorVar(color) {
  if (!color) {
    return "transparent";
  }
  const { r, g, b } = convertHexToRGB(color);
  return `${r}, ${g}, ${b}`;
}
```

--------------------------------

### PlayHTML Initialization

Source: https://github.com/spencerc99/playhtml/blob/main/website/story.html

Initializes the PlayHTML library for the current page, connecting to a specific room based on the URL path.

```javascript
import { playhtml } from "https://unpkg.com/playhtml@latest";
playhtml.init({ room: window.location.pathname });
```

--------------------------------

### Avoid Storing Derived Values

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/data/data-essentials.md

Example of data shaping to avoid, where derived values like 'isEven' are stored directly in `defaultData`. This can lead to stale data if not updated consistently with the source fields.

```javascript
// Avoid
defaultData: { count: 5, isEven: false }
```

--------------------------------

### Initialize PlayHTML with Shared Reference Capabilities

Source: https://github.com/spencerc99/playhtml/blob/main/website/test/shared-test-consumer.html

Initializes PlayHTML with a specific host, enabling 'can-post' capability for shared references. It includes custom logic for updating a guestbook element and handling form submissions for new entries.

```javascript
await playhtml.init({
    host: "localhost:1999",
    extraCapabilities: {
      "can-post": {
        defaultData: [],
        defaultLocalData: {
          addedEntries: new Set()
        },
        updateElement: ({ data: entries, localData: { addedEntries }, setLocalData, }) => {
          const entriesToAdd = entries.filter(
            (entry) => !addedEntries.has(`${entry.name}-${entry.timestamp}`)
          );
          const guestbookDiv = document.getElementById(
            "guestbookMessages-consumer"
          );
          if (!guestbookDiv) return;
          entriesToAdd.forEach((entry) => {
            const newEntry = document.createElement("div");
            newEntry.classList.add("guestbook-entry");
            const entryDate = new Date(entry.timestamp);
            const time = entryDate.toTimeString().split(" ")[0];
            const isToday = entryDate.toDateString() === new Date().toDateString();
            const dateString = (() => {
              const now = new Date();
              if (
                now.getFullYear() !== entryDate.getFullYear() ||
                now.getMonth() !== entryDate.getMonth()
              ) {
                return "Sometime before";
              } else if (isToday) {
                return "Today";
              } else if (now.getDate() - entryDate.getDate() === 1) {
                return "Yesterday";
              } else if (now.getDate() - entryDate.getDate() < 7) {
                return "This week";
              } else {
                return "Sometime before";
              }
            })();
            newEntry.innerHTML = ` <span class="guestbook-entry-timestamp">${dateString} at ${time}</span> <span class="guestbook-entry-name">${entry.name}</span> <span class="guestbook-entry-message">${entry.message}</span>`;
            guestbookDiv.prepend(newEntry);
            addedEntries.add(`${entry.name}-${entry.timestamp}`);
          });
          setLocalData({ addedEntries });
        },
        onMount: ({ getElement, getData, setData }) => {
          const element = getElement();
          element.addEventListener("submit", (e) => {
            e.preventDefault();
            e.stopImmediatePropagation();
            const formData = new FormData(e.target);
            const inputData = Object.fromEntries(formData.entries());
            if (!inputData.name || !inputData.message) {
              return false;
            }
            const timestamp = Date.now();
            const newEntry = {
              name: inputData.name,
              message: inputData.message,
              timestamp,
            };
            setData((d) => {
              d.push(newEntry);
            });
            element.querySelector('input[name="message"]').value = "";
            return false;
          });
        },
      },
    },
  });
```

--------------------------------

### PlayProvider

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/reference/react-api.md

Initializes the playhtml client for a React subtree. There must be exactly one PlayProvider per React root.

```APIDOC
## <PlayProvider>

Initializes the playhtml client for a React subtree. There must be exactly one `PlayProvider` per React root.

### Props

```tsx
interface PlayProviderProps {
  initOptions?: InitOptions;
  pathname?: string;
  children: React.ReactNode;
}
```

Everything in `initOptions` maps one-to-one onto the vanilla `playhtml.init()` argument — see the [init options reference](/docs/reference/init-options/).

`pathname` is optional and only needed for client-side-navigation frameworks (React Router, Next.js, etc.) where the browser Navigation API isn't available. Pass it from your router and playhtml will rebuild rooms + rescan the DOM on pathname changes. See [navigation](/docs/advanced/navigation/) for details.

### Example

```tsx
import { PlayProvider } from "@playhtml/react";

<PlayProvider initOptions={{ cursors: { enabled: true } }}>
  <App />
</PlayProvider>;
```
```

--------------------------------

### Magical Proximity UI Animation

Source: https://github.com/spencerc99/playhtml/blob/main/website/test/cursor-test.html

Creates and animates a visual indicator for magical proximity effects when cursors get close. The UI element is positioned at the cursor's location and automatically removed after a delay.

```typescript
const activeProximityIndicators = new Map();

function showMagicalProximityUI(otherPlayer) {
  const playerId = otherPlayer?.publicKey || "unknown"; // Don't create duplicate indicators
  if (activeProximityIndicators.has(playerId)) return;

  const playerColor = otherPlayer?.playerStyle?.colorPalette?.[0] || "#3b82f6";
  const playerName = otherPlayer?.name || `Player ${otherPlayer?.publicKey?.slice(-4)}`;

  // Create simple proximity indicator
  const indicator = document.createElement("div");
  indicator.className = "proximity-indicator";
  indicator.style.borderColor = playerColor;

  // Position at actual cursor location (where proximity happened)
  const x = window.lastMouseX || window.innerWidth / 2;
  const y = window.lastMouseY || window.innerHeight / 2;
  indicator.style.left = `${x - 40}px`;
  indicator.style.top = `${y - 40}px`;

  // Add player name
  const nameLabel = document.createElement("div");
  nameLabel.className = "proximity-text";
  nameLabel.textContent = `${playerName} nearby!`;
  nameLabel.style.color = playerColor;
  indicator.appendChild(nameLabel);

  document.body.appendChild(indicator);
  activeProximityIndicators.set(playerId, indicator);

  // Auto-remove after 3 seconds
  setTimeout(() => {
    hideMagicalProximityUI(playerId);
  }, 3000);
}

function hideMagicalProximityUI(playerId) {
  const indicator = activeProximityIndicators.get(playerId);
  if (indicator) {
    indicator.style.animation = "simpleProximityPulse 0.3s ease-out reverse";
    setTimeout(() => {
      if (indicator.parentNode) {
        indicator.remove();
      }
      activeProximityIndicators.delete(playerId);
    }, 300);
  }
}
```

--------------------------------

### URL Encoding for Remixing Recipes

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/plans/live-editor.md

Demonstrates the URL structure for sharing unmodified and remixed recipes, using URL hash for state and lz-string for compression.

```url
/play#id=toggle-basic&v=1            # unmodified recipe
/play#v=1&c=<lzstring>               # remixed; c = compressed JSON
```

--------------------------------

### Get User Color from Local Storage

Source: https://github.com/spencerc99/playhtml/blob/main/website/story.html

Retrieves the user's preferred color from local storage. If no color is found, it returns undefined. This function is useful for maintaining user preferences across sessions.

```javascript
function getUserColor() { return localStorage.getItem("color") ? JSON.parse(localStorage.getItem("color")) : undefined; }
```

--------------------------------

### Wrap App with PlayProvider

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/using-react.md

Wrap your React app with PlayProvider to initialize the client and establish a connection. Pass initialization options to initOptions.

```tsx
import { PlayProvider } from "@playhtml/react";

export default function App() {
  return (
    <PlayProvider
      initOptions={{
        // room: "my-room",
        // cursors: { enabled: true },
      }}
    >
      <YourApp />
    </PlayProvider>
  );
}
```

--------------------------------

### React Cursor Configuration with PlayProvider

Source: https://github.com/spencerc99/playhtml/blob/main/apps/docs/src/content/docs/integrations/building-with-ai.md

Enable and configure cursors for real-time collaboration in React by passing initOptions to the PlayProvider.

```javascript
<PlayProvider initOptions={{ cursors: { enabled: true, room: "page" } }}>
```

--------------------------------

### Run Standard PartyKit Smoke Tests

Source: https://github.com/spencerc99/playhtml/blob/main/smoke-tests/README.md

Executes the standard set of smoke tests for PartyKit. Requires a SMOKE_ENV_FILE.

```bash
SMOKE_ENV_FILE=/path/to/.dev.vars bun smoke:partykit
```
Tokens:
Raw