A modern, basic 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. Add a Cache Strategy, typed handlers, and Explicit Routes only when a Page needs more than static HTML.

npx ecopages init ecopages-app && cd ecopages-app && npm install && npm run dev

Read introduction Install Ecopages

import path from 'node:path';
import { ConfigBuilder } from '@ecopages/core';
import { ecopagesJsxPlugin } from '@ecopages/ecopages-jsx';
import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
import { tailwindV4Preset } from '@ecopages/postcss-processor/presets/tailwind-v4';

const baseUrl = import.meta.env?.ECOPAGES_BASE_URL ?? 'http://localhost:3000';

const config = await new ConfigBuilder()
  .setRootDir(import.meta.dir)
  .setBaseUrl(baseUrl)
  .setDefaultMetadata({
    title: 'Ecopages',
    description: 'Pick an Integration, then author Pages',
  })
  .setIntegrations([ecopagesJsxPlugin()])
  .setProcessors([
    postcssProcessorPlugin(
      tailwindV4Preset({
        referencePath: path.resolve(import.meta.dir, 'src/styles/app.css'),
      })
    ),
  ])
  .build();

export default config;

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

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>
      <Counter count={5} />
      <a href='/docs/getting-started/introduction'>Read the docs</a>
    </section>
  ),
});

import { eco } from '@ecopages/core';

type CounterProps = {
  count: number;
};

export const Counter = eco.component<CounterProps>({
  dependencies: {
    stylesheets: ['./counter.css'],
    lazy: {
      'on:interaction': 'mouseenter,focusin',
      scripts: ['./counter.script.ts'],
    },
  },
  render: ({ count }) => <my-counter count={count}></my-counter>,
});

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