Embeddable real-time market data widgets by Vunelix. Add live crypto prices, forex rates, stock tickers, screeners, heatmaps, technical analysis, and currency converters to your website with a single script tag.

Vunelix is a financial data platform that provides 20+ embeddable market data widgets for websites and blogs. Built with Web Components and Shadow DOM, these widgets cover crypto, forex, stocks, ETFs, DEX, and CEX markets — all from one platform.

If you've used widgets from TradingView, CoinMarketCap, or CoinGecko, Vunelix offers a Web Component-based approach with deeper customization — custom colors, themes, column presets, and multi-language support without iframe limitations.

• Free — Free to use on any website
• Real-time — Live prices via WebSocket, not delayed or cached data
• 20+ Widgets — Tickers, screeners, heatmaps, market movers, technical analysis, currency tools
• Auto Theme — Detects light/dark mode and adapts automatically
• Fully Customizable — Colors, languages, columns, animations, and more
• Shadow DOM — Isolated from your page CSS, zero style conflicts
• Responsive — Desktop, tablet, and mobile ready
• Lightweight — Each widget JS loads async
• No Dependencies — Pure web components, works with React, Vue, Angular, or static HTML

Step 1 — Add the widget tag to your page:

<vunelix-ticker-tape></vunelix-ticker-tape>
<script src="https://vunelix.com/assets/bundles/js/widgets/ticker/vunelix-ticker-tape.js" type="module"></script>

Step 2 — Customize with data-* attributes:

<vunelix-ticker-tape
    data-symbols="BINANCE:BTCUSDT,BINANCE:ETHUSD,NASDAQ:TSLA"
    data-speed="35"
    data-ui-template="ticker-block"
    data-animation-mode="digits"
    data-lang="en">
</vunelix-ticker-tape>

Step 3 — Sign up at developers.vunelix.com/signup, add your domain and verify it.

Step 4 — Done. Your widgets are now live.

Visit vunelix.com/widgets for the full interactive widget configurator where you can customize settings and copy the embed code.

# Clone the repo
git clone https://github.com/vunelix/free-market-data-widgets.git

# Or download via npx (no install needed)
npx degit vunelix/free-market-data-widgets my-widgets

# Or download ZIP
curl -L https://github.com/vunelix/free-market-data-widgets/archive/refs/heads/main.zip -o widgets.zip

Widgets are loaded via a single <script> tag — no npm install, no build step, no bundler config. The script registers the web component and renders the widget automatically.

Scripts are served from vunelix.com CDN. Updates are backwards-compatible — existing data-* attributes will continue to work.

Scrolling and static real-time price tickers for crypto, forex, and stocks.

<vunelix-ticker-tape
    data-symbols="BINANCE:BTCUSDT,NASDAQ:AAPL,FX:EURUSD"
    data-speed="35"
    data-animation-mode="digits">
</vunelix-ticker-tape>
<script src="https://vunelix.com/assets/bundles/js/widgets/ticker/vunelix-ticker-tape.js" type="module"></script>

Embed a search bar that lets visitors instantly find stocks, forex pairs, crypto coins, indices, and ETFs — with optional filters, custom link URLs, and a developer mode that returns symbol data directly to your code.

<!-- Step 1: Add a trigger button (your own element) -->
<button id="mySearchBtn">Search Symbols</button>

<!-- Step 2: Add the widget pointing to your trigger -->
<vunelix-symbol-search
    data-trigger="#mySearchBtn"
    data-placeholder="Search symbols..."
    data-filter-type="crypto"
    data-enable-storage="true">
</vunelix-symbol-search>
<script src="https://vunelix.com/assets/bundles/js/widgets/vunelix-symbol-search.js" type="module"></script>

Key options:

Developer mode — get selected symbol data in your JavaScript:

document.addEventListener('vunelix-symbol-select', function(e) {
    var data = e.detail;
    console.log(data.ticker);    // "BINANCE:BTCUSDT"
    console.log(data.symbol);    // "BTCUSDT"
    console.log(data.name);      // "Bitcoin / TetherUS"
    console.log(data.exchange);  // "BINANCE"
    console.log(data.type);      // "crypto"
    console.log(data.logo);      // "https://vunelix.com/assets/icons/crypto/BTC.svg"
});

