@pageloop/client

The browser-side PageLoop SDK — the PageLoop class plus thin React / Preact / Solid wrappers. Framework-agnostic at its core; UI rendering goes through a UIRenderer you supply.

Install

The framework wrappers (/react, /preact, /solid) render via the vanilla DOM renderer, which they lazy-load at runtime with import('@pageloop/vanilla'). So if you import any framework subpath you must also install @pageloop/vanilla alongside this package:

pnpm add @pageloop/client @pageloop/vanilla react

Swap react for preact or solid-js (each is an optional peer dependency). For the headless . entry, neither a framework nor @pageloop/vanilla is required — you bring your own UIRenderer.

Exports

| Subpath | Use when | |---|---| | . | Headless core: the PageLoop class, ApiClient, PageTracker, CommentEngine, the UIRenderer interface. You instantiate it directly and bring a renderer. | | /react | React <PageLoopProvider> + hooks. Optional peer react. | | /preact | Preact <PageLoopProvider> + hooks. Optional peer preact. | | /solid | Solid <PageLoopProvider> + signal hooks. Optional peer solid-js; ships preserved JSX. | | /react/style.css, /preact/style.css, /solid/style.css | The renderer stylesheet. Import once at the app root. |

. — headless core

You own the lifecycle and pass a UIRenderer (e.g. VanillaRenderer from @pageloop/vanilla, or your own implementation):

import { PageLoop } from '@pageloop/client';
import { VanillaRenderer } from '@pageloop/vanilla';
import '@pageloop/vanilla/style.css';

const pageloop = new PageLoop(
  { endpoint: 'https://your-pageloop-server.com', projectId: 'your-slug' },
  { renderer: new VanillaRenderer() },
);
await pageloop.start();

/react, /preact

Wrap your tree once; the renderer paints the floating UI into document.body, and the hooks expose its reactive state (usePageLoop, useComments, usePage, useUser, useRole, useConnected, useReplies, useReactions):

import { PageLoopProvider, useComments } from '@pageloop/client/react';
import '@pageloop/client/react/style.css';

function App() {
  return (
    <PageLoopProvider config={{ endpoint, projectId }}>
      <Comments />
    </PageLoopProvider>
  );
}

function Comments() {
  const comments = useComments(); // re-renders as the bus broadcasts
  return <span>{comments.length} comments on this page</span>;
}

Preact is identical — import from @pageloop/client/preact (and its style.css).

/solid

Same provider, but hooks return Solid Accessor<T> signals (usePageLoop, createReplies, createReactions):

import { PageLoopProvider, usePageLoop } from '@pageloop/client/solid';
import '@pageloop/client/solid/style.css';

function App() {
  return (
    <PageLoopProvider config={{ endpoint, projectId }}>
      <Status />
    </PageLoopProvider>
  );
}

function Status() {
  const { connected } = usePageLoop();
  return <span>{connected() ? 'live' : 'offline'}</span>;
}