Show HN: TikZ Editor – WYSIWYG editor for figures in LaTeX

251

DDominikPeters about 5 hours ago 50 commentsRead Article on tikz.dev

FR version is available. Content is displayed in original English for accuracy.

Hi all! TikZ is a widely-used LaTeX package for drawing figures in papers. It uses commands like \draw[->] (0,0) -- (1,2); to draw lines, shapes, text, etc. Academics usually code up their figures by hand, so there is lots of twiddling around with the coordinates and recompiling until things look nice. I guess it’s a bit like SVG, but it’s more code than markup, for example it has loops with \foreach.

I built an open-source WYSIWYG TikZ editor (available for web and desktop) that allows you to edit your TikZ source code visually by dragging and resizing elements. It simultaneously shows the source code and the rendered figure, and lets you edit either one while the two views stay in sync. I’m not aware of any other editors that are simultaneously source editors and WYSIWYG (even for editing SVG or HTML), and I’m quite pleased with how well the combination works.

The way the app is implemented is by parsing the TikZ code, and at all times keeping track of the exact source location of each object. Thereby, when a user drags an element to a new position, the app can override just the numbers in the coordinate without changing anything else in the code (such as line breaks or indentation).

This approach essentially required reimplementing a large fraction of TikZ, which is the kind of task that no human would ever want to do. I think building software that doesn’t exist yet because it would be impossibly tedious to code up is one of the great new possibilities thanks to coding agents, and it’s worth brainstorming for other examples. (This app was built almost entirely by Codex.)

Implementing the app came with lots of fun side quests, including building converters from SVG / pptx / ipe to TikZ, re-implementing the LaTeX hyphenation and line-breaking algorithm to support multi-line nodes, and making a color picker that uses the red!20!black color mixing notation used in LaTeX papers.

⚡ Community Insights

Discussion Sentiment

92% Positive

Analyzed from 1570 words in the discussion.

Discussion (50 Comments)Read Original on HackerNews

gignico•about 1 hour ago

I've tried it now a little. The UI looks very cool, and generally the project is cool so congrats!

However, the generated TikZ code is not good in my opinion. Everything uses absolute coordinates, which in TikZ is seldom needed.

Just to start, if I place a single node I get absolute coordinates for it. Why? If you just write `\node {Hello};`, TikZ will put that at the center of the bounding box. No need to tell it's at `(0.5,2.91)` like it's happening in my test. Then features such as "align bottom" for a selection of multiple nodes should are manipulating the absolute coordinates instead of using TikZ's alignment features (anchors etc.).

I understand generating such code is more difficult. Maybe it can be something to point at for the next version, who knows...

DominikPeters•about 1 hour ago

Thanks, this is good feedback. I think the difficulty lies not so much in code generation, but determining what a user would expect. If I click the "align bottom" button, I would be surprised if

  \begin{tikzpicture}
    \draw (0,2) rectangle (1,1);
    \draw (1.5,2) rectangle (2.5,1);
  \end{tikzpicture}

suddenly were to get a new randomly named \coordinate and relative coordinate notation. On the other hand, if you start out with "nice" code, the app will in many cases refuse to let you drag things since it doesn't know (and in many cases can't know) what the drag should mean (do you change the named coordinate or change the offset to the coordinate etc).

