Documentation

Muon Site Engine

Build ultra-premium, enterprise-grade SaaS and corporate websites using a 100% JSON-driven headless architecture. No React or CSS knowledge required.

Installation & Setup

To generate a new website, you must have Node.js installed and authenticate with the GitHub Packages Registry.

npx @leoc1992/site-engine my-awesome-site
cd my-awesome-site
npm install
npm run dev

AI Agent Skill Architecture

The Muon Site Engine was engineered from the ground up to be an AI-native website operating system. Because 100% of the UI, layouts, styles, SEO, and popups are defined declaratively via JSON schemas, modern autonomous agents (such as Google Antigravity, Cursor, Windsurf, Claude Code, and Copilot) can architect and modify complex, high-converting websites in seconds with zero hallucination.

The Universal AI Base Prompt Template

When starting a new session or instructing an AI agent to build or modify a website, copy and paste this base prompt. It sets up strict architectural guardrails and ensures the agent outputs production-ready code:

You are building a website using `@leoc1992/site-engine` (a 100% JSON-driven React Website Engine).

Before writing any code or modifying configurations:
1. READ and follow `.agents/skills/site-engine/SKILL.md` and the project guidelines in `.agents/AGENTS.md`.
2. Adhere strictly to the JSON-driven architecture:
   - Do NOT hardcode text, images, links, or styles directly into React section components.
   - Modify `src/config.json` (content/structure), `public/theme.json` (theming/customCss), `src/config/seo.json` (technical SEO), and `src/config/popups.json` (modals/lead capture).
3. If custom React logic or 3rd-party widgets are needed, use developer extensions (`customComponents`, `slots`, and `slotProps`) on `` rather than modifying core engine files.
4. Elevate visual design with engine tokens:
   - Use `cardVariant: "glass"` with frosted blurs, or `cardVariant: "neumorphic"` / `"neumorphic-inset"`.
   - Enable interactive cursor spotlights (`spotlight: true` or `hoverEffect: "spotlight"`).
   - Use kinetic shimmer typography (`shimmer: true`, `gradientPreset: "aurora"`).

--- TASK SPECIFICATION ---
- Company / Project Name: [Insert Name]
- Industry / Vibe: [e.g. Ultra-modern AI Developer Platform, Dark Mode, Sapphire & Cyan accents]
- Target Pages: [e.g. Home (/), Pricing (/pricing), Features (/features), Docs (/docs)]
- Specific Requirements: [e.g. Exit-intent lead capture modal, Google Analytics 4 integration, Mega Menu header]

Task-Specific Prompt Recipes

Use these specialized prompt snippets for specific website building and optimization tasks:

Using `@leoc1992/site-engine`, generate `src/config.json` and `public/theme.json` for "CognitiveMesh AI" — an autonomous workflow orchestration platform.
Requirements:
1. Theme: Dark mode (`#0b0f19` background), cyan (`#06b6d4`) primary, violet (`#8b5cf6`) secondary, `glass` cardVariant.
2. Pages: Home (`/`) with Hero (split layout, kinetic shimmer badge), Bento grid features, social proof stats, and CTA. Pricing (`/pricing`) with 3-tier comparison layout and annual billing toggle.
3. Navigation: Multi-column `mega` menu with "Products", "Solutions", and "Enterprise Guides".
4. Copywriting: Enterprise-grade, technical, and high-converting.

Generate a comprehensive `src/config/seo.json` for `@leoc1992/site-engine`:
1. Site: titleTemplate: "%s | QuantumFlow AI", canonical baseUrl: "https://quantumflow.ai", OpenGraph image, Twitter card summary_large_image.
2. Structured Data: Organization schema with logo and contactPoint; WebSite SearchAction schema.
3. Page Overrides: Detailed meta title, description, and FAQPage schema for `/faq`; Product/Offer schema for `/pricing`.
4. Analytics: Google Analytics 4 (G-XXXXXXXXXX) and Microsoft Clarity (clarity_project_id).

Add a high-converting exit-intent modal in `src/config/popups.json` using the `@leoc1992/site-engine` popups schema:
1. ID: "exit-lead-magnet", variant: "glass", trigger: "exitIntent" (sensitivity: 25px, fallbackDelayMs: 25000).
2. Frequency: maxImpressions: 2, cooldownDays: 5, oncePerSession: true, stopOnConversion: true.
3. Targeting: includeRoutes: ["/", "/pricing", "/features*"], excludeRoutes: ["/checkout", "/dashboard/*"].
4. Content: Badge: "Exclusive Sandbox", Title: "Deploy 50 Autonomous Agents Free", CTA: "Claim Instant Sandbox".

