DEV Community

AxolotDevelopment
AxolotDevelopment

Posted on

How to Build an Astro Website with Real-Time Visual Editing (Zero Performance Loss)

#ai #webdev #programming #astro

As developers, we love Astro. It is incredibly fast, clean, and ships zero JavaScript to production by default. But as soon as we hand the project over to clients or marketing teams, they demand a Visual Editor (like WordPress or Squarespace) to edit text, landing pages, and blogs without calling us.

Integrating traditional Headless CMSs (like Sanity or Strapi) is powerful, but it requires a lot of boilerplate code, and building real-time visual previews can kill your local development experience.

This is why we built Axolot CMS — an AI-native, ultra-lightweight visual editor built specifically for Astro developers.

What is Axolot CMS?

Axolot CMS is a code-first, developer-friendly headless CMS. Instead of hosting complex databases or forcing visual builders onto your code, Axolot runs a local WebSocket tunnel that writes client edits directly into your local .astro files as clean code.

How does Axolot compare to traditional CMSs?

Feature WordPress Standard Headless CMS Axolot CMS
Production Speed Slow (Heavy PHP/JS) Fast (API-driven) Ultra-Fast (Lighthouse 100)
Developer Experience Poor Medium (API boilerplate) Excellent (Local code-sync)
Client Editing Visual (Gutenberg) Form-based Live Visual Click-to-Edit
AI Capabilities None / Addon Static API AI-Native & MCP Powered

Quickstart: Scaffold your visual Astro site in 60 seconds

We created an interactive CLI to let you try Axolot immediately. Just run this command in your terminal:

npm create axolot-app@latest
Enter fullscreen mode Exit fullscreen mode

This will scaffold a complete, high-performance Astro project pre-configured with:

  • Tailwind CSS for layout styling.
  • The @axolot-ai/sdk integration registered in your astro.config.mjs.
  • An interactive visual select bridge component <AxolotBridge />.

How do I make my Astro code visually editable?

You don't need complex schemas. Just tag any standard HTML element with a data-slot attribute in your .astro files:

<header class="hero-section">
  <!-- The CMS will automatically detect and allow editing of this text -->
  <h1 data-slot="home.hero.title">Building beautiful websites</h1>

  <!-- Visual image uploader -->
  <img data-slot="home.hero.image" src="/logo.png" alt="Logo" />
</header>
Enter fullscreen mode Exit fullscreen mode

When you start your local server (pnpm dev), the SDK connects a secure tunnel. When clients click and edit the text in the cloud dashboard, it edits your local .astro file code in real-time.

AI & MCP Integration

Can I use local AI assistants like Cursor or Claude Desktop with Axolot?

Yes. Axolot exposes a dedicated Model Context Protocol (MCP) server. You can connect it to your Cursor IDE or Claude Desktop to allow local AI assistants to read your client's design tokens, list pages, and register new visual slots using your exact CSS guidelines.

Add this to your claude_desktop_config.json or Cursor MCP settings:

{
  "mcpServers": {
    "axolot-cms": {
      "command": "npx",
      "args": ["-y", "@axolot-ai/mcp-server"],
      "env": {
        "AXOLOT_API_URL": "https://api.axolotcms.com"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

How does Axolot optimize for Google AI Overviews and SearchGPT?

Axolot automatically generates high-density JSON-LD schemas (like Product, FAQPage, and LocalBusiness) and submits them instantly to the Google Indexing API upon deployment, ensuring generative search engines always have real-time, accurate context about your site.

Summary

  • npm create axolot-app@latest scaffolds a full visual editing Astro project in under 60 seconds.
  • The @axolot-ai/sdk tunnels client edits back into your local .astro source files as clean code.
  • The @axolot-ai/mcp-server gives AI editors like Cursor direct access to design tokens, media, and pages.
  • Production output is pure static HTML with a Lighthouse Performance Score of 100.

Let us know what you think! Try it out and share your feedback.

🔗 Links:

Top comments (0)