LensType-safe, real-time API framework

GraphQL-like power with automatic live queries and incremental transfer. No codegen required.

Get Started

View on GitHub

🔄

Automatic Live Queries

Every query is automatically subscribable. Clients can subscribe to any query and receive updates when data changes.

📡

Minimal Diff Updates

Server computes and sends only the changed fields. Automatic transfer optimization with value, delta, and patch strategies.

🎯

Field Selection

GraphQL-like field selection with field-level arguments. Subscribe to specific fields only.

⚡

Optimistic Updates

Instant UI feedback with automatic rollback. Define optimistic behavior declaratively.

🔌

Framework Agnostic

Works with React, Vue, Solid, Svelte, and more. First-class Next.js, Nuxt, and SolidStart support.

🛡️

Full Type Safety

End-to-end TypeScript inference from server to client. No code generation required.

Quick Example

typescript

// Server: Define your API
const appRouter = router({
  user: {
    get: query()
      .input(z.object({ id: z.string() }))
      .resolve(({ input, ctx }) => ctx.db.user.find(input.id)),

    update: mutation()
      .input(z.object({ id: z.string(), name: z.string() }))
      .resolve(({ input, ctx }) => ctx.db.user.update(input)),
  },
})

// Client: One-time fetch
const user = await client.user.get({ id: '123' })

// Client: Subscribe to live updates
client.user.get({ id: '123' }).subscribe((user) => {
  console.log('User updated:', user)  // Called whenever data changes
})

The Lens Approach

Traditional frameworks require separate endpoints for queries and subscriptions. With Lens, every query is automatically a subscription:

Pattern	Traditional	Lens
One-time fetch	`await trpc.getUser({ id })`	`await client.user.get({ id })`
Real-time	Separate subscription endpoint	Same endpoint with `.subscribe()`
Partial updates	Manual implementation	Automatic with field selection