The Built-in Doctor

Meet the real-time diagnostic engine that ensures your site remains structurally sound during every edit.

Modifying code in real-time can be dangerous. A single unclosed <a> tag can "bleed" and wrap your entire page, breaking layouts. Axolot includes a Proactive Health Monitor that runs silently in your browser during development.

Real-Time Structural Audits

The AxolotBridge doesn't just sync data; it constantly audits your DOM structure. If it detects a critical issue, it reports it instantly to the Studio so the AI can fix it before it hits production.

Critical

Bleeding Anchors

Detects <a> tags that wrap too many block-level elements or slots. This usually happens when a developer forgets to close a link tag.

Medium

Orphan Slots

Identifies data-slots in your code that are not registered or synchronized with the CMS database.

Warning

Oversized Slots

Flags slots that contain more than 2-3 major sections. This helps prevent "runaway" slots that accidentally swallow entire components.

How to use the Diagnostic

You don't need to do anything. The health check runs every 5 seconds while the AxolotBridge is active. You can check the results in:

Browser Console: Look for the 🩺 [Axolot Health] logs.
Studio Dashboard: A warning indicator will appear if structural issues are detected.

AI-Ready Context

Diagnostic Report (Internal JSON)

{
  type: "bleeding-anchor",
  severity: "critical",
  description: "An anchor tag is wrapping 
               editable slots. 
               This blocks editing.",
  code: "<a href='#'>... (500 lines)"
}

AI Safety First

"Before I apply a change to a data-slot, I verify the health status. If a 'bleeding-anchor' is detected, I will first suggest fixing the HTML structure before updating the content."

Logic & constraints

Use Slot keys as primary keys.

Do not hardcode content strings.

Respect TypeScript interfaces.