{"id":31900795,"url":"https://github.com/dsnchz/solid-tradingview-widgets","last_synced_at":"2026-03-16T12:33:41.581Z","repository":{"id":297248986,"uuid":"994056570","full_name":"dsnchz/solid-tradingview-widgets","owner":"dsnchz","description":"SolidJS bindings for TradingView Widgets — ready-to-use financial tools you can embed into your website to display market data.","archived":false,"fork":false,"pushed_at":"2025-06-05T17:06:30.000Z","size":559,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-14T06:30:12.505Z","etag":null,"topics":["data-visualization","finance","fintech","fintech-api","solidjs","trading","visualization"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dsnchz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-01T05:19:48.000Z","updated_at":"2025-06-11T13:44:55.000Z","dependencies_parsed_at":"2025-06-09T08:02:12.377Z","dependency_job_id":null,"html_url":"https://github.com/dsnchz/solid-tradingview-widgets","commit_stats":null,"previous_names":["dsnchz/solid-tradingview-widgets"],"tags_count":3,"template":false,"template_full_name":"thedanchez/template-solidjs-library","purl":"pkg:github/dsnchz/solid-tradingview-widgets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-tradingview-widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-tradingview-widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-tradingview-widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-tradingview-widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dsnchz","download_url":"https://codeload.github.com/dsnchz/solid-tradingview-widgets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dsnchz%2Fsolid-tradingview-widgets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279015061,"owners_count":26085643,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data-visualization","finance","fintech","fintech-api","solidjs","trading","visualization"],"created_at":"2025-10-13T12:27:45.507Z","updated_at":"2025-10-13T12:27:49.419Z","avatar_url":"https://github.com/dsnchz.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp\u003e\n  \u003cimg width=\"100%\" src=\"https://assets.solidjs.com/banner?type=Ecosystem\u0026background=tiles\u0026project=Solid-TradingView-Widgets\" alt=\"SolidJS TradingView Widgets\"\u003e\n\u003c/p\u003e\n\n# @dschz/solid-tradingview-widgets\n\n[![License](https://img.shields.io/badge/license-MIT-green)](LICENSE)\n[![npm](https://img.shields.io/npm/v/@dschz/solid-tradingview-widgets?color=blue)](https://www.npmjs.com/package/@dschz/solid-tradingview-widgets)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@dschz/solid-tradingview-widgets)](https://bundlephobia.com/package/@dschz/solid-tradingview-widgets)\n[![JSR](https://jsr.io/badges/@dschz/solid-tradingview-widgets/score)](https://jsr.io/@dschz/solid-tradingview-widgets)\n[![CI](https://github.com/dsnchz/solid-tradingview-widgets/actions/workflows/ci.yaml/badge.svg)](https://github.com/dsnchz/solid-tradingview-widgets/actions/workflows/ci.yaml)\n\nA comprehensive collection of **embeddable TradingView iframe widgets** for [SolidJS](https://www.solidjs.com/) applications. This library provides type-safe, reactive components that embed TradingView's powerful financial widgets directly into your SolidJS applications.\n\n## 🌟 Features\n\n- **🎯 Type-Safe**: Full TypeScript support with comprehensive prop validation\n- **⚡ Reactive**: Built for SolidJS with reactive prop updates\n- **🎨 Customizable**: Extensive theming and styling options\n- **📱 Responsive**: Mobile-friendly widgets that adapt to container sizes\n- **🌍 Multi-Language**: Support for 30+ locales\n- **🔧 iframe-Based**: Secure, sandboxed TradingView widgets\n- **📦 Tree-Shakable**: Import only the widgets you need\n- **🚀 Performance**: Optimized loading and error handling\n\n## 🎮 Interactive Playground\n\n![Demo screenshot](./assets/playground_snap.png)\n\nExplore all 12 widgets with real-time configuration controls, theme switching, and live examples.\n\nThe playground features:\n\n- **📊 12 Widgets**: Complete collection with interactive demos (more to come in the future)\n- **⚙️ Live Configuration**: Adjust props and see changes instantly\n- **🎨 Theme Testing**: Switch between light/dark modes\n- **📱 Responsive Preview**: Test different sizes and layouts\n- **🔍 Feature Comparison**: Side-by-side widget comparisons\n- **📝 Code Examples**: Copy implementation examples\n\nPerfect for testing widgets before integration, exploring customization options, and understanding each widget's capabilities.\n\n### Run Playground Locally\n\nTo explore the playground locally or contribute to its development:\n\n```bash\n# Clone the repository\ngit clone https://github.com/dsnchz/solid-tradingview-widgets.git\ncd solid-tradingview-widgets\n\n# Install dependencies\nbun install\n# or yarn install\n# or pnpm install\n\n# Start the development server\nbun start\n\n# Open http://localhost:3000 in your browser\n```\n\nThe local playground includes hot-reload for instant feedback when exploring widget configurations or contributing improvements.\n\n## 📊 Available Widgets\n\n\u003e Note: Not all widget components have been implemented. The rest will be planned in a future release.\n\n### 📈 Charts\n\n| Widget             | Description                 | Key Features                                     |\n| ------------------ | --------------------------- | ------------------------------------------------ |\n| **AdvancedChart**  | Full-featured trading chart | 100+ indicators, drawing tools, multi-timeframes |\n| **MiniChart**      | Compact price chart         | Lightweight, customizable colors, date ranges    |\n| **SymbolOverview** | Symbol with mini chart      | Price + chart combination                        |\n\n### 🏷️ Symbol Details\n\n| Widget                | Description                | Key Features                             |\n| --------------------- | -------------------------- | ---------------------------------------- |\n| **SymbolInfo**        | Real-time symbol data      | Price, change, volume, market cap        |\n| **TechnicalAnalysis** | Technical indicator gauges | RSI, MACD, moving averages analysis      |\n| **FundamentalData**   | Financial metrics          | P/E ratios, revenue, margins, growth     |\n| **CompanyProfile**    | Company information        | Business description, sector, statistics |\n\n### 🎯 Tickers\n\n| Widget           | Description              | Key Features          |\n| ---------------- | ------------------------ | --------------------- |\n| **SingleTicker** | Individual symbol ticker | Compact price display |\n\n### 🔍 Screeners\n\n| Widget           | Description                    | Key Features                        |\n| ---------------- | ------------------------------ | ----------------------------------- |\n| **Screener**     | Multi-market stock screener    | Filter by fundamentals \u0026 technicals |\n| **CryptoMarket** | Cryptocurrency market overview | USD/BTC pricing, market cap ranking |\n\n### 📰 News \u0026 Events\n\n| Widget               | Description              | Key Features                         |\n| -------------------- | ------------------------ | ------------------------------------ |\n| **TopStories**       | Financial news feed      | Market news, symbol-specific stories |\n| **EconomicCalendar** | Economic events calendar | GDP, inflation, central bank events  |\n\n## 🚀 Quick Start\n\n### Installation\n\n```bash\nnpm install @dschz/solid-tradingview-widgets\n# or\nyarn add @dschz/solid-tradingview-widgets\n# or\npnpm add @dschz/solid-tradingview-widgets\n# or\nbun add @dschz/solid-tradingview-widgets\n```\n\n### Basic Usage\n\n```tsx\nimport { AdvancedChart, SingleTicker, TopStories } from \"@dschz/solid-tradingview-widgets\";\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      {/* Apple stock chart */}\n      \u003cAdvancedChart symbol=\"NASDAQ:AAPL\" colorTheme=\"dark\" width={800} height={400} /\u003e\n\n      {/* Bitcoin price ticker */}\n      \u003cSingleTicker symbol=\"BINANCE:BTCUSDT\" colorTheme=\"light\" /\u003e\n\n      {/* Financial news */}\n      \u003cTopStories feedMode=\"all_symbols\" colorTheme=\"light\" /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## 🎨 Theming \u0026 Customization\n\nAll widgets support extensive customization options:\n\n```tsx\n\u003cAdvancedChart\n  symbol=\"NASDAQ:AAPL\"\n  colorTheme=\"dark\"\n  backgroundColor=\"rgba(13, 13, 13, 1)\"\n  gridColor=\"rgba(255, 255, 255, 0.1)\"\n  locale=\"es\"\n  timezone=\"America/New_York\"\n  showVolume={true}\n  showDrawingToolsBar={true}\n  indicators={[\"relativeStrengthIndex\", \"bollingerBands\"]}\n/\u003e\n```\n\n### Color Format Support\n\nWidgets support all CSS color formats:\n\n- **Hex**: `#1a1a1a`, `#ff6b3580`\n- **RGB/RGBA**: `rgb(255, 107, 53)`, `rgba(41, 98, 255, 0.3)`\n- **HSL**: `hsl(210, 100%, 50%)`\n- **OKLCH**: `oklch(0.7 0.15 180)`\n\n## 🌍 Multi-Language Support\n\nThe library supports 30+ languages:\n\n```tsx\n\u003cScreener\n  exchange=\"germany\"\n  locale=\"de\"  // German\n  colorTheme=\"light\"\n/\u003e\n\n\u003cEconomicCalendar\n  locale=\"ja\"  // Japanese\n  colorTheme=\"dark\"\n/\u003e\n```\n\n## 📱 Responsive Design\n\nWidgets automatically adapt to their containers:\n\n```tsx\n{\n  /* Full-width responsive chart */\n}\n\u003cAdvancedChart\n  symbol=\"FOREX:EURUSD\"\n  autosize={true} // Takes full container size\n/\u003e;\n\n{\n  /* Fixed-size chart */\n}\n\u003cAdvancedChart symbol=\"FOREX:EURUSD\" width={600} height={400} autosize={false} /\u003e;\n```\n\n## 🔧 iframe Architecture\n\nThese widgets are **embedded TradingView iframes**, which means:\n\n- ✅ **Secure**: Sandboxed execution environment\n- ✅ **Reliable**: Direct data from TradingView servers\n- ✅ **Up-to-date**: Always latest TradingView features\n- ✅ **Performance**: Optimized by TradingView team\n- ⚠️ **Network Required**: Widgets need internet connectivity\n- ⚠️ **External Dependency**: Relies on TradingView's CDN\n\n## 🔮 Upcoming Widgets\n\nThe following widget categories are planned for future releases:\n\n### 📋 Watchlist/Ticker Widgets\n\n- **Ticker**: Horizontal glance of instrument stats\n- **TickerTape**: Wall Street style scrolling ticker tape\n- **MarketOverview**: Market sector performance overview\n- **StockMarket**: Customizable stock market watchlists\n- **MarketData**: Real-time market data tables\n\n### 🗺️ Heatmap Widgets\n\n- **StockHeatmap**: Stock performance heatmaps\n- **CryptoCoinsHeatmap**: Cryptocurrency market heatmaps\n- **ForexCrossRates**: Currency cross-rates visualization\n- **ETFHeatmap**: ETF performance heatmaps\n- **ForexHeatmap**: Forex market strength visualization\n\n_Stay tuned for these exciting additions in upcoming releases!_\n\n## 📚 Documentation\n\n### Widget Categories\n\n- **[Charts](https://www.tradingview.com/widget-docs/widgets/charts/)**: Advanced charting capabilities\n- **[Symbol Details](https://www.tradingview.com/widget-docs/widgets/symbol-details/)**: Company and instrument data\n- **[Tickers](https://www.tradingview.com/widget-docs/widgets/tickers/)**: Price tickers and feeds\n- **[Screeners](https://www.tradingview.com/widget-docs/widgets/screeners/)**: Market screening tools\n- **[News](https://www.tradingview.com/widget-docs/widgets/news/)**: Market news tools\n- **[Calendars](https://www.tradingview.com/widget-docs/widgets/calendars/)**: Market economic calendars\n\n### API Reference\n\nEach widget comes with comprehensive TypeScript definitions and JSDoc documentation. Check your IDE's IntelliSense for detailed prop descriptions and examples.\n\n## 🤝 Contributing\n\nWe welcome contributions! Please follow these guidelines:\n\n- **Clean Git History**: Rebase instead of merge commits\n- **Conventional Commits**: Follow [conventional commit format](https://www.conventionalcommits.org/en/v1.0.0/)\n- **CI Checks**: Ensure all tests and linting pass\n- **TypeScript**: Maintain type safety\n- **Documentation**: Update JSDoc and README as needed\n\n## 📄 License\n\nMIT License - see [LICENSE](./LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsnchz%2Fsolid-tradingview-widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdsnchz%2Fsolid-tradingview-widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdsnchz%2Fsolid-tradingview-widgets/lists"}