Skip to content


Folders and files

Last commit message
Last commit date

Latest commit



20 Commits

Repository files navigation



Vue CWL provides a Vue component for the visualization of CWL (Common Workflow Language) workflows.


Vue CWL uses the fantastic cwl-svg library behind the scenes, which you can also use directly. However, you might want to use Vue CWL because:

  • You can use it directly in your HTML application, without setting up a compiler. You don't even need to use npm!
  • If you're using Vue elsewhere in your application, Vue CWL will be much easier to integrate.

Installation (if using npm)

Install from npm:

npm install vue-cwl --save-dev

Or, if you want the latest development version, install from github:

npm install git+ --save-dev


Vue CWL is exported as a UMD module, which means that you can either import it with a module loader, or import it directly in the browser.

If using webpack and npm:

import Vue from 'vue';
import Cwl from 'cwl-svg';

new Vue({
    el: '#vue',
    components: {
        cwl: Cwl

You can now use the <cwl> tag in your template:


If using no bundler, you can include Vue and Vue CWL using something like unpkg:

<div id="vue" style="width: 800px; height: 800px">
<script src=""></script>
<script src=""></script>
    new Vue({
        el: '#vue',
        components: {
            cwl: vueCwl.default


Vue CWL components currently accept 4 props:

  • cwl:
    • type: Object
    • default: null
    • description: The JSON object representing the CWL workflow to render
  • cwlUrl:
    • type: String
    • default: null
    • description: A URL to request for the initial CWL object from. Used as an alternative to the "cwl" prop`
  • editingEnabled:
    • type: Boolean
    • default: false
    • description: True if the workflow is editable
  • plugins:
    • type: Array
    • default: No plugins
    • description: A list of CWL plugins to use in the CWL rendering


An online demo of Vue CWL is available at

If you wish to build the demo yourself:

  • Clone the repo
  • Run npm run demo
  • Then browse to http://localhost:8080/ in your web browser (or whatever URL the command prints out)