API

useShape

Live rows of a shape, rendered on the server.

<script setup lang="ts">
const { data, isLive, error } = await useShape<Todo>('/api/shapes/todos')
</script>

Auto-imported by the module.

Parameters

	Type
`path`	`string`	A route that serves a shape with `proxyShape`.
`options.key`	`string`	Payload key, defaults to the path.
`options.live`	`boolean`	Keep the rows live on the client. Default `true`.

	Type
`data`	`ShallowRef<T[]>`	Current rows, in no particular order. Sort with `computed`.
`isLive`	`Ref<boolean>`	`true` once the client stream is up to date.
`error`	`Ref<unknown>`	Loading or streaming error.

Server: loads the shape snapshot through the route in-process (cookies and authorization are forwarded) and stores rows, offset and shape handle in the payload.
Client: starts an Electric ShapeStream from the stored offset on mount and applies inserts, updates (merged into the existing row) and deletes. A must-refetch from Electric clears the rows and reloads.
On client-side navigation without SSR, the snapshot is loaded in the browser first.

proxyShape

Serve an Electric shape from a route.

Architecture

The three services behind wervt and how apps are isolated.