Using Slots

Slots are the atomic units of content in Axolot. They turn static HTML into editable context for your AI.

Unlike traditional CMSs that require you to define schemas in a database first, Axolot uses Schema-on-the-fly. Your code is the schema.

The `data-slot` Attribute

To make any element editable, simply add the data-slot attribute with a unique key. There are no components to import, no hooks to call, and zero impact on your bundle size.

Pro Tip: Use dot-notation for keys (e.g., hero.title) to keep your content organized and help the AI understand hierarchy.

How it Works

When you run your project in development mode with the AxolotBridge active, the system scans your components. When the AI or a user makes a change in the dashboard:

The dashboard sends the new value to the Axolot API.
The API connects to your local project via the secure bridge.
Our Surgical Parser finds the tag with the matching data-slot and replaces its content directly in the .astro file.

Supported Tags

Text Containers: <h1>, <p>, <span> — Content inside is replaced.
Images: <img> — The src attribute is automatically updated.
Links: <a> — The href attribute is updated.

AI-Ready Context

Example: Simple Slot

<!-- Just add the attribute -->
<h1 data-slot="hero.title">
  Original Title
</h1>

<img 
  data-slot="hero.image" 
  src="/old.jpg" 
/>

AI Action

"I'm updating 'hero.title' to 'The Future of AI'. I will perform a regex-match for data-slot='hero.title' and replace its inner content."

Logic & constraints

Use Slot keys as primary keys.

Do not hardcode content strings.

Respect TypeScript interfaces.

Using Slots

The data-slot Attribute

How it Works

Supported Tags

The `data-slot` Attribute