In my `@leoc1992/site-engine` Next.js/Vite app:
1. Show me how to use the `slots` prop on `` to inject a custom interactive 3D Three.js canvas into the hero section (`hero-media` slot).
2. Show how to use `customComponents` to replace the contact section with a multi-step Typeform-like interactive quote estimator while consuming theme tokens via `useThemeTokens()`.

File Structure

Once scaffolded, your project is highly minimized. You only need to care about the two highlighted JSON files.

my-awesome-site/
├── .npmrc               <-- Pre-configured for GitHub Packages
├── AI_INSTRUCTIONS.md   <-- AI Assistant rules
├── MUON_COMPONENTS_DOCS.html <-- Offline component schema docs
├── package.json
├── public/
│   ├── favicon.ico
│   └── theme.json       <-- Edit this for Colors, Fonts, & Design
└── src/
    ├── App.jsx
    ├── config.json      <-- Edit this to Build Your Website
    └── main.jsx

Understanding config.json

The config.json file controls what appears on your website. It is divided into two main parts: the site metadata and the sections array.

{
  "site": {
    "title": "My Company",
    "seo": {
      "title": "My Company | Premium Services",
      "description": "We deliver excellence.",
      "keywords": ["saas", "enterprise"]
    }
  },
  "sections": [
    // Your website structural blocks go here
  ]
}

Multi-Page Routing

The engine natively supports React Router. If you want to build a multi-page website (instead of a Single-Page App), you can replace the sections array with a pages object mapping to different routes.

{
  "site": {
    "title": "My Company",
  },
  "pages": {
    "/": {
      "seo": { "title": "Home" },
      "sections": [
        { "id": "hero-1", "type": "hero", "content": {...} }
      ]
    },
    "/pricing": {
      "seo": { "title": "Pricing" },
      "sections": [
        { "id": "pricing-1", "type": "pricing", "content": {...} }
      ]
    }
  }
}

Note: You can link between these pages seamlessly in the Header's navLinks or CTA button href properties.

Managing Sections

The sections array in config.json dictates the exact visual order of blocks on your webpage. The engine renders this array sequentially.

"sections": [
  {
    "id": "header-1",
    "type": "header",
    "layout": "glass",
    "content": { ... }
  },
  {
    "id": "hero-1",
    "type": "hero",
    "layout": "split",
    "content": { ... }
  }
]

Theming & Design (theme.json)

The theme.json file acts as the universal design system for the website. The engine uses this to dynamically generate CSS variables and a custom Material UI theme.

{
  "theme": {
    "mode": "system",
    "colors": {
      "primary": "#4f46e5",
      "secondary": "#ec4899"
    }
  }
}

{
  "typography": {
    "fontFaces": [
      {
        "fontFamily": "ClashDisplay",
        "url": "/fonts/ClashDisplay-Bold.woff2",
        "format": "woff2",
        "weight": 700
      }
    ],
    "fontFamilyHeading": "ClashDisplay, sans-serif"
  }
}

{
  "shape": {
    "cardVariant": "glass",
    "glassBlur": "16px",
    "glassOpacity": 0.15
  }
}

{
  "interactions": {
    "customCursor": true,
    "magneticButtons": true
  }
}

{
  "styleOverrides": {
    "#hero-section": {
      "paddingTop": "120px",
      "paddingBottom": "100px"
    },
    ".feature-card": {
      "padding": "36px",
      "marginBottom": "24px"
    },
    "MuiButton": {
      "borderRadius": "999px",
      "textTransform": "none"
    },
    "MuiCard": {
      "borderRadius": "24px"
    }
  }
}

{
  "customCss": "/* Custom Glowing Pulsing Keyframe */\n@keyframes pulseGlow {\n  0%, 100% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.4); }\n  50% { box-shadow: 0 0 40px rgba(79, 70, 229, 0.8); }\n}\n\n.glow-button {\n  animation: pulseGlow 3s infinite ease-in-out;\n}\n\n@media (max-width: 768px) {\n  .custom-section { padding-top: 48px !important; }\n}"
}

