Kalshi Probability Widget

An embeddable React widget for live Kalshi market probabilities.

The project ships as a small React package, a CDN-friendly browser bundle, a Vercel-compatible proxy API, and a public embed builder. It is built for newsletters, crypto blogs, research sites, and dashboards that want a live probability card without rebuilding Kalshi API plumbing.

Live Demo

• Demo and embed builder: https://unrealwandregime.github.io/kalshi-probability-widget/
• Repository: https://github.com/unrealwandregime/kalshi-probability-widget
• npm package: https://www.npmjs.com/package/kalshi-probability-widget

What It Renders

• Yes probability
• Yes/No probability bar
• Optional sparkline
• Optional bid, ask, and volume
• Last updated state
• Link back to the Kalshi market
• Dark and light themes
• Standard and compact layouts

CDN Embed

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kalshi-probability-widget/dist/style.css">
<div id="kalshi-market" style="width:420px;max-width:100%;"></div>

<script src="https://cdn.jsdelivr.net/npm/kalshi-probability-widget/dist/kalshi-widget.embed.js"></script>
<script>
  KalshiWidget.mountKalshiWidget('#kalshi-market', {
    ticker: 'KXBTCMAXY-26DEC31-99999.99',
    proxyUrl: 'https://your-domain.com/api/kalshi',
    theme: 'dark',
    refreshMs: 60000,
    compact: false,
    showSparkline: true,
    showMetrics: true
  });
</script>

React Install

npm install kalshi-probability-widget

import { KalshiProbabilityWidget } from 'kalshi-probability-widget';
import 'kalshi-probability-widget/dist/style.css';

export function MarketEmbed() {
  return (
    <KalshiProbabilityWidget
      ticker="KXBTCMAXY-26DEC31-99999.99"
      proxyUrl="https://your-domain.com/api/kalshi"
      theme="dark"
      refreshMs={60000}
      showSparkline
      showMetrics
    />
  );
}

Props

| Prop | Type | Default | Notes | | --- | --- | --- | --- | | ticker | string | required | Kalshi market ticker | | proxyUrl | string | required | Your proxy endpoint | | title | string | market title | Optional display override | | subtitle | string | market subtitle | Optional display override | | refreshMs | number | 60000 | Client refresh interval, minimum 1000 ms | | fetchTimeoutMs | number | 8000 | Client request timeout | | theme | 'dark' \| 'light' | 'dark' | Card theme | | compact | boolean | false | Sidebar-friendly layout | | showSparkline | boolean | true | Hidden automatically in compact mode | | showMetrics | boolean | true | Shows bid, ask, and volume | | linkLabel | string | View on Kalshi | Outbound link copy | | onData | (data) => void | none | Called after successful fetch | | onError | (error) => void | none | Called after failed fetch |

Proxy API

The widget calls a proxy instead of asking every publisher page to call Kalshi directly.

The included serverless function lives at:

/api/kalshi?ticker=KALSHI_MARKET_TICKER

It normalizes Kalshi market data into:

type KalshiWidgetData = {
  ticker: string;
  title: string;
  subtitle?: string;
  yesProbability: number;
  noProbability?: number;
  yesBid?: number;
  yesAsk?: number;
  lastPrice?: number;
  volume?: number;
  openInterest?: number;
  updatedAt: string;
  kalshiUrl: string;
  sparkline: Array<{
    timestamp: string;
    probability: number;
  }>;
};

The proxy defaults to:

https://external-api.kalshi.com/trade-api/v2

You can override that with KALSHI_API_BASE if needed.

Local Development

npm install
npm run dev

Open:

http://127.0.0.1:5174

The GitHub Pages demo uses bundled sample data so the embed builder remains available even without a live serverless proxy.

Build And Verify

npm run typecheck
npm run build:all
npm run pack:dry

Build outputs:

• dist/kalshi-widget.es.js
• dist/kalshi-widget.umd.cjs
• dist/kalshi-widget.embed.js
• dist/style.css
• TypeScript declarations

Deployment

GitHub Pages serves the static embed builder from .github/workflows/pages.yml.

For live data, deploy the repo to a serverless host that supports /api/kalshi, such as Vercel. The vercel.json file is already included.

Publishing

npm login
npm publish --access public

The package is published on npm. prepublishOnly runs typecheck, production build, and package dry-run before each future release.

Traction Plan

The first milestone is three real publisher installs:

• prediction-market newsletter
• crypto macro blog
• trading or policy research blog

Those installs can then be used as proof of traction for a Kalshi Builder Grant application.

References

• Kalshi API docs: https://docs.kalshi.com
• Kalshi API introduction: https://docs.kalshi.com/getting_started/api_introduction
• Kalshi Builders: https://kalshi.com/builders