Hygraph Preview SDK

Add clickable edit buttons to your Hygraph content preview. Hover a tagged element to show Edit, open the matching field in Studio, and refresh the preview when content is saved.

Works with React, Next.js, Remix, Vue, Nuxt, and vanilla JavaScript.

Installation

npm install @hygraph/preview-sdk

Documentation

Full setup, framework guides, and API reference live in the Hygraph docs:

• Click to Edit setup — install, attributes, Studio widget, troubleshooting
• Advanced API — React hooks, Preview methods, DOM events, helpers
• Framework guides:
  • Next.js App Router
  • Next.js Pages Router
  • Remix
  • Vue / Nuxt
  • Vanilla JavaScript

Quick peek

import dynamic from 'next/dynamic';
import { useRouter } from 'next/navigation';

const HygraphPreview = dynamic(
  () => import('@hygraph/preview-sdk/react').then((mod) => ({ default: mod.HygraphPreview })),
  { ssr: false }
);

export function PreviewWrapper({ children }) {
  const router = useRouter();

  return (
    <HygraphPreview
      endpoint={process.env.NEXT_PUBLIC_HYGRAPH_ENDPOINT}
      studioUrl={process.env.NEXT_PUBLIC_HYGRAPH_STUDIO_URL}
      onSave={() => router.refresh()}
    >
      {children}
    </HygraphPreview>
  );
}

Mark content with data-hygraph-* attributes (or the helpers from @hygraph/preview-sdk/core). See the setup guide for the full walkthrough.

Examples

Runnable apps in this repository:

• Next.js App Router
• Next.js Pages Router
• Remix
• Vue 3
• Vanilla HTML

See examples/README.md for schema setup and how to run them.

Support

• Hygraph documentation
• GitHub Issues
• Hygraph Support

License

MIT © Hygraph