No. EditLayer is a thin editing layer that sits on top of your existing Next.js app. There's no external service, no dashboard, and no content schema. Your content lives in a JSON file committed directly to your GitHub repo.

Where does my content get stored?

In editlayer/content.json inside your own GitHub repository. When you publish, EditLayer commits the file via the GitHub API. Vercel detects the commit and redeploys automatically. You own everything.

What if an editor breaks the site?

Editors can only save drafts. They cannot publish. Only owners (set via env vars) can push changes live. Every publish is a real git commit, so you can always revert via GitHub if something goes wrong.

Do I need a database or server?

No. There is zero infrastructure to run. All state lives in your GitHub repo. The only services you need are already part of your stack: Next.js, Vercel, and GitHub.

Which Next.js versions are supported?

EditLayer supports Next.js 13+ with the App Router. It uses React Server Components for content loading and client components for the editing UI.

Is EditLayer free? What is the license?

EditLayer is MIT licensed and completely free, forever. It is self-hosted, so there is no subscription, no usage cap, and no vendor lock-in.

How is EditLayer different from a headless CMS?

A headless CMS requires a separate service, schema setup, and often a monthly fee. EditLayer requires none of that. Your site is the editor: marketers edit copy directly on the live page, changes deploy via your existing Vercel pipeline.

EditLayer | Live In-Page Editing for Next.js

Name: EditLayer
Author: EditLayer

01npm install @editlayer/next

Install the package

Run one command to install and scaffold. The CLI creates the API routes and config file automatically. Nothing to build from scratch.

02<EditableText id="...">

Mark editable content

Wrap any headline, paragraph, or link with EditableText. Keep your existing className and styles. EditLayer wraps around them, never rewrites them.

034 env vars

Set env vars & deploy

Add your secret, site URL, Resend API key, and GitHub token to Vercel. Push to GitHub. That's the entire backend.

04?edit=true

Open edit mode

Visit yoursite.com/?edit=true. Enter your email, click the magic link. Green outlines appear on every editable field immediately.

05git commit

Click, type, publish

Click any field to edit inline. See the live preview as you type. Save a draft to share, or hit Publish to commit directly to GitHub.

06zero infra

Vercel redeploys

Publishing writes editlayer/content.json to your repo via the GitHub API. Vercel detects the commit and redeploys automatically.

Setup guide

From zero to editable in under 5 minutes

Copy, paste, deploy. Every command and env var you need. Nothing more.

Install & initStep 1

# Inside your Next.js project
npm install @editlayer/next
npx editlayer init

# Creates editlayer.config.ts, editlayer/content.json,
# and scaffolds the API routes in app/api/editlayer/

Environment variablesStep 2

# .env.local — and add to Vercel → Settings → Environment Variables

# Generate: node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
EDITLAYER_SECRET=your-32-char-random-secret
EDITLAYER_SITE_URL=https://yoursite.com

# Magic link emails — free tier at resend.com
EDITLAYER_RESEND_API_KEY=re_xxxxxxxxxxxx
EDITLAYER_EMAIL_FROM=EditLayer <edit@yoursite.com>

# Who can log in and publish vs. draft-only
EDITLAYER_OWNERS=owner@yoursite.com
EDITLAYER_EDITORS=marketing@yoursite.com

# GitHub fine-grained token — repo contents read/write
EDITLAYER_GITHUB_TOKEN=github_pat_xxxx
EDITLAYER_GITHUB_REPO=yourname/your-repo

Option A: Paste into Cursor AI and it wires everything automaticallyRecommended

Open Cursor, start a new chat, and paste the prompt below. The agent will wrap your layout, find every hardcoded string, and convert them to <EditableText> components across your entire project.

CURSOR PROMPT

I have installed @editlayer/next (v0.3.1) in this Next.js App Router project. Your task is to complete the full integration following the exact pattern documented below. Do not deviate from these conventions.

━━ PACKAGE OVERVIEW ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

@editlayer/next is a self-hosted visual editing layer. It reads content from
editlayer/content.json at build time and writes back to it via GitHub API on publish.
There is no database, no external dashboard, and no CMS. All configuration is via
environment variables already added to .env.local and Vercel.

━━ STEP 1: ENSURE API ROUTES EXIST ━━━━━━━━━━━━━━━━━━━━

Check whether app/api/editlayer/ exists with these route files:
  login/route.ts, verify/route.ts, session/route.ts,
  logout/route.ts, publish/route.ts, drafts/route.ts

If any are missing, run: npx editlayer init
Each route file must export the corresponding handler from @editlayer/next/server:

  // app/api/editlayer/login/route.ts
  export { handleEditLayerLogin as POST } from "@editlayer/next/server"

  // app/api/editlayer/verify/route.ts
  export { handleEditLayerVerify as GET } from "@editlayer/next/server"

  // app/api/editlayer/session/route.ts
  export { handleEditLayerSession as GET } from "@editlayer/next/server"

  // app/api/editlayer/logout/route.ts
  export { handleEditLayerLogout as POST } from "@editlayer/next/server"

  // app/api/editlayer/publish/route.ts
  export { handleEditLayerPublish as POST } from "@editlayer/next/server"

  // app/api/editlayer/drafts/route.ts
  export { handleEditLayerDrafts as GET, handleEditLayerDrafts as POST } from "@editlayer/next/server"

