Skip to content
Start free
Full visual editing

Visual editing for Next.js sites

Import your Next.js repo and edit it on a live preview. Click any text, image or link to change it, restyle sections in the Style panel and set page titles, while Xodia writes clean code to your components. Your own AI builds the bigger changes, and every edit is a commit you control.

Start freeEvery framework

Free plan. 14-day Pro trial. No charge unless you choose a plan.

Settings, General: Xodia detected a Next.js 16 site with TypeScript, Tailwind 4 and shadcn/ui, pnpm, Sanity and Vercel, and marks it Full visual editing.

What you edit visually

Click it on the page, change it in the code

Select anything on the preview and Xodia finds the component that renders it, on the App Router or the Pages Router.

  • Text, images and links, edited in place in your components
  • Spacing, type, color and layout in the Style panel, written as Tailwind classes at each screen size
  • Page titles and descriptions in the App Router's metadata export; on the Pages Router your AI changes next/head
  • Rules with a single class in .css and .module.css files; Sass and CSS-in-JS styles through your AI

The Xodia editor with Edit on: a pointer clicks a bakery site's heading and double-clicks it, the formatting bar appears, new words replace the old ones in place and the change shows as 1 unsaved.

Nothing to install

How Xodia opens your site without changing it

What click to edit needs is added from outside your repo while the preview runs, and your saves contain only your own changes.

  • A loader, added as Next.js starts

    Xodia's source tagging runs as a loader for webpack and Turbopack. It wraps your next.config as Next.js loads it, so your own next.config file never changes.

  • The editor in the preview only

    The preview adds a small script that lets you select and edit elements. It runs only in Xodia's preview, never in your build or on your live site.

  • Nothing extra in your commits

    Anything Xodia needs lives outside your repo or is excluded from git, so every save holds only the changes you made.

Versions and skills

The versions it covers, and the skills your AI gets

When your AI works on the site, it loads Xodia's skills for this stack, written for the versions below.

  • Supported versions

    The App Router and the Pages Router, on webpack or Turbopack, with TypeScript or JavaScript.

    Server and client components both open; click to edit works on what the page renders.

  • Next.js skills

    App and Pages Router, server and client components, images, fonts, metadata and caching.

    Written for: Next.js 13 to 16 (App Router and Pages Router); version notes for 16.0, 16.3 and 16.4.

  • With a headless CMS

    Starter and up

    Extra skills for Sanity, Prismic, Contentful and Storyblok, so your AI handles the CMS side too.

    • Next.js with Sanity
    • Next.js with Prismic
    • Next.js with Contentful
    • Next.js with Storyblok

Typical setup

From your repo to your first edit

Import the repo from GitHub or open a folder on your computer. Xodia installs your packages in a private preview, detects the stack and opens the editor.

  1. Install Xodia's GitHub App on the repo and import it, or open the folder on your computer
  2. Add the preview's environment variables, such as your CMS read token, in Xodia
  3. Xodia runs your dev script, detects Next.js and opens the editor
  4. Edit, then save to a branch; your host deploys it as it does today

The New project dialog: the agent step done, then Import from GitHub with the repositories the GitHub App may open, each with Import, beside Start from a template.

Works with

Your content and your host, as they are

Xodia detects where the content lives and where the site is hosted, and keeps both.

  • Headless CMS

    Starter and up

    Sanity, Contentful, Storyblok and Prismic. Sanity: the deepest support, with Content tab editing, drafts to live, publish and discard, Portable Text and the media library.

  • Content in the repo

    Markdown, MDX, JSON and YAML files, Astro content collections, and Keystatic, Decap and TinaCMS.

  • Hosts

    Starter and up

    Vercel, Netlify and Cloudflare connect to show the live address, deploys and build logs; GitHub Pages is detected. Your host keeps deploying the site, exactly as it does now.

Questions

Next.js questions

Do I need to change my next.config?

No. Xodia wraps your config as Next.js loads it in the preview, and your repo keeps the file you wrote. A project with no next.config gets an empty one that git ignores.

App Router or Pages Router?

Both. Click to edit, styles and the code editor work on either. Page settings edits titles and descriptions on App Router pages; on Pages Router pages your AI updates next/head.

What about server components?

They work. Xodia tags the JSX your components return, server or client, so you can click what they render. Data your server components fetch from a CMS is edited in the CMS, or in Xodia's Content tab for Sanity.

Does Xodia change how my site is built or hosted?

No. Your site keeps its framework, styling and build, and your host deploys it as before. You can stop using Xodia at any time and keep everything. See pricing for every plan.

Keep exploring

Other stacks

Edit your Next.js site the way you see it.

Start freeSee pricing