Formats of TradingView Widgets

/ Widget formats

TradingView widgets are available in two variations: Web Component and iframe-based widgets. Both formats display the exact same high-quality market data, charts, and designs. However, they differ in how they are embedded, customized, and loaded inside your website code.

Comparison

Feature	Web Component (Recommended)	Iframe
Best for	Modern sites embedding multiple widgets with shared styling and performance.	Maximum isolation or legacy sites expecting iframe behavior.
Implementation	Custom element tag + ES module.	Script that injects an iframe.
Page isolation	Runs within host DOM. Scoped and encapsulated via Shadow DOM.	Fully isolated document boundary.
Styling	Supports custom CSS tokens, dark/light modes, and selectors for granular control.	Styling is limited to config options; no host-page CSS targeting inside an iframe.
Data connection	Can share a single connection across widgets.	Each iframe manages its own connection.
Customization	Dynamic updates via attributes; UI updates instantly.	Changes require re-initializing the widget.
Integration in SPA/CSR	Friendly to frameworks and hydration; works as native custom elements.	Works anywhere but reloading iframes may be heavy.
Bundle and loading	Multiple widgets share code and a single loader, reducing incremental cost.	Each widget loads its own document and assets.
Security boundary	Encapsulated but within page process.	Strong isolation via iframe boundary.

Why choose Web Component widgets

Smaller downloads, faster loads. Multiple widgets use a shared loader, reducing total download size and parsing time.
Rich customization. You can control sizing layout directly via CSS, change light/dark themes, and use CSS tokens to tweak colors to match your brand perfectly.
Efficiency at scale. Adding extra widgets has a minimal performance cost. Where applicable, Web Components can share a single data connection, preventing browser resource exhaustion.
Native framework support. Works natively as a standard HTML element, making integration with any framework or vanilla JS smoother and cleaner.

Why choose iframe widgets

Platform restrictions. You have a CMS or a legacy environment that blocks custom HTML tags or restricts loading external ES modules.
Security sandboxing. Your project requires strict content security policies where the widget must be completely isolated from the host page’s code and DOM context.

You can confirm a widget’s type in three ways:

The documentation label. When browsing our widget collection, every page includes a distinct label near the title:
- type: Web Component
- type: iframe

The embed snippet. The code generated for your website is the clearest indicator.

Web Component widgets rely on an ES module import and a custom HTML tag starting with tv-.

<script type="module" src="https://.../tv-widget.js"></script>
<tv-mini-chart
    symbol="NASDAQ:AAPL"
    theme="light"
></tv-mini-chart>

Iframe widgets rely on a standard script file that injects an <iframe>.

<script
    src="https://s3.tradingview.com/external-embedding/embed-widget-ticker-tape.js"
>
    {
        "symbols": [{"proName": "NASDAQ:AAPL"}],
        "theme": "light"
    }
</script>

Runtime inspection. If you inspect a running widget using your browser’s Developer Tools:
- Web Components appear as custom elements (e.g., <tv-mini-ticker-chart>) and usually attach a Shadow Root.
- Iframe widgets render an <iframe> element as the outermost container.

Migration notes

If you are transitioning from iframes to Web Components, or using both simultaneously, keep the following in mind:

You can run both types on the same page. Web Components won’t interfere with iframe widgets and vice versa.
Both formats connect to the same TradingView backend and display the same market data. However, new features and performance optimizations may be released for Web Components first as our modern standard.
While the underlying widget options are similar, the syntax differs. Always consult the specific widget’s documentation for the correct syntax.

Widget formats

Comparison

Why choose Web Component widgets

Why choose iframe widgets

How to identify the widget type

Migration notes