Typst.ts (cetz/fletcher/lilaq) for native typst diagram blocks

[rtbs-dev]

Description

Currently typst is only used as a pdf-engine, but given it's web-native capabilities and tiny size, I think it makes a lot of sense to allow typst blocks the same way dot and tikz blocks are.

Typst can natively output svg, and has a lot fewer issues setting up than e.g. tikz (which is only supported right now in LaTeX output).

In addition, it's possible to use the Typst.ts CDN script to enable client-side rendering of arbitrary typst. This is the enabling tech behind the main LSP folks are using now (tinymist), and comes from the same dev.

I've tested out the static html example and it works incredibly well, live, with almost no latency, and no local typst installation. The docs seem to indicate the underlying mechanics of it are straightforward.
Not sure we necessarily need this since Quarto already vendors Typst, but it's an option.

Mostly I would like to use Typst as a super-portable, high-quality diagram block tool within quarto, so that the resulting SVGs can be used in my html, reveal.js, and latex/pdf documents.
Some example libraries that could easily be used for this:

• Conchord for tabulature diagrams
• Fletcher for flowcharts, category theory, etc...anything with arrows
• Lilaq for matplotlib-style data viz
• barcode/QR generation

and this is only the surface, there's more literally every day, lately. But I think it's really important to see this as possible SVG artifact generation for embedding into other formats, not just as a PDF engine.

Would we just need to add a handler for typst.ts in the /core/handlers/ dir?

[cscheid]

Would we just need to add a handler for typst.ts in the /core/handlers/ dir?

src/core/handlers/* is indeed where the code for the "typescript executable code cells" functionality lives. However, there's some interactions with other engines that need to be taken into account which makes things not as clean as you'd expect.

This would be a cool, worthwhile experiment, but it is a big feature, and I think you'd want to experiment with it first as a plain Lua filter. The syntax would not be that different. You'd use

```typst-diagram
...
```

And then write a Lua filter that catches CodeBlock with the typst-diagram class, and convert them to an image output as appropriate by shelling out to the typst binary.

[rtbs-dev]

I can look into this more! Though I'll be honest I have very little experience with Lua (Emacs+Helix person, myself 😅 ). The quarto-diagrams and quarto-kroki examples seem to have a lot going on in terms of boiler plate such that I don't really understand how it's all interacting.

Speaking of quarto-diagrams, this is getting close to what you're describing re: lua-filter, right? I spent a long time testing this but something about the way preambles are happening makes any diagram that wraps a cetz canvas impossible to render. I could be doing something wrong but every time I try to use fletcher or lilaq it fails.

Also tried to see if I could mimic this "filter-diagram" workflow with the tikz example, since I'm familiar with that as well, but I kept getting errors every time I tried to import extra libraries.
Using jupyter-tikz ipython magic worked great for me in jupyter lab, but quarto choked every time it came across a %%tikz ipython magic, despite changing the cell type to ipython (which for the record also broke jupyter lab 🫠)

All of this is to say, I had sort-of sworn off of using pandoc/lua filters after the nightmares of dependency hell I had run into trying out various other techniques, which is how I landed on wanting to use the web-native typst.ts renderer (which worked with any typst import, first try, as expected!)

I could definitely try to help test out a filter if that's what happens before a typst.ts integration, but first I think I need to get back to actually finishing up my paper (since I'll need to re-do tikz diagrams in something other than typst if I want to use the quarto reveal.js or html outputs) before I can seriously dive into, say, learning Lua the right way :) Thanks!

[cscheid]

first I think I need to get back to actually finishing up my paper (since I'll need to re-do tikz diagrams in something other than typst if I want to use the quarto reveal.js or html outputs)

As a recovering academic, please please finish your paper before tinkering with software :) Good luck!

before I can seriously dive into, say, learning Lua the right way :) Thanks!

We do have good docs on Lua + Pandoc + Quarto for extension development: https://quarto.org/docs/extensions/filters.html and there are many folks in this forum with experience on it who help as well. Do reach out again in the future.

[rtbs-dev]

I also just realized that this behavior is pretty much exactly what obsidian-typst does, just using the obsidian ts api rather than pandoc/quarto.

Could be a helpful reference point, since even the syntax is pretty much exactly what I imagined.