Elsewhere in this discussion, we talked about positioning like "right of", and some good suggestions were made (https://news.ycombinator.com/item?id=48647683).

gignico•38 minutes ago

That's true for two `rectangle` paths, but for two nodes that's what I would expect as a user. Anyway, not an easy problem for sure.

asdewqqwer•26 minutes ago

Feel like could reference how those CAD script languages do it.

tombert•17 minutes ago

This is cool!

I know people like it, but I hate writing TikZ manually, to the point that I've mostly moved most of my technical-ish drawings to draw.io/diagrams.net, and then just export to a PNG. I feel like it's inelegant, but it works well enough and it's easy to make something that looks ok. Generally I'm all for text-defined stuff.

I have moved some of my stuff to Mermaid when I know my stuff is going to live in Markdown but I've not tried to get that working in TeX.

That said, I would like to use TikZ just because it's kind of the idiomatic way of doing diagrams in LaTeX, so a WYSIWYG might be useful.

One suggestion, I would like the arrows to be able to "attach" to the boxes, as in the arrow endpoints can move when you move the boxes. That's how draw.io does it.

lopsotronic•about 2 hours ago

Ah, I love CircuitiTikZ. Only way to do simple text-based circuit diagrams.

https://ctan.org/pkg/circuitikz?lang=en

https://github.com/circuitikz/circuitikz

Some years ago I wired it up with `asciidoctor-diagram` so we could have simple circuits in our Asciidoc maintenance manuals. The techs loved the hell out of it, and we could collaborate on the things in a git versioned ecosystem vs whatever fresh hell the PDM/ERP had for us.

A very nice complement to the already awesome WireViz (https://github.com/wireviz/WireViz)

j2kun•about 4 hours ago

Neat! I also enjoyed https://q.uiver.app/ by https://github.com/varkor which is a bit more specialized.

DominikPeters•about 4 hours ago

Yes, there are several editors for more specialized things. Other nice examples: https://tikzit.github.io/ and https://www.circuit2tikz.tf.fau.de/designer/ and https://tikzcd.yichuanshen.de/

ixsploit•about 2 hours ago

I used lyx during university. Was super happy. Still have all my homework and lecuture notes.

https://www.lyx.org/

master-lincoln•about 4 hours ago

As a student I really wanted something like this. Thanks for making it open source. My theoretical computer science prof happened to be Till Tantau the inventor of TikZ. An awesome communicator too.

DominikPeters•about 4 hours ago

Schleswig-Holsteiners are everywhere :) Till Tantau also started the beamer package for making LaTeX presentations. Both beamer and tikz are very important contributions to science communication.

mcswell•about 2 hours ago

I'm running Linux Mint (xfce version), and I installed the .deb version (TikZ.Editor_0.4.0_amd64.deb). It's very odd...for example, when I open it or do File/New, many (but not all) of the grid cells are rectangles, not squares. Am I doing something wrong, like installing the wrong version? Or maybe misinterpreting what the faint grey lines are?

DominikPeters•about 2 hours ago

Yeah that's odd, the grid should be square. Is the web version looking correct in the browser? Feel free to paste some screenshots into https://github.com/DominikPeters/tikz-editor/issues and I can look into it.

sorenjan•about 4 hours ago

Looks really nice. You might consider adding some presets to make it easier to get started, like some common neural net architectures and other use cases for TikZ.

DominikPeters•about 4 hours ago

Good idea. There is File > Open Example, but it could be extended for sure. On desktop you can even directly open an arXiv paper!

__mharrison__•about 4 hours ago

This is very cool, but I'm going to say the inevitable...

How hard would it be to support cetz? I'm not touching LaTeX if I can avoid it, but I'm using Typst all the time.

hw__•about 1 hour ago

Probably quite doable with a coding agent.

There is a full wysiwyg (vibe-coded) presentation software based on typst available which partially implements exactly that:

https://codeberg.org/presenst/presenst

wjholden•about 1 hour ago

Oh man, good on you identifying a product that needs to exist. I've used a few TikZ editors (both online and desktop) and none of them are just amazing.

But, I've taken my papers to Typst. Could you have the agent do the same thing for Cetz, the TikZ equivalent for Typst?

tombert•13 minutes ago

Tangential, but how has the publishing process been for Typst?

I'm looking to write a paper on a recent project, but most of the places I've seen to submit has asked for TeX. I greatly prefer Typst because of the ridiculously fast compilation times but I haven't used it for anything outside of school assignments do to that restriction.

DominikPeters•about 1 hour ago

I don't use Typst myself and am not familiar with Cetz. From the docs it looks like it's in early stages of development, so it doesn't feel like the right time to do this to me (or at least should be a separate, perhaps forked, app). But certainly it would make sense to develop bidirectional converters that could in particular be used at file open and file save in this app.

GL26•about 4 hours ago

All STEM students and researches from the world thank you

delta_p_delta_x•about 4 hours ago

This is superb. Will you consider adding support for pgfplots[1]? When I was a student I was long considering writing a native application for real-time TikZing.

[1]: https://ctan.org/pkg/pgfplots?lang=en

DominikPeters•about 4 hours ago

I think pgfplots should in principle be possible. I've postponed it thus far because pgfplots is GPL licensed, while the editor is MIT licensed, so I would need to distribute pgfplots support as a separate add-on. But in due course, putting in add-on infrastructure could make sense, because it would also allow adding support for stuff like tikzcd and CircuiTikZ (or tikzpingus!).

srean•about 3 hours ago

Is their anyone here old enough to remember Xfig ?

I was quite proud of the hours of work I had put in to configure it just so, with the 3d look and all.

bedstefar•about 2 hours ago

I do. I used it in the late noughts for my cryptology BSc because I was too lazy/busy to learn TikZ proper

srean•about 2 hours ago

Tikz by hand for busy diagrams can be a whole lot of work.

What I loved about Xfig was that one could use latex and latex fonts in the diagrams.

whatever1•about 4 hours ago

OMG! Psychiatrists are going to lose all of their graduate customers!

The world thanks you.

adityamwagh•about 4 hours ago

Hey! I've always wanted something like this! Thanks for building this!

Littice•about 4 hours ago

The killer feature for me is not drawing TikZ visually, but being able to touch old TikZ without turning the source into generated-looking soup.

DominikPeters•about 4 hours ago

Exactly, I wanted to avoid that. In contrast, if you open an SVG in (for example) Inkscape and make a minimal change and save, the resulting file has little to do with the original.

otto-riz•about 1 hour ago

> the kind of task that no human would ever want to do

I'm not an AI evangelist, but this kind of thing is such a welcome boon. More itches can be scratched!

meghanto•about 2 hours ago

Are you open to people repurposing this app as a plugin to larger apps like obsidian?

DominikPeters•about 1 hour ago

Generally yes! It is permissively licensed. I originally considered writing this app as a VS Code extension (because most app ideas that include a source editor are more simply done as an extension) but then decided that I wanted to have more control over the source view.

meghanto•about 1 hour ago

Perfect! I've been working on a general purpose Swiss army knife for technical note taking/ knowledge management/ sharing. This could very well be an add-on missing piece for heavier latex rendering and editing. Thank you!

dvorka•about 4 hours ago

I needed exactly this for years excellent work!

cckolon•about 2 hours ago

This is so cool. I would have loved this in college.

djmips•about 2 hours ago

"TikZ ist kein Zeichenprogramm" (German for "TikZ is not a drawing program"). :-)

