MarkupKit

Build with HTML again.

The HTML, CSS, and JavaScript you know, with components, routing, and server rendering powered by the next generation of HTML. MarkupKit also provides shared layouts and typed data for your application.

MarkupKit is a Threadlabs product, built on HTML Next, the implementation of the Next Web Working Group's declarative components proposal. Markupress builds documentation on MarkupKit; MarkupKit owns the application platform and Markupress owns the documentation experience.

MarkupKit (@threadlabs/markupkit) builds applications with HTML Next components. It provides routes, layouts, server loaders, endpoints, middleware, browser delivery, and development tools. A build prerenders pages for any static host and writes a request server for pages that render on each request, which markupkit start runs on Node and Deno and Bun run through its fetch. The server-rendering design records how requests are answered.

Use Node 24.15 or later, or Node 22 from 22.22.2. Install @threadlabs/markupkit and add its commands to your package.json scripts:

{
  "scripts": {
    "dev": "markupkit dev",
    "build": "markupkit build",
    "preview": "markupkit preview",
    "start": "markupkit start"
  }
}

Then run pnpm dev, pnpm build, pnpm preview, or pnpm start (npm run dev and the others work too).

Guide: MarkupKit covers pages and routing, loading data, endpoints and middleware, navigation, moving between pages, deployment, and configuration. Its source is website/docs in this repository, built with Markupress. The client-navigation design records how pages swap in place.

Proof applications

From this repository, after building:

node dist/cli.js build examples/basic
node dist/cli.js preview examples/basic
pnpm build:docs-proof
node dist/cli.js preview .context/markupkit-docs-proof

The basic application exercises routes, loaders, state, and component modules without documentation features. The docs proof converts this repository's Markdown guides and generates a component reference, code display, heading anchors, search navigation, a theme, and an interactive example. Its Markdown dependency and theme live in the consumer, outside the platform runtime and published package. Its input is trusted, checked-in author content; it does not sanitize arbitrary Markdown.

MarkupKit is MIT-licensed.

Component and controller import maps can also come from application options or a plugin's config hook. Resolve package resources in the plugin's module scope:

const code = import.meta.resolve("your-doc-tool/controllers/code.js");
const plugin = {
  name: "your-doc-tool",
  config: () => ({ imports: { "your-doc-tool/controllers/code.js": code } })
};

An application's entries take precedence over plugin entries. Prefix mappings end both the key and the URL with /. These entries resolve component resources and their declared modules; regular JavaScript imports use their module's package scope.