Forms & Integrations

The contact and newsletter components support out-of-the-box data capture via Web3Forms or generic webhooks (like Zapier, Make, or your own custom API).

{
  "type": "contact",
  "content": {
    "title": "Contact Us",
    "formIntegration": {
      "provider": "web3forms",
      "accessKey": "YOUR_WEB3FORMS_ACCESS_KEY"
    }
  }
}

{
  "type": "newsletter",
  "content": {
    "title": "Subscribe",
    "formIntegration": {
      "provider": "webhook",
      "endpoint": "https://hooks.zapier.com/hooks/catch/123456/"
    }
  }
}

Rich Media Backgrounds

Any major section (like hero or features) supports a backgroundMedia object to inject looping videos, interactive 3D Spline scenes, or WebGL shaders natively behind your content.

{
  "type": "hero",
  "backgroundMedia": {
    "type": "video",
    "url": "/assets/my-cinematic-bg.mp4",
    "opacity": 0.5,
    "overlayColor": "#000000"
  },
  "content": {
    "title": "Welcome to the Future"
  }
}

{
  "type": "hero",
  "backgroundMedia": {
    "type": "iframe",
    "url": "https://my.spline.design/your-scene-url/",
    "opacity": 1.0,
    "overlayColor": "transparent"
  }
}

{
  "type": "hero",
  "backgroundMedia": {
    "type": "lottie",
    "url": "/assets/hero-animation.json",
    "opacity": 0.8
  }
}

{
  "type": "features",
  "backgroundMedia": {
    "type": "video",
    "url": "/assets/stars-bg.mp4",
    "parallax": true
  }
}

Navigation & Structure

The engine supports extremely advanced navigation patterns required by enterprise sites, all configurable through JSON.

{
  "label": "Company",
  "type": "dropdown",
  "links": [
    { "label": "About Us", "href": "/about", "description": "Our team and vision" },
    { "label": "Careers", "href": "/careers", "description": "We are hiring!" },
    { "label": "Pricing", "href": "/pricing" }
  ]
}

{
  "label": "Solutions",
  "type": "mega",
  "megaMenu": {
    "columns": [
      {
        "title": "Cloud & AI",
        "links": [
          { "label": "Cloud Infrastructure", "href": "/cloud", "description": "AWS & GCP scalable stacks" },
          { "label": "AI Systems", "href": "/ai", "description": "LLM integrations & analytics" }
        ]
      },
      {
        "title": "Engineering",
        "links": [
          { "label": "Web Applications", "href": "/web" },
          { "label": "Mobile Apps", "href": "/mobile" }
        ]
      }
    ],
    "featured": {
      "image": "/assets/featured.jpg",
      "title": "Enterprise Case Study",
      "href": "/case-study"
    }
  }
}

