# Native Fragments Full Context

Native Fragments builds fast, explicit HTML applications on Cloudflare Workers.
Core owns server routing, fragments, streaming, actions, APIs, and browser
navigation. `@nativefragments/lit` owns Lit SSR and hydration integration.

## Create an app

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

The dev command runs esbuild and `wrangler dev --live-reload`. Source stays
standards-based ESM; there is no framework compiler.

## Imports

```js
import { html, fragment, route } from "@nativefragments/core/server";
import { createCloudflareHandler } from "@nativefragments/core/cloudflare";
import { startRouter } from "@nativefragments/core/client/router.js";
import { createWorkerClient } from "@nativefragments/core/client/worker.js";
import { renderLit } from "@nativefragments/lit/server";
import "@nativefragments/lit/client";
```

## Browser navigation

```js
const router = startRouter({ prefetch: "intent" });
await router.navigate("/reports");
await router.prefetch("/settings");
router.invalidate("/reports");
```

## Deferred streaming

```js
const panel = fragment("related", {
  loading: () => html`<p>Loading…</p>`,
  error: () => html`<p role="status">Unavailable.</p>`,
  render: async ({ signal }) => html`…`,
});

route("/", {
  render: (context) => html`${context.defer(panel)}`,
  fragments: [panel],
});
```

Document and fragment navigation both stream deferred HTML. Router requests
negotiate protocol version 1; unsupported clients receive buffered HTML.

## Lit SSR

```js
import { renderLit } from "@nativefragments/lit/server";
import { html } from "lit";
import "../../client/components/app-card.js";

export const card = () => renderLit(html`<app-card>Ready</app-card>`);
```

The adapter pins the evolving `@lit-labs/ssr` contract. Application components
are ordinary Lit elements and do not import Lit Labs directly.

## App structure

```txt
worker.js
site/routes.js
site/shell.js
site/pages/
client/index.js
client/components/
public/app/
scripts/build-app.mjs
wrangler.jsonc
```

## Documentation

- https://docs.nativefragments.org/index.md
- https://docs.nativefragments.org/getting-started.md
- https://docs.nativefragments.org/routing.md
- https://docs.nativefragments.org/shell.md
- https://docs.nativefragments.org/fragments.md
- https://docs.nativefragments.org/streaming.md
- https://docs.nativefragments.org/components.md
- https://docs.nativefragments.org/api-routes.md
- https://docs.nativefragments.org/workers.md
- https://docs.nativefragments.org/agent-friendly.md
- https://docs.nativefragments.org/reference.md
- https://docs.nativefragments.org/ai.md

## Agent skill

```txt
node_modules/@nativefragments/core/skills/nativefragments/SKILL.md
```