Put frontend in control. Stop consuming APIs. Start negotiating contracts.
npm install @reactive-contracts/coreToday's frontend is a second-class citizen. We consume whatever the backend decides to expose, deal with overfetching and underfetching, and pray that API changes don't break production.
Reactive Contracts inverts this relationship. The frontend declares exactly what it needs, how it needs it, and the compiler ensures both sides honor the agreement—at build time, not runtime.
Catch errors before they reach production. Reactive Contracts provides end-to-end type safety from contract definition to runtime execution.
// Traditional API - No type safety
const data = await fetch('/api/users/123')
.then(r => r.json());
// What fields exist? What's the shape?
// Typos caught only at runtime
console.log(data.usrename); // Runtime error!// With Reactive Contracts - Full type safety
const { data } = useContract('getUser', { id: '123' });
// TypeScript knows exact shape
// Autocomplete, refactoring, errors at build time
console.log(data.username); // Type-safe!
// ^^^^^^^^ Autocomplete works!// Contract changes caught at BUILD TIME
export const getUser = contract({
name: 'getUser',
input: { id: z.string() },
output: { username: z.string() }, // Changed from "name"
});
// Backend forgot to update:
implementContract(getUser, async ({ id }) => {
return { name: 'John' }; // Type error!
// ^^^^ Property 'username' is missing
});IDEs provide full autocomplete for contract inputs, outputs, and constraints.
Rename fields with confidence. TypeScript ensures all usages are updated.
Contract mismatches caught at compile time, not in production logs.
Build-time validation, zero runtime overhead
Frontend declares needs, backend provides capabilities. Compiler validates compatibility.
API mismatches fail compilation, not production. Catch errors before deployment.
Declare acceptable latency with automatic fallback strategies for degraded performance.
Compute values at the optimal layer—client, edge, or origin—automatically.
Specify which fields need real-time updates vs. static fetching with precision.
Contracts compile away. No reflection, no runtime negotiation, just pure performance.
Define your contract in minutes
import { contract, derive, max } from '@reactive-contracts/core';
export const UserProfileContract = contract({
name: 'UserProfile',
intent: 'Display user profile with activity summary',
shape: {
user: {
id: 'string',
name: 'string',
avatar: 'URL',
joinedAt: 'Date',
},
activity: {
postsCount: 'number',
lastActive: 'Date',
status: derive(ctx =>
ctx.lastActive > daysAgo(7) ? 'active' : 'inactive'
),
},
},
constraints: {
latency: max('100ms', { fallback: 'cachedVersion' }),
},
reactivity: {
realtime: ['activity.status'],
static: ['user.name', 'user.avatar'],
polling: [{ field: 'activity.postsCount', interval: '30s' }],
},
}); import { useContract } from '@reactive-contracts/react';
import { UserProfileContract } from '../contracts/user-profile.contract';
export function UserProfile({ userId }: { userId: string }) {
const { data, loading, contractStatus } = useContract(UserProfileContract, {
params: { userId },
});
if (contractStatus.latency === 'degraded') {
return {data.user.name}
Get started in seconds
npm install @reactive-contracts/core @reactive-contracts/compilernpx rcontracts initThis creates contracts/, rcontracts.config.ts, and generated/ directories.
npx rcontracts compileValidates contracts and generates types, resolvers, and negotiators.
Ready-to-run examples for different frameworks. Each includes contracts, generated code, and a working server.
Simple setup with React + Express server. Perfect for learning the fundamentals.
App Router with Client Components. Full-stack TypeScript with server actions.
Fast development with HMR and auto-compile plugin. Instant feedback loop.
Server-rendered with React islands. Perfect for content-heavy sites.
A complete toolkit for bidirectional API contracts. Install only what you need, from core types to build-time validation.
Core types and contract definitions. Zero dependencies, framework-agnostic foundation.
npm install @reactive-contracts/coreReact hooks for consuming contracts. Includes useContract, useContractSuspense, and useContractMutation.
npm install @reactive-contracts/reactBackend utilities for implementing contracts. Type-safe resolver functions with full validation.
npm install @reactive-contracts/serverCLI tool and build-time validation. Ensures both frontend and backend honor the contract agreement.
npm install -D @reactive-contracts/compilerGraphQL exposes a schema that frontend queries. Reactive Contracts inverts this: frontend declares requirements, backend proves it can satisfy them.
tRPC shares types but doesn't validate constraints (latency, freshness) or support declarative reactivity at build time.
OpenAPI documents what exists. Reactive Contracts enforce what's required—and fail builds when requirements can't be met.
Most tools validate at runtime when errors are expensive. Reactive Contracts validates at build time when errors are free.
Common questions about Reactive Contracts and how it compares to other solutions.
Have more questions? Open an issue on GitHub