@taghost/react

The invisible React SDK for TagHost. It gives your app the two things the platform provides at the edge: a visual CMS your marketers can edit in place, and lead capture that works without a server.

There is no wrapper provider and no runtime to configure. Import what you need and it works — on the live edge and inside the Visual Studio editing canvas.

npm install @taghost/react

React 18 or newer is a peer dependency. The SDK is fully tree-shakeable (sideEffects: false).

Visual CMS

Tag any element with a data-tag attribute. TagHost's edge worker rewrites its text in-place on every request, so there is no re-render, no fetch, and no flash of unstyled content.

<h1 data-tag="hero.title">Your fallback headline</h1>
<p data-tag="hero.subtitle">Your fallback copy</p>

In the browser the fallback content is what renders; on the edge the published value replaces it. Your repo stays the source of truth in code.

Lead capture

<TagForm> posts to the edge and hands submissions to TagHost's lead pipeline, where they are routed, stored, and delivered to your notification email.

import { TagForm } from '@taghost/react';

<TagForm name="early-access" onSuccess={() => toast('Thanks!')} onError={(e) => console.error(e)}>
  {({ isSubmitting }) => (
    <button disabled={isSubmitting}>{isSubmitting ? 'Sending…' : 'Join the waitlist'}</button>
  )}
</TagForm>

name identifies the form in the dashboard. Pass onSuccess / onError to react to the result, or render a plain child element instead of a render function.

Dynamic collections

import { useTagCollection } from '@taghost/react';

const { items, isLoading, error } = useTagCollection<{ title: string }>('case-studies');

Collections are structured content (blog posts, case studies, pricing tiers) served from /_tag/collections/:name. Pass a second argument of initialItems to render from pre-fetched data and skip the initial request.

Config helper

import { defineConfig } from '@taghost/react';

export default defineConfig({
  projectId: 'proj_123',
  framework: 'vite-react',
  designTokens: { /* … */ },
});

API

| Export | Purpose | | --- | --- | | TagForm | Edge-backed lead capture form. | | useTagCollection | Fetch a dynamic collection with loading/error state. | | defineConfig | Typed taghost.config helper. | | tagBridge | The runtime bridge the canvas talks to. | | TAG_PROTOCOL_VERSION | Version of the canvas protocol. |

Zero lock-in

This SDK is a thin convenience layer. data-tag attributes are plain HTML, and every value is readable as ordinary text. If you ever want out, tag eject (from @taghost/cli) rewrites this SDK back into plain React source you own. No runtime dependency is required to host the result.

Links

• Product: https://taghost.io
• Docs: https://docs.taghost.io
• Issues: https://github.com/georgennad/TagHost/issues

License

Proprietary. See LICENSE.