Top gainers and losers across crypto, forex, and stock markets — updated in real-time.

<vunelix-crypto-market-movers
    data-sort-by="active.chp_desc"
    data-per-page="12"
    data-change-badge="true">
</vunelix-crypto-market-movers>
<script src="https://vunelix.com/assets/bundles/js/widgets/market-movers/vunelix-crypto-market-movers.js" type="module"></script>

Currency converter and cross rates table with live exchange rates — 150+ currencies supported.

<vunelix-currency-converter
    data-from="USD"
    data-to="EUR"
    data-show-chart="true">
</vunelix-currency-converter>
<script src="https://vunelix.com/assets/bundles/js/widgets/vunelix-currency-converter.js" type="module"></script>

Visual heatmaps showing market performance at a glance — crypto market cap, stock sectors, and forex currencies.

<vunelix-crypto-heatmap
    data-default-per-page="100"
    data-default-color-mode="gradient"
    data-default-border-radius="true"
    data-enable-zoom-controls="true">
</vunelix-crypto-heatmap>
<script src="https://vunelix.com/assets/bundles/js/widgets/heatmap/vunelix-crypto-heatmap.js" type="module"></script>

Technical analysis widgets with RSI, MACD, Stochastic, SMA, EMA, WMA, Bollinger Bands, Ichimoku Cloud, pivot points, and signal gauges. Each widget shows buy/sell/neutral signals across multiple timeframes.

<vunelix-technical-analysis
    data-symbol="BINANCE:BTCUSD"
    data-default-period="1D"
    data-enable-metrics-cards="true">
</vunelix-technical-analysis>
<script src="https://vunelix.com/assets/bundles/js/widgets/technical/vunelix-technical-analysis.js" type="module"></script>

Advanced data tables with sorting, filtering, custom column presets, watchlists, and technical analysis — covering crypto, stocks, forex, ETFs, DEX, CEX, and depositary receipts.

<vunelix-stock-screener
    data-default-country="US"
    data-per-page="50"
    data-custom-presets='{"Price":["price","change","change-percent","volume"],"Fundamentals":["market-cap-stock","pe-ratio","eps-ttm","dividend-yield-current"]}'
    data-animation-mode="digits">
</vunelix-stock-screener>
<script src="https://vunelix.com/assets/bundles/js/widgets/screener/vunelix-stock-screener.js" type="module"></script>

Symbols use the EXCHANGE:SYMBOL format:

Mix exchanges in a single widget:

data-symbols="BINANCE:BTCUSDT,NASDAQ:TSLA,FX:EURUSD,NYSE:JPM"

For the full list of supported symbols, use the search on vunelix.com.

Widgets auto-detect your page's color scheme. Override manually:

data-theme="auto"    <!-- System preference (default) -->
data-theme="light"   <!-- Force light theme -->
data-theme="dark"    <!-- Force dark theme -->

All colors accept a light,dark pair — first value for light theme, second for dark:

data-positive-color="#059669,#34d399"
data-negative-color="#dc2626,#fb7185"
data-bg-color="#ffffff,#0a0a0a"
data-bg-secondary-color="#f8fafc,#141414"
data-text-color="#0f172a,#f1f1f1"
data-text-secondary-color="#475569,#aaaaaa"
data-border-color="#e2e8f0,#282828"

Control how real-time price updates animate:

data-animation-mode="digits"     <!-- Animate only changed digits -->
data-animation-mode="full"       <!-- Animate full price value -->
data-animation-mode="flash"      <!-- Background color flash -->
data-animation-mode="none"       <!-- No animation -->
data-animation-duration="1500"   <!-- Animation duration in ms -->

Build your own column presets with any combination of 200+ available metrics:

data-custom-presets='{"My Tab":["price","change-percent","volume","market-cap"],"Technicals":["price","rsi","macd","signal-summary"]}'

