---
title: Web Content
url: "https://native-sdk.dev/docs/frontend"
docs_index: /llms.txt
lastUpdated: 2026-10-16
---

> For an index of all documentation, see [/llms.txt](/llms.txt).

Use a WebView to embed a browser, website preview, or documentation viewer in a native app. The [browser example](https://github.com/vercel-labs/native/tree/main/examples/browser) is a complete working browser; the [web engines](/docs/web-engines) page covers choosing between the platform WebView and bundled Chromium.

The same machinery also carries an entire existing web frontend — a React, Vue, Svelte, or Next.js codebase running in a WebView inside the native shell. Use this path to bring an existing frontend into a desktop app. The default scaffold uses [Native markup](/docs/native-ui). Scaffold one with `native init my_app --frontend <next|vite|react|svelte|vue>`.

For frontends with a build step, the Native SDK provides helpers to switch between a dev server during development and bundled assets in production.

## Dynamic source function

Use `source_fn` on your `App` so development uses a localhost server and production uses bundled assets:

```zig
fn source(context: *anyopaque) anyerror!native_sdk.WebViewSource {
    const self: *App = @ptrCast(@alignCast(context));
    return native_sdk.frontend.sourceFromEnv(self.env_map, .{
        .dist = "dist",
        .entry = "index.html",
    });
}
```

`sourceFromEnv` checks `NATIVE_SDK_FRONTEND_URL`. If set, it returns a URL source; otherwise it returns an assets source from `config.dist`.

## frontend.Config

<table>
  <thead>
    <tr>
      <th>
        Field
      </th>

      <th>
        Default
      </th>

      <th>
        Description
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>
        `dist`
      </td>

      <td>
        `"dist"`
      </td>

      <td>
        Path to the built frontend output
      </td>
    </tr>

    <tr>
      <td>
        `entry`
      </td>

      <td>
        `"index.html"`
      </td>

      <td>
        HTML entry point within dist
      </td>
    </tr>

    <tr>
      <td>
        `origin`
      </td>

      <td>
        `"zero://app"`
      </td>

      <td>
        Origin for asset URLs
      </td>
    </tr>

    <tr>
      <td>
        `spa_fallback`
      </td>

      <td>
        `true`
      </td>

      <td>
        Serve entry for unknown routes
      </td>
    </tr>

    <tr>
      <td>
        `dev_url_env`
      </td>

      <td>
        `"NATIVE_SDK_FRONTEND_URL"`
      </td>

      <td>
        Environment variable checked by

        `sourceFromEnv`
      </td>
    </tr>
  </tbody>
</table>

## Configure in app.zon

```zig
.frontend = .{
    .dist = "dist",
    .entry = "index.html",
    .spa_fallback = true,
    .dev = .{
        .url = "http://127.0.0.1:5173/",
        .command = .{ "npm", "run", "dev", "--", "--host", "127.0.0.1" },
        .ready_path = "/",
        .timeout_ms = 30000,
    },
}
```

## Dev server

Use `native dev` to let the Native SDK manage the frontend server lifecycle:

```bash
native dev --binary zig-out/bin/MyApp
native dev --binary zig-out/bin/MyApp --url http://127.0.0.1:3000/ --command "npm run dev"
```

The command starts the frontend process, waits for the port to accept connections, launches the native shell with `NATIVE_SDK_FRONTEND_URL`, and terminates the frontend when the shell exits. See [Dev Server](/docs/cli/dev) for all flags.

## Framework recipes

**Vite**: `.url = "http://127.0.0.1:5173/"`, command `npm run dev -- --host 127.0.0.1`.

**Next.js**: `.url = "http://127.0.0.1:3000/"`, command `npm run dev -- --hostname 127.0.0.1`.

**Static preview**: point `.dist` at the build output and use any local server command.

## Examples

The repository includes complete frontend examples:

- `examples/next` - Next.js app with `frontend/out` production assets.
- `examples/react` - React app built with Vite.
- `examples/svelte` - Svelte app built with Vite.
- `examples/vue` - Vue app built with Vite.

Each example can be run from its directory with `zig build run`, or with `zig build dev` for the managed frontend dev server flow.

## Production source

For packaged builds that always use local assets:

```zig
return native_sdk.frontend.productionSource(.{ .dist = "dist", .entry = "index.html" });
```

## NATIVE\_SDK\_FRONTEND\_ASSETS

`NATIVE_SDK_FRONTEND_ASSETS` is an app-defined convention (not read by the `frontend` module). Examples use it to signal that pre-built assets should be loaded via `productionSource` instead of the default dev/prod branching.

---

For a semantic overview of all documentation, see [/sitemap.md](/sitemap.md)

For an index of all available documentation, see [/llms.txt](/llms.txt)

For agent-facing discovery, including API and MCP surfaces, see [/agents.md](/agents.md)