Market Heatmap Widget Generator

A color-coded grid of 12 major pairs, hotter = bigger move

Widget Settings

Theme & Layout

Theme

Columns

Colors

Background

Tile Base

Text

Border

Positive

Negative

Live Preview

Market Heatmap

EURUSD —

GBPUSD —

USDJPY —

USDCHF —

USDCAD —

AUDUSD —

NZDUSD —

EURGBP —

EURJPY —

GBPJPY —

XAUUSD —

XAGUSD —

Live % change · Powered by ForexAPI

Embed Code

<!--Market Heatmap Web Component-->
<market-heatmap
    backgroundColor="#171717"
    tileColor="#1f2937"
    textColor="#ffffff"
    upColor="#10b981"
    downColor="#ef4444"
    borderColor="#383533"
    borderRadius="0.75rem"
    columns="3"
></market-heatmap>
<!--JavaScript is required to load the widget-->
<script src="http://sveltekit-prerender/web-components/umd/market-heatmap.js" async></script>

How to Use

Customize

Pick your palette and grid density

Copy & Embed

Paste the generated HTML where the heatmap should appear

The Market Heatmap tiles 12 major and cross pairs (EURUSD, GBPUSD, USDJPY, EURGBP, GBPJPY and more) and colors each tile by the strength of its live % change — a one-glance market mood board. Ideal for homepages and market summary sections.