Skip to content
Start free
Content visual editing

Visual editing for sites styled with CSS

No Tailwind needed. On a plain CSS or CSS Modules site, the Style panel edits the class rules in your own stylesheets, at the screen sizes your media queries already use. Click to change text, images and links, and hand the rest of your styling to your AI.

Start freeEvery framework

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

Settings, General: Xodia detected an Astro 6 site styled with plain CSS, and marks it Visual editing: click to edit text, images and links, and edit single-class CSS rules in the Style panel.

The Style panel on CSS

The rule behind the element, edited in place

Select an element and the panel shows its classes. Pick one and you edit that class's rule, in the stylesheet that holds it, for every element that uses it.

  • Rules whose selector is one class, such as .card, at the top level or inside one media query
  • All sizes, or one of your site's own min-width or max-width queries, following the canvas width
  • Layout, spacing, size, typography, backgrounds, borders and effects, plus any other property by name
  • Lengths written in rem, and your CSS variables offered for colors and fonts
  • Style blocks in .astro components, as well as .css files

The Style tab on a plain CSS site with the hero heading selected: its classes as the selector, a note that changes apply to every element with .hero-title in src/styles/global.css, All sizes or the site's own 760px query, then font, size, line height, color and alignment set on that rule, and Other properties for anything else.

Panel or AI

What the panel edits, and what goes to your AI

Xodia edits what it can change safely, and says so in the panel when a style belongs to your AI.

  • Plain CSS

    Single-class rules in your .css files and component style blocks. Rules that combine a class with more, such as .card:hover or .nav a, show under the panel as other rules for your AI to change.

  • CSS Modules

    The hashed class in the preview maps back to its .module.css file, and the panel edits the local class there, such as .button in Page.module.css.

  • Sass and Less

    .scss, .sass and .less files, Sass modules included, stay out of the panel. Your AI edits them with Xodia's Sass skills: partials, variables and modules with @use.

  • CSS-in-JS and the rest

    styled-components and Emotion styles go through your AI. An element with no class gets one in a click: Give it a class asks your AI to add a class and an empty rule.

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.

  • Plain CSS skills

    CSS variables as tokens, and exactly which rules Xodia's Style panel can edit.

    Written for: Plain CSS on any framework Xodia opens; component style blocks in Astro, Vue and Svelte.

  • Sass skills

    Partials, variables and maps as the site's tokens, modules with @use and @forward instead of @import, and SCSS edits in code.

    Written for: Dart Sass 1.80 and later (sass, sass-embedded), where @import and global functions are deprecated. node-sass sites 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. Import a site from GitHub or open a folder on your computer
  2. Xodia detects plain CSS, CSS Modules or Sass and the site's media queries
  3. Select an element, pick its class and set values in the Style panel
  4. Save the change as a commit on a branch, and review the CSS in the diff

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

CSS questions

Do I need Tailwind to use the Style panel?

No. Plain CSS and CSS Modules sites get a Style panel that edits class rules. Sites with Tailwind get the panel that writes classes; see Tailwind CSS.

Will the panel rewrite my stylesheets?

No. It changes only the declaration you set, in the rule you picked, and leaves the rest of the file as you wrote it.

Why can't the panel edit some of my rules?

Rules with a combined selector, such as .card:hover or .nav a, and anything in Sass, Less or CSS-in-JS, could change more than the element you selected. Your AI edits those in the code.

Which screen sizes can I style?

All sizes, plus each media query your stylesheets already use. The panel follows the canvas width to the matching query, or you pick one.

Keep exploring

Other stacks

Style your CSS 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