marked-vega | Vaadin

Polymer 2.0 add-on element for marked-element to render Vega and Vega-Lite charts from markdown.

[ This description is mirrored from at on 2019-05-22 ]

marked-vega GitHub release Published on styled with prettier

  <marked-vega slot="markdown-html"></marked-vega>
  <script type="text/markdown" src=""></script>

marked-vega is an add-on element for marked-element to render Vega and Vega-Lite charts in markdown documents with vega-element.

More API documentation and demos can be found on the web components page for marked-vega.


PolymerVis is a personal project and is NOT in any way affliated with Vega, Vega-Lite, Polymer or Google.


bower install --save PolymerVis/marked-vega

Markdown Syntax

marked-vega introduces a few new markdown syntax.

1. Image markdown





2. Code markdown


<Vega/Vega-Lite JSON specification>
<Vega/Vega-Lite JSON specification in YAML format>

Example - JSON specification

  "data": {
    "values": [
      {"a": "A","b": 28}, {"a": "B","b": 55}, {"a": "C","b": 43},
      {"a": "D","b": 91}, {"a": "E","b": 81}, {"a": "F","b": 53},
      {"a": "G","b": 19}, {"a": "H","b": 87}, {"a": "I","b": 52}
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "ordinal"},
    "y": {"field": "b", "type": "quantitative"}

Example - YAML specification

    - x: A
      y: 13
    - x: B
      y: 55
    - x: C
      y: 43
    - x: D
      y: 91      
    - x: E
      y: 81      
    - x: F
      y: 53      
    - x: G
      y: 19      
    - x: H
      y: 87      
    - x: I
      y: 52      
    field: x
    type: ordinal
    field: y
    type: quantitative

Basic usage

marked-vega enable parsing and rendering of Vega/Vega-Lite charts by updating the renderer attribute of the parent marked-element and adding a few new rules to the marked markdown parser and compiler.

The easiest way to use marked-vega is to replace it as the default slot element when using marked-element.


  <div slot="markdown-html"></div>
  <script type="text/markdown" src="../"></script>


  <marked-vega slot="markdown-html"></marked-vega>
  <script type="text/markdown" src="demo/"></script>

Please look at the the webcomponents page for marked-element for other ways of using marked-element.

Custom renderer

Alternatively if you wish to use to further customize the renderer for marked-element, you can used the provided renderers:

  • PolymerVis.marked.CodeRendererVega modifies the rules for the code markdown
  • PolymerVis.marked.ImageRendererVega modifies the rules for the image markdown
  • PolymerVis.marked.RendererVega modifies the rules for the code and image markdown

Each renderer is a function of the form function(renderer) { ... return renderer; }.


this.customRenderer = function(renderer) {
  // other customized renderer codes
  // return vega renderer codes
  return PolymerVis.marked.RendererVega(renderer);
<marked-element renderer="[[customRenderer]]">
  <marked-vega slot="markdown-html"></marked-vega>
  <script type="text/markdown" src="demo/"></script>


Link to this version
ImportedReleased 16 October 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save PolymerVis/marked-vega"#2.0.1"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.0.1


  • polymer#Polymer/polymer#^2.0.0
  • vega-element#PolymerVis/vega-element#^2.0.0
  • yamljs#^0.1.5