Execute scripts in the html viewer custom widget

I just discovered a way to execute HTML <script> tags using the HTML Viewer Grist Widget.

Instead of selecting HTML viewer in the list of available custom widgets, enter the custom URL:

https://gristlabs.github.io/grist-widget/renderhtml?tags=script

This is an undocumented feature of this widget, which I only discovered by reading the source code of the widget.

I had been desperately trying to render Mermaid.js charts for a long time, without success, but now I finally got it working with the HTML viewer plugin!

This is the text which gets passed to the HTML viewer widget:

<pre class="mermaid">
flowchart LR
  markdown["`This **is** _Markdown_`"]
  newLines["`Line1
  Line 2
  Line 3`"]
  markdown --> newLines
</pre>
<script type="module">
  //alert("hello");
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  console.log(mermaid);
  mermaid.initialize({ startOnLoad: false, theme: "dark"});
  await mermaid.run();
</script>

And it gets rendered!

Here’s a screenshot trying to capture it all on one screen:

Anyway, just wanted to share this in case anyone else had been struggling with the same thing for a while.

4 Likes

Hmmm… that’s very interesting. Of course, you coded everything DIRECTLY on the html code.

But I guess you can make it like a formula and have code replaced by references to Grist data.

That would allow to use Mermaid Gantt Charts, for example

Yeah! There are many ways to make this better, and converting this into a formula, and using data from the tables, would be a step in the right direction.

Ideally I would create a full-fledged custom widget for mermaid diagrams, which I’ve tried to do before ( Link to Code ), but I haven’t had much luck, which is why I was so excited when I got this working.