Widgets Overview
Vunelix widgets are free, embeddable financial components that display live market data on any website. Built with native Web Components and Shadow DOM — not iframes. This page explains how they work and how they compare to TradingView.
How It Works
Each widget is a custom HTML element. Paste a short snippet into your page and the widget loads automatically. No build tools, no framework, no server setup.
Choose a Widget
Pick from tickers, screeners, heatmaps, converters, or technical analysis tools in the sidebar.
Customize
Set symbols, colors, theme, layout, and display options using the visual configurator. Changes preview in real time.
Copy & Paste
Copy the generated HTML snippet and paste it into your website. Works with WordPress, Shopify, Webflow, Wix, or any HTML page.
Technical Architecture
What makes these widgets different from typical embed solutions:
Shadow DOM Isolation
Each widget renders inside a Shadow DOM boundary. Your site's CSS cannot break the widget, and the widget's CSS cannot affect your page.
WebSocket Live Data
Prices update in real time via a single shared WebSocket connection. Multiple widgets on the same page share one connection.
Auto Theme Detection
Widgets detect your site's dark mode toggle — class="dark", data-theme, data-bs-theme, or prefers-color-scheme — and adapt automatically.
Zero Dependencies
No jQuery, no React, no framework required. A single ES module registers a custom HTML element. Works anywhere JavaScript runs.
Vunelix vs TradingView Widgets
TradingView is the most widely used source for financial widgets. Here is a direct comparison on the things that matter most when embedding widgets on a production site.
| Feature | TradingView | Vunelix |
|---|---|---|
| Technology | Iframe-based — loads a full page inside a sandboxed frame with external CSS, JS, and fonts. | Native Web Components with Shadow DOM. Renders directly in your page's DOM. No iframe, no external scripts. |
| Performance | Each iframe loads its own bundle. Multiple widgets multiply the load — impacts Lighthouse and Core Web Vitals. | Single async script shared across all widgets. Shadow DOM isolates styles without iframe cost. |
| Colors | Light and dark themes. Custom element colors require a paid plan. | Full color control — background, text, borders, positive/negative — with separate light and dark values. Free. |
| Theme Integration | Iframe is sandboxed — cannot detect your site's dark mode toggle. | Auto-detects theme changes on your page in real time via class, data-attribute, and OS-level signals. |
| Branding | TradingView logo on every widget. Removal requires a paid plan. | Small "by Vunelix" text link. No logo overlay. |
| Data Coverage | Stocks, forex, crypto, indices, bonds, futures. | Stocks, forex, crypto (CEX + DEX), ETFs, ADRs, mutual funds. Includes DeFi tokens on Uniswap, PancakeSwap, Raydium. |
Widget Types
A brief overview of each category:
Tickers
Scrolling tape and static price cards showing live quotes for stocks, crypto, and forex. Configurable symbols, scroll speed, and metrics.
Market Movers
Top gainers and losers ranked by daily percentage change. Available for crypto, forex, and stocks with customizable sort and filters.
Currency Tools
Live currency converter with 150+ currencies and a cross rates matrix showing exchange rates between multiple pairs.
Heatmaps
Color-coded market visualization sized by market cap and colored by price change. Available for currencies, stocks, and crypto.
Screeners
Data tables with filters, sorting, custom columns, and watchlists. Cover crypto, CEX, DEX, stocks, forex, ETFs, and ADRs.
Technical Analysis
RSI, MACD, moving averages, oscillators, and pivot points with summary gauges. Timeframes from 1 minute to 1 month.