Styling examples
Nodus separates your data from how it looks. You attach style rules that map each element to visual attributes, define reusable classes you can toggle on and off, and let the data itself drive colors and labels. See Styling concepts, the Styling elements guide, and the Styles API for the full picture.
Every demo runs live in your browser — drag, zoom and use the controls.
Style rules
A rule applies to every node or edge. Attributes can be plain values or functions of the element, so labels and colors are derived from each element’s own data.
nodus.styles.addNodeRule({ radius: 15, color: (n) => groupColor[n.getData().group] || '#475569', text: { content: (n) => n.getData().label, position: 'bottom' },});nodus.styles.addEdgeRule({ width: (e) => (e.getData('strong') ? 3 : 2), color: (e) => (e.getData('strong') ? '#475569' : '#cbd5e1'),});Style classes
A class is a named set of attributes defined once, then applied to any
selection. Applying it overrides the base style; removing it reverts. Use the
buttons to toggle the highlight class on every node.
nodus.styles.createClass({ name: 'highlight', nodeAttributes: { color: '#f59e0b', radius: 20, outerStroke: { color: '#b45309', width: 3 } },});
nodus.getNodes().addClass('highlight');nodus.getNodes().removeClass('highlight');Data-driven styling
With a single function-valued rule, the visual is driven entirely by each node’s
data — here every node is colored by its data.category.
const categoryColor = { A: '#0f766e', B: '#2563eb', C: '#db2777' };
nodus.styles.addNodeRule({ radius: 15, color: (n) => categoryColor[n.getData().category], text: { content: (n) => n.getData().category, position: 'center', color: '#fff' },});Themes
A single setTheme call restyles every node and edge at once — including hover and
selection states. Pair it with a background swap to flip the whole view between
light and dark palettes.
nodus.styles.setTheme({ nodeAttributes: { color: '#60a5fa', radius: 14 }, edgeAttributes: { color: '#475569', width: 2 }, hoveredNodeAttributes: { outerStroke: { color: '#fff', width: 3 } }, selectedNodeAttributes: { color: '#f59e0b' },});document.getElementById('graph').style.background = '#0f172a';