Getting started

editkraft is a visual CMS for Next.js + Supabase. You install it into your existing project, run one migration, and then edit your pages directly in the Studio — inline, in the real preview.

Three steps from zero to your first editable page.

#1. Install

In the root of your Next.js project (App Router):

npx editkraft init

init scaffolds everything editkraft needs: the content tables as a Supabase migration, an editkraft.config.ts, an example block registry (blocks/registry.ts + blocks/Hero.tsx), the public render route, the ISR revalidate handler, the draft preview route, and a .env.editkraft.example. The command is idempotent — re-running it is safe.

editkraft adds to your project, it doesn’t take it over. Your existing routes always win; only unknown paths fall through to editkraft.

#2. Migrate

editkraft stores content in your Supabase database. Apply the migration init generated:

supabase db push

This creates the ek_pages, ek_page_versions, ek_assets tables (and collections), each with RLS that exposes only published content publicly. Then copy the values from .env.editkraft.example into your environment (Supabase URL + keys).

#3. Open the Studio

Sign in to the Studio at editkraft.com, add your website (Supabase connection), and start editing:

  • Edit — click straight into text, images and links in the live preview.
  • Publish — one click pushes the draft live (ISR revalidate).
  • Invite — optionally bring in more people to edit.

After that, run npx editkraft doctor — it checks migration state, env, and registry consistency.

#Next steps

  • Core concepts — how editkraft models content and data planes.
  • Blocks — build your own blocks and make them editable.