@editlayer/next

v0.3.1

Published

2 months ago

Add safe, in-page visual editing to a Next.js (App Router) site — let owners/marketing edit static marketing copy with ?edit=true and publish to GitHub. Webflow-style copy editing for custom-coded React sites, no CMS required.

Downloads

@editlayer/next

Add safe, in-page visual editing to your Next.js site. EditLayer is a tiny, secure editing layer for custom-coded Next.js (App Router) marketing websites — mark static marketing copy (headlines, subtitles, CTAs, paragraphs) as editable, then let owners and marketing teams edit it directly on the page with ?edit=true and publish changes to GitHub. Vercel auto-redeploys.

It's not a CMS, not a page builder, not a Webflow clone, not an AI generator. It's Webflow-style copy editing for a coded React site, with developers in full control of structure.

Core promise: "Add ?edit=true to your Next.js site and safely edit static marketing copy in place."

Install

npm install @editlayer/next
npx editlayer init

Quick start

// app/layout.tsx
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>
  );
}

import { EditableText, EditableLink, EditableImage } from "@editlayer/next";

export function Hero() {
  return (
    <section>
      <EditableText id="home.hero.title" as="h1">
        Websites that move faster than your competitors.
      </EditableText>
      <EditableText id="home.hero.subtitle" as="p">
        Custom-coded marketing sites your team can safely update.
      </EditableText>
      <EditableLink id="home.hero.cta" href="/contact">Book a call</EditableLink>
    </section>
  );
}

Then visit https://yoursite.com/?edit=true, log in with a magic link, edit, and publish.

Features

🟢 In-page visual editing — green outlines, click-to-edit popovers, live preview
🔒 Secure by default — magic-link auth, HttpOnly cookies, role-based access, CSRF + origin checks, rate limiting, plain-text sanitization
👥 Roles — owners publish; editors submit drafts
🧩 Only marked fields — nothing else on your site is editable
🚀 Git-based publishing — commits JSON to your repo; Vercel auto-deploys
⚡ No database, no external dashboard, no CMS schema

Environment variables

EDITLAYER_SECRET=...           # 32+ random chars
EDITLAYER_SITE_URL=https://yoursite.com
[email protected]
[email protected]
EDITLAYER_RESEND_API_KEY=re_...
EDITLAYER_EMAIL_FROM=EditLayer <[email protected]>
EDITLAYER_GITHUB_TOKEN=github_pat_...
EDITLAYER_GITHUB_REPO=you/your-repo
EDITLAYER_GITHUB_BRANCH=main

Optional: connect the EditLayer Dashboard

If you use the EditLayer Dashboard to manage sites and team access visually, add the three values it gives you. The site then sends a server-to-server heartbeat so the dashboard shows it as Connected — no inbound route, no CORS, and the API key never reaches the browser.

EDITLAYER_PROJECT_ID=proj_...
EDITLAYER_API_KEY=elk_live_...
EDITLAYER_DASHBOARD_URL=https://your-dashboard.com

These are fully optional and additive — without them, env-based allowlists work exactly as before.

Full setup guide, security model, and docs: https://github.com/zlatkomarjanovic/editlayer

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@editlayer/next

Install

Quick start

Features

Environment variables

Optional: connect the EditLayer Dashboard

License