I'm guessing this has been done in a thread before, but I've just spent two hours reading various threads and cannot get my head around a very basic question.

Long story short: I'm trying to create dynamic equations/diagrams in a web browser for a homework generator. So far I've been using MathJax and loving it for the equation side of things. It's very simple as I just need to include a single line of Javascript code and then I'm good to start coding:

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['|','|'], ['\\ 
<script type="text/javascript"
  src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX- AMS-MML_HTMLorMML">

$x = rand(2,5);
echo "x|^2| = ".pow($x,2).", so x = |\pm|$x";

And it correctly turns that into the equation form on the browser.

Now, my goal is to do the same sort of thing with TikZ so I can create triangles and so forth on the fly using code like:

$vertex1 = rand(2,5);
$vertex2 = rand(2,5);
\documentclass[12pt, border=5mm]{standalone}
\draw (0,0) node[anchor=north]{$A$}
  -- (<? echo $vertex1; ?>,0) node[anchor=north]{$C$}
  -- (<? echo $vertex1; ?>,<? echo $vertex2; ?>) node[anchor=south]{$B$}
  -- cycle;

So my first question, which I think is answered "no" but is worth checking anyhow - is there a simple way to call TikZ in Javascript as with MathJax? Because that would be amazing.

If not, how can I get to a place where I can actually use TikZ from HTML/Javascript? I believe that some websites show TikZ code, but I cannot find any documentation on this (everything just assumes I'm using a LaTeX program that can summon TikZ with a simple \usepackage{tikz} call, which I don't think MathJax can do).

For now, I'm running my scripts on a localhost my Macbook via MAMP, but eventually I would like to move it to an actual web server - but if it comes down to needing to install it at a root level, I can look into that. Just need some clear explanations since I'm really new to the technical side of LaTeX.

  • 2
    Which stackexchange site shows tikz output? Amaze me.
    – Johannes_B
    Commented May 20, 2018 at 4:49
  • @Johannes_B Oops! Turns out the stackexchange page was just an image of a tikz output. Not sure if that was itself generated (as I've read some things about being able to run the code and output it as a PNG instead of HTML/CSS?) or just an image created in a program and uploaded, but you are correct, it wasn't what I thought. I have read of other sites that do it though, unless that source was inaccurate?
    – Alex Gold
    Commented May 20, 2018 at 4:55
  • Off-topic, just like this one: tex.stackexchange.com/questions/295894/… Commented May 20, 2018 at 6:16
  • I don't thing that there is a javascript interpreter of TikZ (even in TeXLive.js TikZ is missing). So in any case you will need some server compilation. Probably the simplest way will be to use clsi-sharelatex and then to send the code to compile and recover the result using ajax.
    – Kpym
    Commented May 20, 2018 at 7:04
  • 1
    There is something called KaTeX which is capable but I don't know the details
    – percusse
    Commented May 20, 2018 at 7:33


Browse other questions tagged .