{"schema":"xtend.docs.parsedown-rmt-page-payload.v1","ok":true,"slug":"xtend-classic","requestedSlug":"xtend-classic","canonicalSlug":"xtend-classic","aliased":false,"locale":"en","requestedLocale":"en","resolvedLocale":"en","fallbackLocale":"de","translationAvailable":true,"html":"

XTend Classic

\n

XTend Classic is the productive HTML- and JavaScript-first delivery path for XTend Web Components. A host keeps its authored HTML, loads the local components/manifest.json through xtend-loader.js, and lets the browser register components without an XTend application build.

\n

“No application build required” means that XTend does not require Maraca, the compiler, or the CLI to deliver the page. A host may still use its own bundler, TypeScript, local server, or optional XTend tooling. Classic is not a legacy mode: only xtend-dev.js and the ./legacy-loader export are legacy compatibility surfaces.

\n

The package root now belongs to the ESM Registry. It does not start Classic. Package-based Classic hosts must use @ccslabs/xtend/loader; script-based hosts continue to include xtend-loader.js explicitly.

\n
import '@ccslabs/xtend/loader';
\n

Choose Classic or Maraca

\n
XTend ClassicXTend Maraca
HTML- and JavaScript-firstRMT- and build-first
Runtime manifest with xtend-loader.jsStatic inline registry in a generated ESM bundle
No XTend application build requiredPlan, build, tune, and evidence pipeline
Dynamic catalogs and progressive enhancementOptimized app graphs, SSR/hydration, PWA, and production reports
\n

Both paths use the same public Web Component contracts. Choose Classic for directly authored sites, documentation, progressive enhancement, dynamic component catalogs, or hosts that deliberately own their runtime composition. Choose XTend Maraca when an RMT document should become a compiler-selected application bundle with build evidence.

\n

Minimal Classic host

\n

Preload only the components required in the first viewport. The loader discovers deeper manifest-backed elements and loads them as they approach the viewport.

\n
<meta name="xtend-preload" content="xtend-state,x-theme,x-header,x-hero">\n<script type="module"\n  src="/xtend-loader.js"\n  data-manifest="/components/manifest.json"></script>\n\n<x-hero>\n  <h1>Hello XTend Classic</h1>\n</x-hero>\n<x-section label="Loaded near the viewport"></x-section>
\n

The manifest remains the host-controlled allowlist. Unknown tags stay undefined, while refused protocols, origins, paths, or extensions produce explicit loader diagnostics instead of a remote fallback.

\n

JavaScript and dynamic content

\n

window.__XTendLoaderBootPromise exposes initial boot completion. Use the public loader API when JavaScript adds a known component after boot:

\n
await window.__XTendLoaderBootPromise;\n\nconst region = document.querySelector('[data-dynamic-region]');\nconst button = document.createElement('x-button');\nbutton.setAttribute('label', 'Continue');\nregion.append(button);\nawait window.XTendLoader.hydrateTree(region);\nawait customElements.whenDefined('x-button');
\n

Prefer structured DOM operations for untrusted or variable content. Free HTML strings still require the documented Trusted DOM and sanitizing boundaries; Classic does not weaken security policy.

\n

Optional DEV API

\n

Development hosts can ask the same loader to install the read-only Classic diagnostics adapter:

\n
<script type="module"\n  src="/xtend-loader.js"\n  data-manifest="/components/manifest.json"\n  data-dev-api="true"></script>
\n

This exposes window.__XTEND_DEV_API__ without another script tag or monkeypatching. Loader and browser performance measurements are real; Fabric, RMT Kernel, and SSR hydration report supported: false when those runtimes are not active.

\n

Production checklist

\n\n

Technical references

\n","meta":{"schema":"xtend.docs.parsedown-rmt-page.v1","source":"docs/en/xtend-classic.md","slug":"xtend-classic","locale":"en","requestedLocale":"en","resolvedLocale":"en","fallbackLocale":"de","translationAvailable":true,"routeId":"docs.xtend.classic","path":"/en/xtend-classic","router":"xtend.xrouter","title":"XTend Classic","documentTitle":"XTend Classic | XTend Documentation","titleTemplate":"{{title}} | XTend Documentation","metaDescription":"XTend Classic is the productive HTML- and JavaScript-first delivery path for XTend Web Components. A host keeps its authored HTML, loads the local componen","metaKeywords":["xtend","documentation","xtend classic"],"template":"docs.xtend-classic.markdown","shellFirst":true,"shellTemplate":"docs.app.shell","searchTemplate":"docs.header.search","contentSlot":"content","contentKind":"parsedownHtml","adapter":"docs.parsedown","component":"docs.page","markupClass":"parsedownHtml","trustBoundary":"xtend.security.sanitizing-boundary.v1","lazyPayload":true,"skeletonLoader":"xtend.loader.skeleton-loader.v1","schedules":{"shell":"docs.shell.render","parse":"docs.markdown.parse","route":"docs.route.render","hydrate":"docs.page.hydrate","search":"docs.search.index","rich":"docs.rich-content.prepare","media":"docs.media.lazy","diagnostics":"docs.diagnostics.snapshot"},"endpoints":{"shell":"xtendrmt.shell.render","parse":"xtendrmt.docs.parsedown.parse","route":"xtendrmt.route.render","hydrate":"xtendrmt.component.hydrate","search":"xtendrmt.docs.search.index","rich":"xtendrmt.docs.rich-content.prepare","media":"xtendrmt.docs.media.lazy","diagnostics":"xtendrmt.diagnostics.snapshot"},"extensionSlots":["docs.slot.content","docs.slot.sidebar","docs.slot.related","docs.slot.component-demo","docs.slot.rich-content","docs.slot.media","docs.slot.diagnostics"],"route":{"id":"docs.xtend.classic","path":"/en/xtend-classic","router":"xtend.xrouter","component":"docs.page","title":"XTend Classic","documentTitle":"XTend Classic | XTend Documentation","titleTemplate":"{{title}} | XTend Documentation","metaDescription":"XTend Classic is the productive HTML- and JavaScript-first delivery path for XTend Web Components. A host keeps its authored HTML, loads the local componen","metaKeywords":["xtend","documentation","xtend classic"],"template":"docs.xtend-classic.markdown","shell":"docs.app.shell","schedule":"docs.route.render","skeleton":"article","skeletonProfile":"docs-article","skeletonLines":10,"skeletonMinHeight":"26rem","hydration":{"schedule":"docs.page.hydrate","policy":"visible"},"metadata":{"source":"docs/en/xtend-classic.md","slug":"xtend-classic","locale":"en","requestedLocale":"en","resolvedLocale":"en","fallbackLocale":"de","translationAvailable":true,"shellTemplate":"docs.app.shell","searchTemplate":"docs.header.search","contentKind":"parsedownHtml","lazyPayload":true,"skeletonLoader":"xtend.loader.skeleton-loader.v1","seo":{"title":"XTend Classic","documentTitle":"XTend Classic | XTend Documentation","titleTemplate":"{{title}} | XTend Documentation","description":"XTend Classic is the productive HTML- and JavaScript-first delivery path for XTend Web Components. A host keeps its authored HTML, loads the local componen","keywords":["xtend","documentation","xtend classic"]}}}},"source":"docs/en/xtend-classic.md","schedule":"docs.markdown.parse","endpoint":"xtendrmt.docs.parsedown.parse","skeletonLoader":"xtend.loader.skeleton-loader.v1"}