---
id: "frontend/netron/index"
title: "Overview"
description: "Browser-side Netron RPC — netron-browser + netron-react."
---

# Netron in the browser

> **Note about server-side Netron:** the server lives inside
> Titan itself at `@omnitron-dev/titan/netron` — including all
> four transports (HTTP / WebSocket / TCP / Unix). You don't
> install a separate package for the server. This section
> covers the **browser-side** clients only.

Two packages cover the browser side of Netron RPC:

| Package                                                         | Role                                                               | Framework                                                                                           |
| --------------------------------------------------------------- | ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------- |
| [`@omnitron-dev/netron-browser`](/docs/frontend/netron/browser) | Transport layer — HTTP, WebSocket, middleware, auth, multi-backend | **Framework-agnostic** — vanilla JS, Vue, Svelte, Solid, Angular, Lit, React, Web Workers, Electron |
| [`@omnitron-dev/netron-react`](/docs/frontend/netron/react)     | React-specific hooks, providers, cache, devtools                   | **React-only**                                                                                      |

For React apps you install both. For non-React apps install
just `netron-browser`:

```bash
# React apps:
pnpm add @omnitron-dev/netron-browser @omnitron-dev/netron-react

# Vue / Svelte / Solid / Angular / Lit / vanilla JS:
pnpm add @omnitron-dev/netron-browser
```

## How they relate

```mermaid
flowchart LR
  App[Your component]
  Hook[netron-react hook<br/>useQuery / useService]
  Cache[QueryCache]
  Client[netron-browser<br/>NetronClient]
  MW[Middleware pipeline]
  Wire[(HTTP / WS)]
  Server[Titan @Service / @Public]

  App --> Hook --> Cache --> Client --> MW --> Wire --> Server
```

**`netron-browser` is the foundation** and works in any
JavaScript environment. **`netron-react` is an optional layer**
that adds React glue: cache, suspense, providers, devtools,
multi-backend hooks. For Vue / Svelte / Solid / Angular / Lit
apps, wrap `netron-browser` calls in your framework's
reactivity primitives directly.

## Deep dives

Topic-focused references:

- [Transports](/docs/frontend/netron/transports) — choosing an HTTP or WebSocket endpoint, React selection and reconnect behaviour
- [Middleware](/docs/frontend/netron/middleware) — three-stage pipeline, built-in middleware, custom middleware
- [Caching](/docs/frontend/netron/caching) — LRU cache, stale-while-revalidate, tag invalidation
- [Auth manager](/docs/frontend/netron/auth) — token rotation, cross-tab sync, inactivity timeout
- [Multi-backend](/docs/frontend/netron/multi-backend) — `MultiBackendProvider`, routing, per-backend hooks
- [Error handling](/docs/frontend/netron/errors) — typed errors, retry classification, circuit breaker
- [Testing](/docs/frontend/netron/testing) — TestNetronProvider, integration patterns
- [SSR](/docs/frontend/netron/ssr) — dehydration / hydration

## Quick start — single backend

```tsx
import { NetronReactClient, NetronProvider, useService }
  from '@omnitron-dev/netron-react';

interface UserService {
  getUser(id: string): Promise<User>;
}

const client = new NetronReactClient({
  url:       'https://api.example.com',
  transport: 'http',
});

function App() {
  return (
    <NetronProvider client={client}>
      <UserCard userId="u_42" />
    </NetronProvider>
  );
}

function UserCard({ userId }: { userId: string }) {
  const users = useService<UserService>('users');
  const { data, isLoading } = users.getUser.useQuery([userId]);
  return isLoading ? <Skeleton /> : <div>{data.email}</div>;
}
```

## Quick start — multi-backend

```tsx
import { createMultiBackendClient }
  from '@omnitron-dev/netron-browser';
import { MultiBackendProvider, useBackendService }
  from '@omnitron-dev/netron-react';

const client = createMultiBackendClient({
  baseUrl: 'https://api.example.com',
  backends: {
    auth:    { path: '/auth',    transport: 'http' },
    media:   { path: '/media',   transport: 'http' },
    streams: { path: '/streams', transport: 'websocket' },
  },
  routing: {
    patterns: [
      { pattern: 'users.',   backend: 'auth' },
      { pattern: 'objects.', backend: 'media' },
      { pattern: 'events.',  backend: 'streams' },
    ],
  },
});

<MultiBackendProvider client={client}>
  <Outlet />
</MultiBackendProvider>

function Component() {
  const users = useBackendService<UserService>('auth', 'users');
  const { data } = users.getUser.useQuery([id]);
}
```

## See also

- [Prism / Netron integration](/docs/frontend/prism#netron-integration--omnitron-devprismnetron) —
  re-export helpers via Prism
- [Titan / Netron](/docs/titan/netron) — server side
- [Architecture](/docs/titan/concepts/architecture) — full
  cross-stack picture