Integrations Overview

Ecopages JSX is the default Integration: .tsx Pages, optional Radiant, and JSX-backed MDX. Register another Integration when a route should use that runtime.

Comparison Table

Choosing an Integration

Ecopages JSX (default)

Register ecopagesJsxPlugin() when:

• Pages are standard .tsx files owned by Ecopages.
• You want optional Radiant SSR and hydration.
• The same Integration should own JSX-backed MDX.

KitaJS

Register kitajsPlugin() when Pages are .kita.tsx and should compile with @kitajs/html.

React

Register reactPlugin() when:

• The app is a dashboard or highly interactive UI.
• You need the React ecosystem.
• React should own Pages or islands in a mixed-renderer app.

Lit

Register the Lit Integration when:

• Components should be standard Web Components.
• UI must stay portable across hosts.
• You want declarative templates on native custom elements.

MDX

Register MDX (on the owning JSX runtime) when:

• The page is primarily Markdown.
• Articles should embed interactive components.

Mixing Integrations

You can combine Integrations in eco.config.ts. Keep Ecopages JSX for .tsx Pages, use MDX for long-form content, and add React or Lit on routes that need those runtimes.

Hydratable components across integrations share the Island Hosts contract so devtools can discover them without integration-specific selectors.

Build an Integration

To understand the smallest renderer boundary, follow Authoring an Integration. The guide builds a dependency-free string renderer and explains when production applications should choose Ecopages JSX instead.