Skip to content
Start free
Full visual editing

Visual editing for Gatsby sites

Open your Gatsby repo on a live preview and click to edit the text, images, links and styles in your React pages and components. Your AI knows which Gatsby version you run, and every change stays a commit in your repo.

Start freeEvery framework

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

Settings, General: Xodia detected a Gatsby 5 site with TypeScript, Tailwind 3, npm, content in files in the repo and Netlify, and marks it Full visual editing.

What you edit visually

Your React pages, edited where you see them

Click anything on the preview to edit it. Text written as plain JSX in your pages and components changes in place, in the file that renders it.

  • Text, images and links, edited in your .jsx and .tsx files
  • The full Style panel on Tailwind sites, writing classes in the component that renders each element
  • Single-class rules in plain CSS and CSS Modules files on sites without Tailwind
  • Text that comes from GraphQL queries or a CMS is changed at its source, by your AI or in the Content tab

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 plugin added as Gatsby loads

    When the preview starts, Xodia hands Gatsby your gatsby-config with its own plugin added, which tags each element with its source file. Your config file never changes.

  • A start you can follow

    Gatsby takes a while to start. The preview shows each step as it happens: loading plugins, gathering data, creating pages, running queries and building the bundle.

  • 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. Uploaded images go to your static folder.

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

    Gatsby 4 and 5, with TypeScript or JavaScript, on Tailwind, plain CSS or CSS Modules.

  • Gatsby skills

    Older Gatsby sites: the Head export, static images, page queries, and keeping changes inside what the installed version supports.

    Written for: Gatsby 4.19 to 5.16 (the Head export needs 4.19, html and body attributes in Head need 5.5). Gatsby gets no new features; Gatsby 3 and older are legacy.

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 any environment variables your source plugins need in Xodia
  3. Xodia runs gatsby develop, detects Gatsby and opens the editor once the first page is built
  4. Edit, then save to a branch; your host builds and 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

Gatsby questions

Do I need to change my gatsby-config?

No. Xodia adds its plugin to the config as Gatsby reads it in the preview, and the file in your repo stays as you wrote it.

Which Gatsby versions work?

Gatsby 4 and 5. Your AI's skills are written for Gatsby 4.19 to 5.16, and keep changes inside what your installed version supports.

What about text from GraphQL and source plugins?

The canvas edits text written in your components. Text that comes from a query, a Markdown file or a CMS is changed where it lives: in the Content tab for files and Sanity, or by your AI.

Does Xodia change how my site is built or hosted?

No. Your site keeps its own 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 Gatsby site the way you see it.

Start freeSee pricing

May we use Google Analytics to see how people find and use this site? It sets cookies only if you allow it. Cookie policy