Set up with your coding agent

Claude Code

Terminal

claude plugin marketplace add reactive/data-client --scope project \
  --sparse .claude-plugin .agents/skills
claude plugin install data-client@data-client --scope project

Run in your terminal

Copy prompt for Claude Code

Cursor

Copy prompt for Cursor

Then, in a new chat:

Copy prompt for Cursor

Codex

Terminal

codex plugin marketplace add reactive/data-client \
  --sparse .claude-plugin --sparse .agents/skills
codex plugin add data-client@data-client

Run in your terminal

Copy prompt for Codex

Other agents

Copy prompt for your coding agent

Whichever you use, your agent runs Data Client's setup skill, which installs the packages, wires up the provider and links the skills the packages ship, so your agent knows the current APIs, like real-time managers and test fixtures. That's the whole setup, so you can go straight to Define Data.

Set up by hand

These steps are the same setup without an agent. If your agent ran the setup, skip them: it already did every one.

Install packages

NPM

npm install --save @data-client/react @data-client/test @data-client/rest

Run in your terminal

Yarn

yarn add @data-client/react @data-client/test @data-client/rest

Run in your terminal

pnpm

pnpm add @data-client/react @data-client/test @data-client/rest

Run in your terminal

esm.sh

<script type="importmap">
{
  "imports": {
    "@data-client/react": "https://esm.sh/@data-client/react",
    "@data-client/test": "https://esm.sh/@data-client/test",
    "@data-client/rest": "https://esm.sh/@data-client/rest"
  }
}
</script>

Add provider at top-level component

Web

index.tsx

import { DataProvider } from '@data-client/react';
import { createRoot } from 'react-dom/client';
import App from './App';

createRoot(document.body).render(
  <DataProvider>
    <App />
  </DataProvider>,
);

Alternatively integrate state with redux

React Native

index.tsx

import { DataProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';
import App from './App';

const Root = () => (
  <DataProvider>
    <App />
  </DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);

Alternatively integrate state with redux

NextJS

Full NextJS Guide

app/layout.tsx

import { DataProvider } from '@data-client/react/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <DataProvider>{children}</DataProvider>
      </body>
    </html>
  );
}

Expo

app/_layout.tsx

import { Stack } from 'expo-router';
import { DataProvider } from '@data-client/react';

export default function RootLayout() {
  return (
    <DataProvider>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </DataProvider>
  );
}

Anansi

Anansi (beta) is a fully composable framework for React development with optional Server Side Rendering.

npx @anansi/cli hatch my-project

Run in your terminal

Anansi includes Reactive Data Client automatically.

Link your agent's skills

The packages ship skills for your coding agent, matched to the version you installed. Link them so Claude Code, Cursor and Codex load them, and commit the links:

npx --no data-client-skills

Run in your terminal

Run it again after adding, removing or upgrading @data-client packages. See Agent Skills for details.

Next: Define Data »

Example

Explore the todo-app example

Open in StackBlitzView source

Loading demo…

More Demos

Supported Tools

TypeScript 4.0+

TypeScript is optional, but requires at least version 4.0 and strictNullChecks for full type enforcement.

Older browser support

If your application targets older browsers (a few years or more), be sure to load polyfills. Typically this is done with @babel/preset-env useBuiltIns: 'entry', coupled with importing core-js at the entrypoint of your application.

This ensures only the needed polyfills for your browser support targets are included in your application bundle.

For instance TypeError: Object.hasOwn is not a function

Internet Explorer support

If you see Uncaught TypeError: Class constructor Resource cannot be invoked without 'new', follow the instructions to add legacy browser support to packages

ReactJS 16-19 and React Native

ReactJS 16.2 and above is supported (the one with hooks!). React 18 provides improved Suspense support and features. Both React Native, React Navigation and Expo are supported.

If you have a working project using other React libraries, feel free to share with others in our discussions.