Integrations Overview

Ecopages is framework-agnostic. You can use one or multiple rendering integrations together in the same project. Each integration brings its own strengths to the table.

Comparison Table

Choosing an Integration

Use Ecopages JSX if...

• You want standard .tsx routes owned directly by Ecopages.
• You want optional Radiant SSR and hydration for web components.
• You want one integration to own both JSX routes and JSX-backed MDX routes.

Use KitaJS if...

• You want the best possible performance for static pages.
• You like JSX syntax but want an HTML-first renderer to own .kita.tsx shells.
• You are building a content-heavy site (docs, blogs, marketing).

Use React if...

• You are building a complex dashboard or interactive app.
• You want to leverage the massive React ecosystem and libraries.
• You want React-managed pages or component islands inside a mixed-renderer app.

Use Lit if...

• You want to build standard-compliant Web Components.
• You want your components to be portable across different projects.
• You prefer a more "native" browser feel with declarative templates.

Use MDX if...

• Your primary focus is content (Markdown).
• You want to embed interactive components directly into your articles.

Mixing Integrations

You can combine multiple integrations in your eco.config.ts. This allows you to use MDX for your blog, KitaJS for your landing page, and React for a specific interactive checkout component.

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.