Introducing the powerful new reactive language
designed around live‑updating values.
All the power of streams, without all the callbacks.
import { now } from 'reflex::time';
// Current datetime (sampled every 1000 milliseconds)
const timestamp = now({ interval: 1000 });
const millis = timestamp.getTime(); // Live-updating value
// Output will change automatically once per second
export default `Current UNIX time: ${Math.floor(millis / 1000)}`;
All values are change‑tracked and update automatically, with no need for manual diffing or memoization
Write complex real‑time applications using straightforward synchronous JavaScript source code
Fully loaded with library helpers for serving subscription APIs and integrating streaming data sources
Reflex's update mechanism is divided into four phases, which combine to provide full reactivity at no cost to the developer
import { now } from 'reflex::time';
const timestamp = now({ interval: 1000 });
const millis = timestamp.getTime();
const seconds = Math.floor(millis / 1000);
export default `Current UNIX time: ${seconds}`;
The Reflex compiler parses source code into a tree of sub-expressions, determining which nodes are stateful
The Reflex runtime tracks each sub‑expression's state dependencies, building up an overall dependency tree
Whenever external state changes, the Reflex runtime immediately recomputes any affected values
Existing results are patched with a minimal delta containing just the recomputed values
Reflex's JS dialect is a strict subset of 'the good parts' of ECMAScript, with no proprietary syntax to learn. Any syntax not supported by Reflex will be flagged by the Reflex ESLint rules as you type
No need for async/await or promises – write your code as if everything is synchronous, and Reflex will figure out the optimal non‑blocking parallel execution strategy, even with streams
Use your favourite JS/TS build tools alongside the Reflex TypeScript definitions for the full experience
import { hash } from 'reflex::core';
import { fetch, Request } from 'reflex::http';
import { now } from 'reflex::time';
const response = fetch(new Request({
method: 'GET',
url: 'https://worldtimeapi.org/api/timezone/Etc/UTC',
headers: {},
body: null,
// Automatically re-fetches every 1000ms when the token changes
token: hash(now({ interval: 1000 })),
}));
// Output will change whenever the fetch returns a different payload
export default `Current UNIX time: ${response.json().unixtime}`;
import CurrencyService from './services/graphql/currency.graphql';
import { StocksService } from './services/grpc/stocks.proto.bin';
const currencyApi = new CurrencyService({
url: process.env.CURRENCY_API_URL
});
const stocksApi = new StocksService({
url: process.env.STOCKS_API_URL
});
const getLiveStockPrice = (ticker) => {
const { price } = stocksApi.StreamLiveStockPrice(
{ ticker }, { token: null }
);
return price;
};
const getLiveExchangeRate = (from, to) => {
const { exchangeRate } = currencyApi.execute({
query: `
subscription LiveExchangeRate($from: ID!, $to: ID!) {
exchangeRate(from: $from, to: $to)
}
`,
variables: { from, to },
token: null,
});
return exchangeRate;
};
const getLocaleStockPrice = (ticker, currency) => {
const price = getLiveStockPrice(ticker);
const exchangeRate = getLiveExchangeRate('USD', currency);
// Perform computations on live-updating values using plain JS
return price * exchangeRate;
};
// Output will change whenever the price or exchange rate changes
export default `Price in GBP: ${getLocaleStockPrice('ACME', 'GBP')}`;
Data adapters for HTTP, GraphQL and gRPC services, with first‑class support for streaming endpoints and built‑in helpers for polling and retrying
Write simple JavaScript code to perform complex dynamic streaming joins on deeply nested relational data
Avoid the n+1 problem by using the Reflex DataLoader helper to batch entities into the minimal number of external requests
Reflex Server exposes a Web Socket based GraphQL subscription server for transparent transport of streaming values
Expose arbitrarily deeply nested GraphQL subscription graph roots that live‑update with no extra developer effort
Reflex Server can automatically diff results of live GraphQL subscriptions, ensuring only minimal patch payloads are sent to the consumer when values change
import { Resolver } from 'reflex::graphql';
import { now } from 'reflex::time';
const resolvers = {
Query: {
greet: ({ user }) => `Hello, ${user || 'world'}`,
timestamp: () => {
const timestamp = now({ interval: 1000 });
const millis = timestamp.getTime();
return Math.floor(millis / 1000);
},
},
};
// Export GraphQL server root
export default new Resolver({
query: resolvers.Query,
mutation: null,
subscription: resolvers.Query, // Serve live queries over WebSocket
});
Reflex Server exposes its GraphQL API over both streaming Web Socket and traditional request/response HTTP protocols, allowing consumers to choose their preferred transport method
Reflex Server has built‑in support for OpenTelemetry tracing, Prometheus/Grafana metrics, and structured JSON logging, plus full session capture for replaying hard-to-reproduce errors
Reflex's pure functions, immutable data structures and algebraic effects system allow for deterministic recording, replaying and mocking of side‑effects, plus bulletproof test suites
The Reflex compiler parses source code into a generic internal representation based on the lambda calculus, allowing for future seamless interop between modules written in different languages
The Reflex compiler transforms user code into optimized WASM bytecode modules for fast, portable runtime execution
Reflex benefits from the Rust language ecosystem for improved robustness, reliability and runtime performance
Experience the next evolution of programming languages