search

kisonecat / tikzjax

TikZJax is TikZ running under WebAssembly in the browser
LaTeX Project Public License v1.3c
437 stars 36 forks source link

Using it with NextJs #24

Open danielx-art opened 9 months ago

danielx-art commented 9 months ago

I'm trying to use TikZJax with Next. In the Next docs, they have a Script component to handle importing external scripts, which I use to import TikZJax; and also to write inline scripts, which I use to write the tikzcode itself. However, it seems that the code is not executing and the tikzpicture is not rendering. Idealy, I want to make it interactive, where the user can chance the tikz picture properties and it will be re-rendered. Does anyone know how to achieve this?

kisonecat commented 9 months ago

The version here doesn't have a nice method for handling this. If you edit this, in the window.onload you can add something like window.process_tikz = process after the definition of process so you can then call process_tikz to re-run TeX. This is what the live demo at https://tikzjax-demo.glitch.me/ build by @christianp does.

danielx-art commented 8 months ago

Hm... I see, If this is not too incovenient, can you please explain it to me how this is done with a little bit more detail so I can replicate it? Regardless, thanks very much for the response.

igloo1505 commented 7 months ago

The version here doesn't have a nice method for handling this. If you edit this, in the window.onload you can add something like window.process_tikz = process after the definition of process so you can then call process_tikz to re-run TeX. This is what the live demo at tikzjax-demo.glitch.me build by @christianp does.

I assume you're busy, but would it be possible to add something to the docs about cloning this into an existing project? Like not so much the implementation, but as a way of building the repo (I believe there's some missing files not hosted on Github), and maybe exposing just the main function? I've been a developer for almost 10 years and I still don't know a thing about web assembly.

I'm trying to do something fairly similar to @danielx-art. Not so much re-rendering things, but just running some functions after the svg is initially rendered to change some css around, also in a Next app. I managed to get things working with a MutationObserver, but being able to run things locally would open up the door to some tinkering and maybe doing something more interactive.

Thanks! And awesome repo regardless.