JavaScript and External libraries

Writing JavaScript

You can add some JavaScript to your templates and it will be interpreted when generating a document.

<script type="text/javascript">
  document.write('Hello World!');

External libraries

If you need to use a library that transforms your text, applies filters to images or say… inserts charts in your document, you can import them like you would do in a normal HTML page.

Imagine you’re writing a technical documentation and you want to automatically add syntax highlighting. You could import the Prism CSS in the CSS tab:

@import url('');

Then import the JS library in the HTML tab:

<pre><code class="language-css">.myComponent {
  display: flex;
  justify-content: space-between;

<pre><code class="language-ruby">class Greeter
  def say_hello(name: "Jane")
    puts "Hello #{name}!"

{% assign cdnBase = "" %}
<script src="{{cdnBase}}/prism.min.js"></script>
<script src="{{cdnBase}}/components/prism-css.js"></script>
<script src="{{cdnBase}}/components/prism-ruby.js"></script>

You can now get the code with pretty colors in your document!

Dynamic data

You can access the dynamic data of your document using the $docPayload variable.

<script type="text/javascript">
  let userName = $;

This can be very useful when building charts for instance.