Gathering detailed insights and metrics for cytoscape-css-variables
Gathering detailed insights and metrics for cytoscape-css-variables
Gathering detailed insights and metrics for cytoscape-css-variables
Gathering detailed insights and metrics for cytoscape-css-variables
🎨 add CSS Variable functionality to cytoscape.js
npm install cytoscape-css-variables
Typescript
Module System
TypeScript (31.99%)
JavaScript (31.03%)
HTML (19.06%)
CSS (17.91%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
6 Stars
437 Commits
2 Watchers
1 Branches
2 Contributors
Updated on Jul 12, 2025
Latest Version
0.1.4
Package Id
cytoscape-css-variables@0.1.4
Unpacked Size
28.33 kB
Size
5.57 kB
File Count
15
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
1
Add CSS Variable functionality to Cytoscape graphs
Download the library:
npm install cytoscape-css-variables
,https://unpkg.com/cytoscape-css-variables/dist/cytoscape-css-variables.js
Import the library as appropriate for your project:
ES import:
1import cytoscape from 'cytoscape'; 2import cssVars from 'cytoscape-css-variables'; 3 4cytoscape.use( cssVars );
CommonJS require:
1let cytoscape = require('cytoscape'); 2let cssVars = require('cytoscape-css-variables'); 3 4cytoscape.use( cssVars ); // register extension
AMD:
1require(['cytoscape', 'cytoscape-css-variables'], function( cytoscape, cssVars ){ 2 cssVars( cytoscape ); // register extension 3});
Plain HTML/JS has the extension registered for you automatically, because no require()
is needed.
1// core cytoscape instance 2let cy 3 4// cssVars extension instance 5let css_vars 6 7// Can't call css_vars before it is initiated, so declaring the function here 8const getVar = (variable) => (css_vars ? css_vars.getVar(variable) : null) 9 10cy = cytoscape({ 11 container: document.getElementById('cy'), 12 style: [ 13 { 14 selector: 'node', 15 style: { 16 // Use getVar() with the css variable name to use it 17 // - this can be used for more than just colors 18 // - getVar() here is a local function, NOT the extension function 19 'background-color': () => getVar('--theme-primary'), 20 }, 21 }, 22 ], 23 // your array elements go here 24 elements: [], 25}) 26 27// cssVars takes two (optional) values, 28// initialVars object and the domEl to assign the vars to/from 29cy.cssVars({ 30 initialVars: { 31 '--theme-primary': 'rgb(245, 204, 0)', 32 '--theme-secondary': 'rgb(0, 8, 20)', 33 '--theme-tertiary': 'rgb(234,84,85)', 34 '--cy-node-size': 30, 35 }, 36 domEl: document.body, 37}) 38 39// no updates will be made until update() is called (even on init) 40// this allows you to bulk change css vars but only run one update 41// NOTE: this will need to be run after any set of set/get/remove functions 42css_vars.update() 43 44// assigns a value to a variable 45css_vars.setVar('--theme-primary', 'rgb(245, 204, 0)') 46 47// removes a variable and its value by the variable name 48css_vars.removeVar() 49 50// returns an object of css variables and their values 51// will match the initialVars object to be passed in on init 52css_vars.getVars() 53 54// bulk add variables 55// will match the initialVars object to be passed in on init 56css_vars.addVars() 57 58// removes all variables and their values 59css_vars.resetVars() 60 61// sets the current active DOM element 62css_vars.setDomEl() 63
Make sure you have np installed
yarn publish
No vulnerabilities found.
Reason
15 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
1 existing vulnerabilities detected
Details
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
Project has not signed or included provenance with any releases.
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More