Skip to content

Theming ​

Library styles ​

VueFlow comes without any pre-injected stylings. Some necessary stylings have to be imported, though optional styles (i.e. the default theme) can be skipped.

css
/* these are necessary styles for vue flow */
@import '@vue-flow/core/dist/style.css';

/* this contains the default theme, these are optional styles */
@import '@vue-flow/core/dist/theme-default.css';
/* these are necessary styles for vue flow */
@import '@vue-flow/core/dist/style.css';

/* this contains the default theme, these are optional styles */
@import '@vue-flow/core/dist/theme-default.css';

Customizing default theme ​

When you are using the default theme there are three ways how you can style the graph pane and the elements. You can create your own CSS rules, pass style/class properties to the components or use the available css variables.

Using classes ​

You can customize the default theme by simply overwriting the class definitions with your own custom ones.

css
.vue-flow {
  background: red;
}
.vue-flow {
  background: red;
}

Using styles ​

You can also pass a style or class attribute directly to the Vue Flow component.

vue
<div style="height: 300px">
  <VueFlow
    v-model="elements"
    :style="{ background: 'red' }"
  />
</div>
<div style="height: 300px">
  <VueFlow
    v-model="elements"
    :style="{ background: 'red' }"
  />
</div>

Nodes/Edges can also be styled with a style or class attribute.

ts
const nodes = ref<Node[]>([
  { 
    id: '1', 
    label: 'Node 1', 
    position: { x: 250, y: 5 },
    
    // Add a class name to the node
    class: 'my-custom-node-class',
    
    // You can pass an object containing CSSProperties or CSS variables
    style: { backgroundColor: 'green', width: '200px', height: '100px' },
  },
  
  { 
    id: '2', 
    label: 'Node 2', 
    position: { x: 100, y: 100 }, 
    
    /* 
     * You can also use a function which will receive your current element as it's input.
     * Useful if you want to add styles if the element is selected
     */
    style: (el) => {
      if (el.selected) return { background: 'purple' }
      return { background: 'green' }
    }
  },
])
const nodes = ref<Node[]>([
  { 
    id: '1', 
    label: 'Node 1', 
    position: { x: 250, y: 5 },
    
    // Add a class name to the node
    class: 'my-custom-node-class',
    
    // You can pass an object containing CSSProperties or CSS variables
    style: { backgroundColor: 'green', width: '200px', height: '100px' },
  },
  
  { 
    id: '2', 
    label: 'Node 2', 
    position: { x: 100, y: 100 }, 
    
    /* 
     * You can also use a function which will receive your current element as it's input.
     * Useful if you want to add styles if the element is selected
     */
    style: (el) => {
      if (el.selected) return { background: 'purple' }
      return { background: 'green' }
    }
  },
])

Using CSS variables ​

Some theme stylings can be overwritten by using css variables. These variables can either be applied globally or you can define them on an element basis.

css
/* global defaults */
:root {
  --vf-node-bg: #fff;
  --vf-node-text: #222;
  --vf-connection-path:  #b1b1b7;
  --vf-handle: #555;
}
/* global defaults */
:root {
  --vf-node-bg: #fff;
  --vf-node-text: #222;
  --vf-connection-path:  #b1b1b7;
  --vf-handle: #555;
}
ts
const elements = ref<Elements>([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  
  // Overwrite the `--vf-node-color` variable to change the border, box-shadow and handle color of a node
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } },
  
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
])
const elements = ref<Elements>([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  
  // Overwrite the `--vf-node-color` variable to change the border, box-shadow and handle color of a node
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, style: { '--vf-node-color': 'blue' } },
  
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
  { id: '4', label: 'Node 4', position: { x: 400, y: 200 } },
  { id: 'e1-2', source: '1', target: '2', animated: true },
  { id: 'e1-3', source: '1', target: '3' },
])

CSS Variables ​

VariableEffect
--vf-node-colorNode border, box-shadow and handle color
--vf-box-shadowNode box-shadow color
--vf-node-bgNode background color
--vf-node-textNode font color
--vf-handleNode handle color
--vf-connection-pathConnectionline color

Classes ​

NameContainer
.vue-flowOuter container
.vue-flow__containerWrapping container elements
.vue-flow__viewportInner container
.vue-flow__transformationpaneZoom & pan pane
.vue-flow__selectionpaneSelection pane
.vue-flow__selectionUser selection
.vue-flow__edgesEdges renderer wrapper
.vue-flow__edgeEdge element wrapper
.vue-flow__edge-Edge type, either a custom or default type
.vue-flow__edge .selectedSelected Edge
.vue-flow__edge .animatedAnimated edge
.vue-flow__edge-pathEdge element svg path
.vue-flow__edge-textEdge label wrapper
.vue-flow__edge-textbgEdge label wrapper background
.vue-flow__connectionlineConnection line container element
.vue-flow__connectionConnection line element
.vue-flow__connection-pathConnection line svg path
.vue-flow__nodesNodes renderer wrapper
.vue-flow__nodeNode element wrapper
.vue-flow__node .selectedSelected Node
.vue-flow__node-Node type, either a custom or default type
.vue-flow__nodesselectionNodes selection rect
.vue-flow__handleNode handle element wrapper
.vue-flow__handle-bottomHandle position bottom
.vue-flow__handle-topHandle position top
.vue-flow__handle-leftHandle position left
.vue-flow__handle-rightHandle position right
.vue-flow__handle-connectingConnectionline is above handle
.vue-flow__handle-validConnectionline is above handle & the connection is valid
.vue-flow__backgroundBackground component
.vue-flow__minimapMini map component
.vue-flow__controlsControls component

Released under the MIT License.