Maho

A framework for building server-rendered or static websites, powered by React and esbuild.

This framework is not production-ready yet, since esbuild itself is not mature enough, (but evanw is working on that).

Each rebuild is a full bundle (both server-side and client-side) yet takes only <100ms.

Differences to Vite / Snowpack

They all use esbuild too but:

• Maho can also do server-side rendering
• Maho uses esbuild for the whole bundle process instead of only using it to compile TypeScript, FYI they use Rollup in production build which is still much slower than esbuild.
• Maho is a React framework, Vue integration will be done in another framework: Ream, and the progress totally depends on my funding status.

Install

yarn add maho

Usage

This basic usage is very similar to Next.js.

You can create new project with create-maho-app.

# For npm
npx create-maho-app my-app

# For yarn
yarn create maho-app my-app

# For pnpm
pnpx create-maho-app my-app

Roadmap

Nested routes and dynamic routes

Work in Progress.

Server-side data fetching

Work in Progress.

export const load = async () => {
  const posts = await getPosts()
  return {
    posts
  }
}

export default () => {
  const { posts } = useData()

  return <div>
    {posts.map(post => <div key={post.id}>{post.title}</div>)}
  </div>
}

Code splitting

🚧 upstream: esbuild: only work with esm format

CSS support

🚧 upstream: esbuild

Though directly importing CSS in your JavaScript / TypeScript code is not yet supported, you can use CSS-in-JS solutions like emotion without any configuration, alternatively you can have CSS files in ./public folder and reference them using <link> tag in your components.

Hot reloading

Currently it supports live reload.

License

MIT © EGOIST (Kevin Titor)