Create your own currency group tabs:

data-presets='{"Gulf":"AED,SAR,QAR,KWD,BHD","South Asian":"INR,PKR,BDT,LKR","BRICS":"CNY,INR,BRL,ZAR,RUB"}'

Load the screener with filters already applied:

data-default-filters='{"earnings.market_cap_gt":"10000000000","active.chp_gt":"1"}'

Set the widget language:

data-lang="en"    <!-- English (default) -->
data-lang="ar"    <!-- العربية (RTL supported) -->
data-lang="es"    <!-- Español -->
data-lang="cn"    <!-- 中文 -->
data-lang="ru"    <!-- Русский -->
data-lang="de"    <!-- Deutsch -->
data-lang="fr"    <!-- Français -->
data-lang="ja"    <!-- 日本語 -->

Built with Web Components (Custom Elements v1 + Shadow DOM v1), supported in all modern browsers.

• Finance blogs — Add live price tickers and market data to your articles
• Crypto news sites — Embed screeners and heatmaps for your readers
• Trading communities — Show real-time market movers and top gainers/losers
• Portfolio trackers — Build custom watchlists with color-coded groups
• Forex broker sites — Display live cross rates and currency converters
• Educational platforms — Teach market analysis with interactive widgets
• SaaS dashboards — Embed market data into your product UI
• WordPress sites — Paste the embed code in any HTML block
• Shopify stores — Add crypto price tickers to your store
• Mobile apps (WebView) — Works inside any WebView container

free-market-data-widgets/
├── README.md
├── LICENSE
├── CONTRIBUTING.md
├── CHANGELOG.md
├── assets/
│   ├── css/
│   │   └── demo.css
│   ├── js/
│   │   └── demo.js
│   └── images/
├── ticker/
│   ├── ticker-tape.html
│   └── ticker.html
├── symbol-search/
│   └── symbol-search.html
├── market-movers/
│   ├── crypto-market-movers.html
│   ├── forex-market-movers.html
│   └── stock-market-movers.html
├── currency/
│   ├── currency-converter.html
│   └── currency-cross-rates.html
├── heatmap/
│   ├── crypto-heatmap.html
│   ├── stock-heatmap.html
│   └── currency-heatmap.html
├── technical/
│   ├── technical-analysis.html
│   ├── technical-summary.html
│   ├── oscillators.html
│   ├── moving-averages.html
│   └── pivot-points.html
└── screener/
    ├── crypto-screener.html
    ├── stock-screener.html
    ├── forex-screener.html
    ├── fund-screener.html
    ├── cex-screener.html
    ├── dex-screener.html
    └── dr-screener.html

• Website — vunelix.com
• Widget Configurator — vunelix.com/widgets
• Crypto Screener — vunelix.com/crypto-coins-screener
• Stock Screener — vunelix.com/stock-screener
• Forex Screener — vunelix.com/forex-screener
• CEX Screener — vunelix.com/crypto-cex-screener
• DEX Screener — vunelix.com/crypto-dex-screener
• Fund Screener — vunelix.com/stock-funds-screener
• DR Screener — vunelix.com/stock-dr-screener
• Crypto Heatmap — vunelix.com/crypto-heatmap
• Stock Heatmap — vunelix.com/stock-heatmap
• Currency Heatmap — vunelix.com/currency-heatmap
• Currency Converter — vunelix.com/currency-converter
• Currency Cross Rates — vunelix.com/currency-cross-rates
• Crypto Technical Analysis — vunelix.com/crypto/BTCUSD/technical
• Stock Technical Analysis — vunelix.com/stock/AAPL/technical
• Forex Technical Analysis — vunelix.com/forex/EURUSD/technical

Found a bug? Have a feature request? Want to improve the demo pages?

• Open an issue — Report bugs or suggest features
• Read CONTRIBUTING.md — Guidelines for pull requests and contributions

MIT — free to use in personal and commercial projects. See LICENSE.

Built by Vunelix — Free crypto, forex & stock market data widgets for developers, traders, and content creators.