McFly

McFly is a metaframework
that assists in building on the Web

Why?

I often wonder what it would look like to build sites & apps knowing just the basics.

I thought:

• What if I knew how to write HTML and I can have a dynamic web page from that?
• What if I knew how to build custom elements and that's all the component system I needed?
• What if I can write HTML fragments and assemble them easily in a page?
• What if I did not have to worry about the ever-growing number of ways to have a place on the Web?

McFly is my reimagination of web development: Back to the basics. Into the future.

Project Status

We are currently in a focused rewrite. All parts are subject to breaking changes in minor releases.

• generic plugin system for using server frameworks
• file-based API routing via fastify as server framework
• file-based HTML pages routing
• HTML templating via Eta
• auto-registry of custom elements
• SSR custom elements
• SSG builds

Try it today

Run the following to generate a McFly starter project.

npm create mcfly@latest

Target Features

✅ Use vanilla custom elements (or sugar-coated web components)
✅ Write server-powered .html pages
✅ "Use the Platform™" on both server runtimes & browsers
✅ Use server-side rendering
✅ Deploy anywhere, even the Edge

Special directories

1. ./src/api/

• file-based routing for REST API endpoints
• e.g., ./src/api/users.js can be accessed via http://<domain>/api/users

Packages

The following are the project packages published on the NPM registry:

Package	Description	Version
@mcflyjs/config	Configuration handling for McFly projects
@mcflyjs/core	Commands & runtime handling
@mcflyjs/fastify	Adapter for using fastify as server framework
create-mcfly	Script for scaffolding a new McFly workspace

Project setup

After cloning the project, you will need node and pnpm installed. When you are sure that you have node and pnpm, then run the following to download the dependencies:

corepack enable
pnpm i

The following commands are available to you on this project. Add more, or modify them as needed in your ./package.json file.

Command	Action
pnpm run site	Start the development server for https://mcfly.js.org
pnpm run template:basic	Start the development server for the basic template
pnpm run build	Locally generate the app's build files to ./output
pnpm run preview	Preview the built app locally

More info

This framework was initially a result of an exploration for using Nitro and custom elements using a minimal Web Component Base class.

In 2026, we pivoted to a new target architecture to become more like a "glue" that allows putting together existing options that achieve our goals. We avoid building custom mechanisms when we can. The resulting architecture theoretically allows using different server frameworks, templating libraries, custom element libraries, etc.

---

Just keep building.
A project by Ayo