Quickstart

Step 0: Ensure you have an existing React app

Dispatch layers onto your app. Start from a React project you already have.

Step 1: Install

npm install @dispatchcms/react

Step 2: Add DispatchProvider

Wrap your app with DispatchProvider and pass your site key (from your app’s env or config).

import { DispatchProvider } from "@dispatchcms/react";

export default function App({ children }) {
  return (
    <DispatchProvider siteKey={import.meta.env.VITE_DISPATCH_SITE_KEY}>
      {children}
    </DispatchProvider>
  );
}

Step 3: Create blog route

Add a route for a single post (e.g. /blog/:slug) and use usePost(slug). Render post.content (TipTap JSON) with @tiptap/static-renderer (e.g. renderToReactElement from @tiptap/static-renderer/pm/react and the same extensions as the CMS).

import { usePost } from "@dispatchcms/react";
import { renderToReactElement } from "@tiptap/static-renderer/pm/react";
import StarterKit from "@tiptap/starter-kit";

export default function PostPage({ slug }) {
  const { post, isLoading, error } = usePost(slug);

  if (isLoading) return <div>Loading...</div>;
  if (error || !post) return <div>Post not found</div>;

  const contentNode = post.content && typeof post.content === "object"
    ? renderToReactElement({ extensions: [StarterKit], content: post.content })
    : null;

  return (
    <article>
      <h1>{post.title}</h1>
      {contentNode}
    </article>
  );
}

Step 4: Create and publish a post in the dashboard

Log in to Dispatch, create a site if needed, then create a post and publish it.

Step 5: Refresh the page

Get your site key from Dispatch (Sites → your site), set it in your app's env (e.g. Vite: VITE_DISPATCH_SITE_KEY in .env), run your app, and refresh. Your post should appear.

npm run dev