Let clients edit the copy.
Not the website or code.

import React from 'react';
import { CopyPatchProvider, EditableText } from '@copypatch/react';

export function LandingPage() {
  return (
    <CopyPatchProvider locale="en">
      <header>
        <EditableText contentKey="nav.brand" as="span">
          Acme Studio
        </EditableText>
      </header>

      <main>
        <EditableText contentKey="hero.title" as="h1">
          Crafting software for product-focused teams.
        </EditableText>
        
        <EditableText contentKey="hero.subtitle" as="p" allowLineBreaks={true}>
          Fast, accessible, and self-hosted inline copy editing for modern React teams.
        </EditableText>
      </main>
    </CopyPatchProvider>
  );
}

// app/page.tsx (Next.js App Router Server Component)
import { NextCopyPatchProvider, EditableText } from '@copypatch/next';
import { readPublishedSnapshot } from '@copypatch/next/server';
import { copypatch } from '@/lib/copypatch';

export default async function Page() {
  const locale = 'en';
  const snapshot = await readPublishedSnapshot(copypatch, locale);

  return (
    <NextCopyPatchProvider
      locale={locale}
      initialSnapshot={snapshot}
    >
      <EditableText contentKey="hero.title" as="h1">
        Next.js Pre-rendered Copy
      </EditableText>
    </NextCopyPatchProvider>
  );
}

# Generate embedded configuration and a SQLite route
npx copypatch init --framework vite-node --storage sqlite

# Generate a passphrase hash and store it as COPYPATCH_PASSPHRASE_HASH
printf '%s' "$COPYPATCH_PASSPHRASE" | npx copypatch hash --stdin