Everything you need
to ship

Getting Started

OpalSite turns any HTML-based website into a client-editable CMS. You do not install an SDK and you do not rewrite your code. In most cases, setup takes under five minutes.

There are three ways to start:

• Connect a GitHub repo that already contains an HTML, Next.js, Astro, or React site.
• Upload a ZIP of your site and OpalSite will auto-annotate it.
• Start from a template (landing page, agency, blog, restaurant, or SaaS).

Whichever you pick, your content lives in your own repo. OpalSite never copies it into a proprietary database.

# Clone and run the self-hosted version (optional)
git clone https://github.com/opensite/opensite.git
cd opensite
pnpm install
pnpm dev

Adding data-cms attributes

OpalSite auto-detects most editable content — headings, paragraphs, images, and links. When you want explicit control, add a data-cms attribute naming the field. The value is a dot-path used in the CMS UI.

<section class="hero">
  <h1 data-cms="hero.title">Building the Future</h1>
  <p data-cms="hero.subtitle">We help businesses scale.</p>
  <img data-cms="hero.image" src="/hero.jpg" alt="" />
  <a data-cms="hero.cta" href="/signup">Get Started</a>
</section>

When your client opens the editor they'll see fields labeled “Hero / Title”, “Hero / Subtitle”, and so on — grouped automatically by the dot-path prefix.

You can also annotate rich text areas with data-cms-type="rich" to enable the TipTap rich text editor instead of a plain input.

Connecting GitHub

On your dashboard, click New Project → Connect GitHub. You'll be taken through GitHub's OAuth flow, where you grant OpalSite read/write access to the repos you want to manage.

Once connected, OpalSite:

• Scans your repo for HTML, JSX, TSX, MDX, and Astro files.
• Builds a content map from detected elements and data-cms annotations.
• Creates a branch called opalsite/drafts for staged edits.
• Opens pull requests to main when edits are published.

Every edit a client makes in the visual editor becomes a real Git commit with proper authorship — perfect for auditing and code review.

Uploading a website

Don't have the site in Git yet? Drag a ZIP into the dashboard and OpalSite will unpack it, detect its structure, and auto-annotate the content layer. You'll be editing within a minute.

1. Click "Upload site"
2. Drop your-site.zip
3. Wait ~30 seconds for auto-annotation
4. Open the editor

Uploaded sites can be exported to GitHub at any time from Project Settings → Repository. You can always move to a Git-backed workflow later.

CMS Collections

Collections are how you handle repeating content — blog posts, team members, products, case studies. You define a collection once, and OpalSite handles the listing pages, detail pages, and admin UI.

export default {
  collections: {
    posts: {
      label: 'Blog Posts',
      slug: 'blog',
      fields: {
        title: { type: 'text', required: true },
        excerpt: { type: 'text' },
        cover: { type: 'image' },
        body: { type: 'rich' },
        publishedAt: { type: 'date' },
      },
    },
  },
};

Collections support drafts, scheduled publishing, and full version history. Clients can collaborate on a single entry in real-time, with field-level locking to prevent conflicts.

Using the MCP with Claude Code

OpalSite ships an MCP server that lets Claude Code (and any other MCP-aware tool) read and write your site content directly. It's how you build sites at a speed that feels unreasonable.

Install the server in Claude Code:

claude mcp add opalsite --scope project \
  -- npx -y @opalsite/mcp-server \
  --project YOUR_PROJECT_ID \
  --token YOUR_API_TOKEN

Once installed, Claude Code gains tools for listing pages, reading content, updating fields, creating collection items, and publishing drafts. Try:

"Read the homepage hero copy and rewrite it to sound
more confident. Publish the change."

Custom domains

Every OpalSite project ships with a free *.opalsite.dev subdomain. To attach your own domain, go to Project Settings → Domains and add it.

Then point your DNS:

# Apex domain
A       @       76.76.21.21

# www subdomain
CNAME   www     projects.opalsite.dev

SSL certificates are issued automatically via Let's Encrypt and renewed in the background. You don't have to think about it.

Deployment

OpalSite deploys to a global CDN on every published edit. Static builds are pushed to S3 and fronted by CloudFront, with cache invalidation scoped to just the files that changed.

For custom build steps — Next.js, Astro, Vite — we detect your framework from package.json and run the right command. You can override in project settings:

{
  "framework": "nextjs",
  "buildCommand": "pnpm build",
  "outputDirectory": ".next",
  "installCommand": "pnpm install"
}

Every deploy creates an immutable preview URL you can share with clients for review. Once approved, promote it to production with one click — or let it go live the moment the pull request merges.