{
  "type": "docsLayout",
  "content": {
    "sidebar": [
      { "label": "Introduction", "targetId": "intro" },
      { "label": "Installation", "targetId": "install" }
    ],
    "blocks": [
      { "id": "intro", "html": "
Intro
" },
      { "id": "install", "html": "
Installation
" }
    ]
  }
}

{
  "type": "features",
  "sticky": true,
  "stickyOffset": 80,
  "content": { ... }
}

Architecture & SEO

The engine goes beyond UI components, providing deep infrastructural layers for SEO, Internationalization, and Next.js support.

{
  "i18n": {
    "defaultLocale": "en",
    "translations": {
      "en": { "hero_title": "Welcome" },
      "fr": { "hero_title": "Bienvenue" }
    }
  },
  "sections": [
    {
      "type": "hero",
      "content": { "title": "{{t:hero_title}}" }
    }
  ]
}

{
  "seo": {
    "title": "Muon Site Engine",
    "description": "The best platform.",
    "ogImage": "https://mysite.com/og.jpg",
    "googleTagId": "G-XXXXXXXXXX"
  }
}

{
  "abTests": {
    "hero_cta": {
      "weights": [50, 50],
      "variants": [
        { "sections": [ { "type": "hero", "content": { "title": "Buy Now" } } ] },
        { "sections": [ { "type": "hero", "content": { "title": "Start Free" } } ] }
      ]
    }
  }
}

Custom Component Overrides

The Muon Site Engine gives developers total control over rendering. You can inject custom React components into any page using the customComponents prop on DynamicPage or DynamicSections.

Example: Overriding a Section by ID or Type

import React from 'react';
import { DynamicPage, PrimitiveCard, PrimitiveTypography, useThemeTokens } from '@site-engine/core';

// Custom Interactive Widget Component
function CustomInteractivePricing({ content, isDark }) {
  const { colors } = useThemeTokens();
  return (
    <div className="p-8 my-12" style={{ background: colors.background }}>
      <PrimitiveTypography variant="h2" shimmer>
        {content.title || 'Custom Billing Engine'}
      </PrimitiveTypography>
      <p>Bypassed standard layout with fully custom React state!</p>
    </div>
  );
}

// Pass customComponents directly to DynamicPage
export default function Page({ config }) {
  return (
    <DynamicPage
      config={config}
      slug="/"
      customComponents={{
        // Target a specific section by its 'id' in config.json
        'custom-hero-01': MyCustom3DHero,
        // Or override all pricing sections globally
        pricing: CustomInteractivePricing,
      }}
    />
  );
}

Slots & Render Props Injection

Want to use the built-in sections but inject custom UI elements (like an interactive annual billing switch, email validation form, or 3D badge) without replacing the whole section? Use Slots and SlotProps.

Example: Injecting a Slot into Pricing

<DynamicPage
  config={config}
  slug="/pricing"
  slots={{
    pricing: {
      billingToggle: (
        <div className="flex justify-center items-center gap-3 my-6">
          <span className="text-sm font-semibold">Monthly</span>
          <Switch onChange={(e) => setIsAnnual(e.target.checked)} />
          <span className="text-sm font-semibold text-indigo-600">Annual (Save 20%)</span>
        </div>
      )
    }
  }}
/>

useThemeTokens Hook API

The useThemeTokens() hook provides instant, reactive access to computed palette colors, typography fonts, shape radii, glassmorphism tokens, and neumorphic box shadows.

import { useThemeTokens } from '@site-engine/core';

export function CustomCard() {
  const { colors, typography, shapes, effects, isDark } = useThemeTokens();

  return (
    <div
      style={{
        background: colors.cardBackground,
        borderRadius: shapes.borderRadius,
        boxShadow: effects.neumorphic,
        border: effects.glassBorder,
        padding: shapes.cardPadding,
        fontFamily: typography.bodyFont,
      }}
    >
      <h3 style={{ color: colors.primary, fontFamily: typography.headingFont }}>
        Token Synchronized Card
      </h3>
    </div>
  );
}

Interactive Cursor Spotlight Cards

Replicate the signature Linear, Raycast, and Apple glowing card effect. When the cursor hovers and moves over the card, an ambient radial glow follows the cursor position with hardware-accelerated precision.

<PrimitiveCard spotlight spotlightColor="rgba(99, 102, 241, 0.25)">
  <h4>Interactive Card</h4>
</PrimitiveCard>

<PrimitiveSpotlight>
  <PrimitiveGrid columns={3}>
    <PrimitiveCard spotlight>Card 1</PrimitiveCard>
    <PrimitiveCard spotlight>Card 2</PrimitiveCard>
  </PrimitiveGrid>
</PrimitiveSpotlight>

Kinetic Shimmer & Gradient Typography

Turn static text into eye-catching, high-converting focal points with kinetic shimmer shine animations and curated gradient presets.

// Shimmer Animated Heading
<PrimitiveTypography variant="h1" shimmer>
  Next-Gen Cloud Architecture
</PrimitiveTypography>

// Aurora Gradient Heading
<PrimitiveTypography variant="h2" gradient gradientPreset="aurora">
  Supercharged Developer Engine
</PrimitiveTypography>

Neumorphic & Inset Styling

Create soft, tactile, embossed interfaces with extruded or recessed shadows tailored for both Light and Dark themes.

<PrimitiveCard variant="neumorphic">
  <p>Soft Extruded Surface</p>
</PrimitiveCard>

<PrimitiveCard variant="neumorphic-inset">
  <p>Recessed Surface Well</p>
</PrimitiveCard>

Enhanced Glassmorphism

Achieve Apple-level frosted glass with specular border illumination, multi-layer backdrop blurs, and gradient transparency.

{
  "theme": {
    "shape": {
      "cardVariant": "glass",
      "glassBlur": "20px",
      "glassOpacity": 0.5
    }
  }
}

Aurora Mesh & Spotlight Backdrops

Set section backdrops to fluid multi-color ambient radial meshes using background="aurora" or glowing top beams with background="spotlight" in PrimitiveContainer.

<PrimitiveContainer background="aurora" paddingY="120px">
  <HeroSection content={heroContent} />
</PrimitiveContainer>

Enterprise JSON-Driven SEO Subsystem

The Muon Site Engine provides a 100% JSON-driven Technical SEO, Analytics, and Structured Data engine. An external SEO team or marketing agency can configure, optimize, and audit meta tags, JSON-LD schemas, webmaster verifications, and analytics trackers without modifying any React source code.

1. Complete seo.json Configuration

Pass an SEO config file directly to <EngineProvider seo={seoJson}> or <DynamicPage seo={seoJson}>:

{
  "$schema": "https://muoninfotech.com/schemas/website-os.seo.json",
  "site": {
    "siteName": "QuantumFlow AI",
    "baseUrl": "https://quantumflow.ai",
    "titleTemplate": "%s | QuantumFlow AI",
    "defaultTitle": "QuantumFlow AI - Next-Gen Autonomous Enterprise Platform",
    "defaultDescription": "Orchestrate multi-agent workflows, autonomous services, and observability.",
    "defaultOgImage": "https://quantumflow.ai/og-banner.jpg",
    "themeColor": "#0f172a",
    "language": "en",
    "robots": "index, follow, max-image-preview:large",
    "keywords": ["AI Platform", "Autonomous Agents", "Enterprise Intelligence"]
  },
  "verification": {
    "google": "google-site-verification-token",
    "bing": "bing-verification-token",
    "yandex": "yandex-token",
    "pinterest": "pinterest-meta-key",
    "facebookDomain": "facebook-domain-verification-token"
  },
  "analytics": {
    "googleAnalytics": {
      "measurementId": "G-XXXXXXXXXX",
      "anonymizeIp": true,
      "sendPageView": true
    },
    "googleTagManager": {
      "containerId": "GTM-XXXXXXX"
    },
    "metaPixel": {
      "pixelId": "123456789012345"
    },
    "microsoftClarity": {
      "projectId": "clarity_sample_id"
    }
  },
  "structuredData": {
    "organization": {
      "type": "Corporation",
      "name": "QuantumFlow AI Inc.",
      "url": "https://quantumflow.ai",
      "logo": "https://quantumflow.ai/logo.png",
      "sameAs": [
        "https://twitter.com/quantumflow",
        "https://linkedin.com/company/quantumflow"
      ]
    },
    "enableSearchAction": true
  },
  "pages": {
    "/": {
      "title": "QuantumFlow AI - Autonomous Enterprise Intelligence",
      "description": "Unified platform to design and deploy autonomous multi-agent systems.",
      "canonical": "https://quantumflow.ai/"
    },
    "/pricing": {
      "title": "Predictable Enterprise Pricing",
      "description": "Transparent tiers from startup scale to dedicated clusters.",
      "structuredData": {
        "product": {
          "name": "QuantumFlow Enterprise Cluster",
          "price": "499.00",
          "priceCurrency": "USD",
          "brand": "QuantumFlow AI"
        }
      }
    },
    "/faq": {
      "title": "Frequently Asked Questions",
      "description": "Compliance, security, SOC2, latency, and integration FAQ.",
      "autoFaqSchema": true
    }
  }
}

2. OpenGraph, Twitter Cards & Reactive Head Injection

When a user navigates between routes, SEOMetadata automatically updates the document title, canonical link, OpenGraph tags (og:title, og:description, og:image, og:url), and Twitter Cards (twitter:card, twitter:site) synchronously.

import { EngineProvider, DynamicPage } from '@leoc1992/site-engine';
import config from './config.json';
import seoConfig from './seo.json';

export default function App() {
  return (
    <EngineProvider config={config} seo={seoConfig}>
      <DynamicPage />
    </EngineProvider>
  );
}

3. Schema.org JSON-LD Builders

The engine automatically creates rich, search-engine ready JSON-LD payloads for Google Search Rich Results:

4. Analytics, GTM, Meta Pixel & Clarity

Trackers are safely loaded with async script injection. Single-page route transitions trigger automatic virtual pageviews across all configured measurement IDs:

import { trackPageView, initAnalytics } from '@leoc1992/site-engine';

// Track custom page transition manually if needed
trackPageView('/custom-route', 'Custom Page Title');

5. Sitemap & Robots.txt Generators

Export static sitemap.xml and robots.txt strings directly from your build pipeline or Next.js / Vite API route:

import { generateSitemap, generateRobotsTxt } from '@leoc1992/site-engine';
import seoConfig from './src/config/seo.json';

// Generate sitemap.xml
const sitemapXml = generateSitemap(seoConfig);

// Generate robots.txt
const robotsTxt = generateRobotsTxt(seoConfig, {
  disallow: ['/admin', '/dashboard/private']
});

JSON-Driven Popups & Exit-Intent Subsystem

Turn departing visitors into leads and customers with zero custom code. The engine features a fully integrated modal and trigger system capable of detecting cursor velocity, window boundary exit, scroll depth, and idle timeouts, paired with client-side impression capping and cooldown persistence.

1. Popups JSON Specification

Popups can be defined directly inside config.json under the popups array or passed via <EngineProvider popups={popupsJson}> / <DynamicPage popups={popupsJson}>:

[
  {
    "id": "exit-lead-magnet",
    "enabled": true,
    "type": "leadCapture",
    "variant": "glass",
    "trigger": {
      "type": "exitIntent",
      "sensitivity": 20,
      "fallbackDelayMs": 20000
    },
    "frequency": {
      "maxImpressions": 2,
      "storage": "local",
      "cooldownDays": 7,
      "oncePerSession": true,
      "stopOnConversion": true
    },
    "targeting": {
      "includeRoutes": ["/", "/pricing", "/features*"],
      "excludeRoutes": ["/checkout", "/dashboard/*"],
      "device": "all"
    },
    "content": {
      "badge": "Limited Time Offer",
      "title": "Before you leave — Claim 30 Days Free Sandbox Access",
      "description": "Join 5,000+ AI engineers deploying autonomous workflows with sub-millisecond orchestration.",
      "image": "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?auto=format&fit=crop&w=600&q=80",
      "inputPlaceholder": "Enter your work email",
      "ctaText": "Claim Free Access",
      "secondaryCtaText": "No thanks, I'll explore later",
      "disclaimer": "No credit card required. Instant sandbox provisioning."
    },
    "animation": {
      "backdropBlur": "16px"
    }
  }
]

2. Supported Trigger Types

Choose from four reactive trigger mechanisms:

3. Frequency Capping & Target Rules

Prevent user fatigue by enforcing intelligent suppression rules:

• maxImpressions: Maximum number of times the popup can ever be displayed to a single browser.
• cooldownDays / cooldownHours: Minimum delay before the popup is eligible to reappear.
• oncePerSession: Restricts display to at most once per active browser session.
• stopOnConversion: Permanently locks and suppresses the popup once the user submits the form or clicks CTA.
• includeRoutes / excludeRoutes: Target specific URL routes with wildcard pattern matching (e.g. ["/features*"]).

4. Developer Custom Slot Overrides

Need to replace the modal UI with a custom React component while retaining the engine's exit-intent detection and frequency engine? Use the slots prop:

import React from 'react';
import { DynamicPage } from '@leoc1992/site-engine';
import config from './src/config/config.json';
import popups from './src/config/popups.json';

function CustomExitModal({ popup, onClose, onConvert }) {
  return (
    <div className="bg-slate-950 p-8 rounded-3xl border border-indigo-500/30 text-white max-w-md">
      <h3 className="text-2xl font-black">{popup.content.title}</h3>
      <p className="text-slate-400 mt-2">{popup.content.description}</p>
      <button onClick={() => { onConvert(popup.id); onClose(); }} className="mt-4 px-6 py-3 bg-indigo-600 rounded-xl">
        Claim Voucher
      </button>
    </div>
  );
}

export default function App() {
  return (
    <DynamicPage
      customConfig={config}
      popups={popups}
      slots={{
        'popup-exit-lead-magnet': CustomExitModal
      }}
    />
  );
}

Future Enhancements Coming Soon

We are constantly evolving the Muon Site Engine to be the most powerful, highly-customizable JSON-driven platform on the web. Below is our comprehensive roadmap for upcoming features.