GitHub - LuxAlgo/Vela: Fast and modern interactive financial charts with their own native renderer powered by WebGL2 or Canvas2D.

Fast, extensible financial charts for the web.

Headless core · native WebGL2 renderer · batteries-included workspace · plugin SDK

Homepage · Quick start · Documentation · Plugin SDK · Changelog · License

Vela™ renders interactive financial charts with its own native renderer (WebGL2, with a canvas2d fallback) and keeps the chart itself headless: drive it entirely from code, or drop in the workspace for a complete chart app in one call.

Every layer (data providers, scripting engines, renderers) plugs in behind a public port and can be swapped without touching the rest.

What's in the box

native renderer.

• @luxalgo/vela : the headless chart. Data model, engines, drawings, providers,

one shared topbar (symbol / timeframe / style / indicators), status line, symbol watermark, bottom bar (ranges, clock, timezone), object tree, keyboard-first UX (type a letter for symbol search, a digit for timeframe entry, ?

for the shortcuts panel), named cells, sync groups, and one persisted state document.

• @luxalgo/vela/workspace : the full chart app. One chart or a grid of them under

chrome ( Zag.js menu/dialog/drawer/tooltip), form primitives, and the KeymapManager .

• @luxalgo/vela/ui : the component kit the app is built on. Design tokens, overlay

indicators.

• @luxalgo/vela/plugin : the extension SDK. Chart types, renderer layers, native

ready to register. Or supply your own bars and stay fully offline.

• @luxalgo/vela/providers/* : data providers (Binance, Coinbase, Hyperliquid),

Installing

npm install @luxalgo/vela

Quick start

The fastest path is the workspace, a complete chart app in one call:

import { VelaWorkspace } from '@luxalgo/vela/workspace' ; import { BinanceProvider } from '@luxalgo/vela/providers/binance' ;

const chart = new VelaWorkspace ( '#chart' , { layout : false , // one chart; '2h' | '4' | '8' | … for a multi-chart grid symbol : 'BTCUSDT' , timeframe : '60' , live : true , theme : 'dark' , providers : { binance : ( ) => new BinanceProvider ( ) } , persist : true , // restore market, style, timezone, drawings and indicators from localStorage } ) ;

Prefer full control? Use the headless core directly:

import { Vela } from '@luxalgo/vela' ; import { BinanceProvider } from '@luxalgo/vela/providers/binance' ;

const chart = new Vela ( '#chart' , { symbol : 'binance:BTCUSDT' , timeframe : '60' , live : true } ) ; chart . data . registerProvider ( 'binance' , new BinanceProvider ( ) ) ; await chart . ready ( ) ;

No provider, no network? Pass your own bars via the data option. See the quickstart .

Browser bundle

The package also ships self-contained browser builds for script-tag usage: dist/vela.global.js (readable, development) and dist/vela.global.min.js (minified, production). Either file attaches the library's public API, including the bundled providers, to window.Vela .

Indicators

Vela™ ships 70+ built-in studies — moving averages, bands and channels, momentum oscillators, trend and volatility measures, volume studies, and price-anchored overlays such as VWAP, SuperTrend, and Pivot Points.

They compute from the chart's own bars (no scripting engine), and each one gets a legend row, a settings dialog, and persistence across reloads. Volume and the visible-range volume profile sit alongside them.

Custom scripts still run through pluggable engines. Vela™ ships none : install the addon for the language you want, or write one against the public ScriptingEngine port.

Pine Script lives in @luxalgo/vela-pinets ( npm i @luxalgo/vela-pinets pinets ), which is AGPL-3.0 because the PineTS runtime it executes is. Vela™ itself stays Apache-2.0 and carries no Pine code:

import { PineEngine } from '@luxalgo/vela-pinets' ;

chart . registerEngine ( 'pine' , new PineEngine ( ) ) ; chart . addIndicator ( //@version=6 indicator("EMA 20", overlay=true) plot(ta.ema(close, 20), color=color.orange, linewidth=2) ) ;

Host tooling can execute-and-inject safely with chart.runIndicator(source) (structured errors, no dead legend rows) and read a running script's state, including its return value , via handle.context() (read-only snapshots, worker-safe).

See the API reference , and Scripting engines for the addon and for writing your own.

The workspace takes an indicator manifest : inline JSON, a URL returning it, or an async loader ( () => Promise<manifest> ):

new VelaWorkspace ( '#chart' , { // … engines : { pine : ( ) => new PineEngine ( ) } , indicators : '/indicators.json' , // or an inline [{ name, script | url, language?, enabled? }] } ) ;

Extending (plugin SDK)

Custom chart types and canvas layers register through the public SDK, no fork needed:

import { registerChartType , registerRendererLayer } from '@luxalgo/vela/plugin' ;

// A new price style: bar transform + optional per-bar data engine + ticker modifier. registerChartType ( { id : 'renko-like' , label : 'Renko-like' , barTransform : { full : ( bars ) => transformAll ( bars ) , next : ( bar ) => transformOne ( bar ) } , } ) ;

// A custom canvas layer, painted every frame with the chart (its id = its data channel).

registerRendererLayer ( { id : 'renko-like' , placement : 'above-data' , create : ( ) => ( { mount ( canvas ) { /* keep it */ } , render ( { bars , data , coords , scale , bounds } ) { /* paint */ } } ) , } ) ;

A registered chart type automatically appears in the workspace's style dropdown, and a chart type's dataEngine pushes to its layer's channel with zero extra wiring. See docs/contributing/plugin-sdk.md .

Documentation

Full documentation lives in docs/ : user guides ( quickstart , the workspace , options , API reference ), architecture , and contributing guides including the plugin SDK .

Development

npm install

npm run playground # vite playground on http://localhost:5190

npm test # vitest

npm run build # tsup → dist/

License and attribution

Vela™ is licensed under the Apache License, Version 2.0 (see LICENSE ). The NOTICE file adds an attribution requirement , and redistributions must include it per Apache-2.0 §4(d):

linking to the project page — enabled by default. You may restyle or reposition it to fit your design.

• Every chart renders a small Vela™ attribution watermark — the project logomark,

an equivalent visible attribution is shown elsewhere on the same page or screen, where your users can see it: the name "Vela™" linking to the project page.

• You may turn the watermark off ( chart.renderer.set('attribution', false) ) only if

notice is not permitted.

• Removing, hiding, or obscuring the attribution without providing that equivalent

This is the same licensing model used by other popular charting libraries, and we're grateful when the watermark stays in a visible spot.

No scripting engine ships with this package; the Pine Script addon ( @luxalgo/vela-pinets ) is AGPL-3.0 and licensed separately (see Indicators ).

— 本文由 AI 根据公开来源辅助整理，命令、版本与许可证请在使用前到原始页面复核。