Add Time Series Forecasting to Your Web App in JavaScript
A WebAssembly forecasting engine with React, Vue and Angular components, run in the browser
By Vincenzo Manto, founder of Datastripes · Published 19 October 2026 · Updated 19 October 2026Sooner or later a user of your product asks what next quarter will look like. You already have the history: orders, signups, usage, revenue. Turning that history into a projection is the part that stalls, because the usual routes are a Python service that someone has to deploy and keep alive, or a spreadsheet export that sends the data out of your app.@datastripes/forecast takes a third route. It is an npm package with a WebAssembly forecasting engine and ready-made components for React, Vue and Angular, so the projection is computed in your user's browser from data your front end already holds. This page walks through what the package contains, how to wire it in, and where it stops being the right tool.
What the package contains
Everything ships as one npm package. The root entry, @datastripes/forecast, holds the forecasting engine, column auto-discovery, the licensing client and the TypeScript types, with no dependency on a UI framework. Each framework has its own subpath inside the same package: /react, /vue and /angular, plus /elements, which registers a <datastripes-forecast-studio> custom element for any other stack.React, Vue and Angular are optional peer dependencies. Installing the package never pulls one in, so you install the one your app already uses.npm install @datastripes/forecastA forecast in a few lines
The core function needs no UI. You give it rows with a date and a value, pick an algorithm and a horizon, and it returns the forecast points together with fit metrics and the license status.import { executeForecast } from '@datastripes/forecast';
const result = await executeForecast({
data: [{ date: '2024-01-01', value: 120 }, /* ... */],
algorithm: 'prophet_lite',
horizon: 30,
});
console.log(result.points, result.metrics, result.licenseStatus);Choosing an algorithm
Nine algorithms are available: ols, polynomial, ridge, lasso, holt_winters_add, holt_winters_mul, arima, prophet_lite and ensemble. A few rules of thumb cover most cases.- ols and polynomial fit a straight line or a curve through the history. They suit a series with a clear trend and little seasonality.
- ridge and lasso are regularised regressions, useful when a plain fit starts chasing noise.
- holt_winters_add and holt_winters_mul model level, trend and seasonality. Use the additive version when seasonal swings stay about the same size, and the multiplicative one when they grow with the level of the series, as retail sales often do.
- arima models a series from its own past values and past errors.
- prophet_lite is the algorithm the documentation uses in its minimal example, and a sensible first try.
- ensemble is for the day you do not want to choose.
Dropping it into a React app
In React the same engine sits behind a component. Pass records, CSV text or a JSON array as data, then set the algorithm, the horizon and the confidence level.import { DatastripesForecast } from '@datastripes/forecast/react';
export function RevenueForecast({ rows }) {
return (
<DatastripesForecast
data={rows}
algorithm="holt_winters_mul"
horizon={12}
confidenceLevel={90}
theme="light"
height={480}
onForecastComplete={(result) => console.log(result.metrics)}
/>
);
}