━━ STEP 2: WRAP ROOT LAYOUT ━━━━━━━━━━━━━━━━━━━━━━━━━━━

Open app/layout.tsx. Add the provider wrapper:

  import { EditLayerProvider } from "@editlayer/next"
  import { loadEditLayerContent } from "@editlayer/next/server"

  export default async function RootLayout({ children }: { children: React.ReactNode }) {
    const content = await loadEditLayerContent()
    return (
      <html lang="en">
        <body>
          <EditLayerProvider content={content}>
            {children}
          </EditLayerProvider>
        </body>
      </html>
    )
  }

Do not remove any existing providers or imports — wrap them inside EditLayerProvider.

━━ STEP 3: MARK EDITABLE CONTENT ━━━━━━━━━━━━━━━━━━━━━━

Scan every .tsx and .jsx file in app/ and components/ for hardcoded marketing copy:
  - h1, h2, h3, h4 headings
  - p paragraph text (marketing, not UI labels)
  - Button/link labels, nav item labels, CTA text
  - Section titles, feature names, testimonial quotes
  - Footer text

Convert each to EditableText using this exact pattern:

  BEFORE: <h1 className="...">Your headline here</h1>
  AFTER:  <EditableText id="home.hero.title" as="h1" className="...">Your headline here</EditableText>

  BEFORE: <p className="...">Subheading copy</p>
  AFTER:  <EditableText id="home.hero.subtitle" as="p" className="...">Subheading copy</EditableText>

ID naming convention: "[page].[section].[field]"
  Examples: home.hero.title, home.hero.cta, pricing.header.subtitle,
            about.team.description, nav.cta.label, footer.tagline

Import at top of each file:
  import { EditableText, EditableLink } from "@editlayer/next"

For anchor tags and buttons with href:
  BEFORE: <a href="/contact" className="...">Book a call</a>
  AFTER:  <EditableLink id="home.hero.cta" href="/contact" className="...">Book a call</EditableLink>

IMPORTANT RULES:
  - Keep all existing className, style, and other props untouched
  - Only replace the text node, not the element structure
  - Do not wrap complex children (icons + text) — only wrap pure text strings
  - Do not touch code comments, console.log strings, or non-visible strings

━━ STEP 4: UPDATE content.json ━━━━━━━━━━━━━━━━━━━━━━━━

Create or update editlayer/content.json with the default value for every field you marked:

  {
    "version": 1,
    "fields": {
      "home.hero.title": "Your original headline text",
      "home.hero.subtitle": "Your original subheading text",
      ...all other fields you converted...
    },
    "meta": {
      "updatedAt": "[current ISO timestamp]",
      "updatedBy": "init",
      "commitSha": null
    }
  }

━━ DONE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

After completing all steps, tell me:
  1. How many fields were marked editable across how many files
  2. Any files you skipped and why
  3. Confirm the API routes are in place

OR DO IT MANUALLY: STEPS 3 & 4 BELOW

Wrap your root layoutStep 3

// app/layout.tsx
import { EditLayerProvider } from "@editlayer/next"
import { loadEditLayerContent } from "@editlayer/next/server"

export default async function RootLayout({ children }) {
  const content = await loadEditLayerContent()
  return (
    <html><body>
      <EditLayerProvider content={content}>
        {children}
      </EditLayerProvider>
    </body></html>
  )
}

Mark your content editableStep 4

// Any component — wrap static copy, keep everything else
import { EditableText, EditableLink } from "@editlayer/next"

export function Hero() {
  return (
    <section>
      <EditableText id="home.hero.title" as="h1">
        Your original headline
      </EditableText>

      <EditableText id="home.hero.sub" as="p">
        Your original subheadline
      </EditableText>

      <EditableLink id="home.hero.cta" href="/contact">
        Book a call
      </EditableLink>
    </section>
  )
}

Deploy, then editStep 5

# Push to GitHub — Vercel deploys automatically
git add .
git commit -m "Add EditLayer"
git push

# Then visit your live site with ?edit=true
# → Enter your owner email
# → Click the magic link in your inbox
# → Green outlines appear on every editable field
# → Click any field, edit, Save Draft or Publish
# → Publish commits content.json → Vercel redeploys

Your Next.js site.
Edited live by your team.

Up and running in minutes.

Install the package

Mark editable content

Set env vars & deploy

Open edit mode

Click, type, publish

Vercel redeploys

From zero to editable in under 5 minutes

Everything you need. Nothing you don't.

Magic link auth

In-page editing

GitHub → Vercel

Roles & access

Secure by default

Zero dependencies

Frequently asked questions

One command away from a
live editor.

Your Next.js site.Edited live by your team.

Up and running in minutes.

Install the package

Mark editable content

Set env vars & deploy

Open edit mode

Click, type, publish

Vercel redeploys

From zero to editable in under 5 minutes

Everything you need. Nothing you don't.

Magic link auth

In-page editing

GitHub → Vercel

Roles & access

Secure by default

Zero dependencies

Frequently asked questions

One command away from alive editor.

Your Next.js site.
Edited live by your team.

One command away from a
live editor.