Native Fragments

The tiny web framework built for coding agents.

Native Fragments helps agents create fast, maintainable web apps without a compile pipeline. The app stays readable at runtime: server HTML, real links, browser ES modules, Custom Elements, Shadow DOM, and Cloudflare Workers.

Start building API reference
Zero dependencies Zero build Blazing fast Built for agents AI-friendly apps Free to deploy

The bet

Use the Web Platform as the framework.

Most frontend stacks hide the thing agents need to reason about: the actual HTML, links, styles, and behavior. Native Fragments keeps those surfaces explicit, so generated apps are easy to read, debug, click, scrape, and extend.

The framework adds the small contracts an app needs: route manifests, escaped HTML templates, fragment responses, metadata updates, and Shadow DOM helpers. Everything else is ordinary browser code.

No build step

Create an app, then run the Worker.

The default development loop has no bundler. The scaffold ships browser modules directly and runs on Wrangler, so agents do not have to edit a build graph before they can make a visible change. 

npm create @nativefragments/app@latest my-app
cd my-app
npm run dev

HTML first

Routes are files agents can understand.

A route is a path, metadata, and a render function. Normal requests return the full document. Fragment requests return only the page body and the metadata the browser needs to update the head. 

import { html, route } from "@nativefragments/core/server";

export const routes = [
  route("/", {
    meta: () => ({
      title: "Dashboard",
      description: "A fast HTML-first dashboard.",
      canonical: "https://example.com/",
    }),
    render: () => html`
      <h1>Revenue</h1>
      <metric-card value="$42k"></metric-card>
    `,
  }),
];

Native islands

Interactive pieces are Custom Elements.

Components use Shadow DOM for scoped CSS, but still expose normal DOM that browsers and agents know how to inspect. Shared theme values can stay in CSS custom properties. 

import { shadow, sheet } from "/nativefragments/component.js";

const styles = sheet(`
  button {
    border: 1px solid currentColor;
  }
`);

class ThemeSwitch extends HTMLElement {
  connectedCallback() {
    shadow(this, {
      styles: [styles],
      html: `<button type="button">Switch theme</button>`,
    });
  }
}

customElements.define("theme-switch", ThemeSwitch);

AI-friendly output

Better for agents to build. Better for agents to browse.

Native Fragments is not just a framework agents can use. It produces apps that are easier for agents to operate: real anchors, server-rendered content, small modules, readable source, and minimal framework magic.

  • Route manifests expose the app map.
  • Fragment navigation keeps links crawlable.
  • Shadow DOM keeps component styling local.
  • Generated docs and skills live inside the package.

Start small

Install the scaffold and inspect every line.

Get started View GitHub