A modern, composable web framework.

Pick an Integration. Create Pages. Add a server if you need it. Start with Ecopages JSX or another Integration, author Pages that render HTML, and add a Cache Strategy, typed handlers and Explicit Routes only when a Page needs more than static HTML.

npx ecopages init ecopages-app

pnpm dlx ecopages init ecopages-app

bunx ecopages init ecopages-app

Read introduction Install Ecopages

import { defineConfig } from '@ecopages/core/config';
import { ecopagesJsxPlugin } from '@ecopages/ecopages-jsx';
import { lightningCssProcessorPlugin } from '@ecopages/lightningcss-processor';
import { tailwindV4Preset } from '@ecopages/lightningcss-processor/presets/tailwind-v4';

export default defineConfig({
  defaultMetadata: {
    title: 'Ecopages',
    description: 'Pick an Integration, then author Pages',
  },
  integrations: [ecopagesJsxPlugin()],
  processors: [
    lightningCssProcessorPlugin(
      tailwindV4Preset({
        referencePath: 'src/styles/app.css',
      }),
    ),
  ],
});

import { eco } from '@ecopages/core';
import { BaseLayout } from '@/layouts/base-layout';
import { CounterCard } from '@/components/counter-card';

export default eco.page({
  layout: BaseLayout,
  metadata: () => ({
    title: 'Welcome to Ecopages',
    description: 'A static Page. Add the rest on demand.',
  }),
  render: () => (
    <section>
      <h1>Hello</h1>
      <p>This Page is static HTML. Add a server if you need it.</p>
      <CounterCard count={5} />
      <a href='/docs/getting-started/introduction'>Read the docs</a>
    </section>
  ),
});

import { eco } from '@ecopages/core';
import { Counter, type CounterProps } from './counter';
import './counter-card.css';

export const CounterCard = eco.component({
  render: ({ count }: CounterProps) => <Counter count={count} />,
});

Start with Ecopages JSX, or choose React, Lit, KitaJS, or MDX when a Page needs a different renderer.

Choose an Integration

Define Pages with eco.page, compose them with a Layout, and declare Dependencies explicitly.

Create Pages

Keep Pages static until you need typed handlers or Explicit Routes.

Add a server

Reach for Radiant, routers, and processors when a Page needs more than HTML.

Browse packages

Suggested path

Build confidence step by step

Pick an Integration. Ecopages JSX is the default.
Create Pages that render HTML.
Compose them with a Layout and Html.
Add Radiant or another Integration only where the UI is interactive.
Add a server with typed handlers and Explicit Routes if you need request-time work.

Pick an Integration

Start with Ecopages JSX, or swap in React, Lit, KitaJS, or MDX.

Create Pages

Author Pages with eco.page and compose them with a Layout.

Add a server if you need it