DominikPeters•about 2 hours ago

An explanation for the name from the TikZ docs:

> TikZ’s name is intended to warn people that TikZ is not a program that you can use to draw graphics with your mouse or tablet. Rather, it is more like a “graphics language”.

While making the app I was worried that I was going against the TikZ philosophy. Maybe I should have named it "TikZ ist doch ein Zeichenprogramm" (TideZ)..

emil-lp•about 4 hours ago

Here's what I would need: the ability to position five nodes in a circular fashion, so that they are evenly spaced.

DominikPeters•about 4 hours ago

Intriguing thought. Of course by writing code it can be done

  \foreach \i in {1,...,5} {
    \node[circle, draw] (n\i) at ({90 - 72*(\i-1)}:1cm) {$\i$};
  }

but I'm not sure how to expose that as a UI in a nice way (maybe: if something uses polar coordinates and the user holds shift, then during drag the radius stays fixed, and I nudge towards even angular spacing + multiples of 15 degrees?)

e2e8•about 4 hours ago

That sounds like the array modifier in Blender

dima-quant•about 4 hours ago

This is great, nice concept! Good use of coding agents. Now I can make diagrams much faster.

hosteur•about 4 hours ago

Wow. I would have loved something like this when I was studying in University.

quantummagic•about 4 hours ago

Great job! Thank you for making it open source.

At some point the people who seethe with hate for AI, and claim it's all hallucinations and illegitimate hype, are going to have to admit they were wrong. Projects like this are the proof staring them right in the face, if they care to look.

Barbing•about 4 hours ago

They’ve updated their criticisms since - bottom of career ladder disruption, skill atrophy.

(Not on HN but I do still see some folks who last tested LLMs before Nov ‘25, those folks might still be mostly out of touch.)

cubefox•about 3 hours ago

That's cool. I guess it doesn't support TikZ' relative positioning (left of etc) because WYSIWYG features like drag-and-drop require absolute positioning?

DominikPeters•about 3 hours ago

It does support editing it if relative positioning is used in the code, i.e. if you drag the object it will continue being relatively positioned. But if you add new elements with the various tools, they will be absolutely positioned (not sure what would be a good UI for switching an element to relative positioning) unless you edit the source. You can try with

  \begin{tikzpicture}
    \node[draw] (A) at (0,0) {A};
    \node[draw, right of=A] (B) {B};
  \end{tikzpicture}

delta_p_delta_x•about 2 hours ago

> not sure what would be a good UI for switching an element to relative positioning

  1. Right-click on an existing object, offer drop-down context menu.
  2. Menu item `Position relative to...`.
  3. The cursor now selects _other_ objects in the field. 
     a. If there is no other object, then offer to create a new label-less node with (x,y); default to the origin.
     b. Once an object is selected, then offer `right of`, `left of`, `north of`, `south of`, `southeast of`, etc as a drop-down menu, and a field for radial displacement.
        i. As a stretch goal, offer a `Custom position...` button to specify an (x, y) displacement, or a polar angle and radial displacement. These three options (fixed offsets, Cartesian, polar) could also be tabs in the resultant menu from (b) above.

You could use this same UI/UX for `anchor`, too.

david_2107•about 4 hours ago

That's awesome! Long overdue.

k33n•about 4 hours ago

Wow, this is really, really great. Congratulations on an excellent offering and piece of tech!