Typst WYSIWYG Word Processor

Showcase
1

I really like typst, but some people I work with aren’t very comfortable with the raw nature of writing typst files.

I’ve seen that there are similar approaches like TyX which are great, but I wanted a more word processor like feeling. I asked claude to help with it and have a prototype ready: GitHub - ortic/typst-wysiwyg · GitHub

What do you think about this? Is this something interesting to others?

3 Likes
2

Yes I agree this would be useful, in fact I had hoped the Typst.app webapp was actually this! (A WYSIWYG editor that also has Typst-level granular controls.)

The only potential drawback I see to your approach - it sounds like manually tweaking the Typst code could break the editor’s capabilities? As a “back seat driver” with no real experience in what you’ve accomplished here, I would have hoped a WSYIWYG editor could use the basic Typst code (without needing to overload via comments), too bad that didn’t really work in your case; I guess I don’t know what other states need to be stored beyond the regular Typst code.

3

Installing Typst WYSIWYG on my Ubuntu 25.10 machine was straight forward. And my reaction is:

Damn!

This is a very impressive word processor. I’ll be kicking the tires so to speak and following OP’s progress at the GitHub repository.

Thanks for sharing this, Remo!

4

It doesn’t require comments to function, but it’s true that manually changing the .typ files can break the WYSIWYG editor. The real problem is that Typst supports a wide array of programming language features. Visualizing those in a true WYSIWYG manner can be tricky, if not impossible. If you throw a complex document at the editor, it will most likely struggle. There might be a way to display certain elements in a “raw” view to ensure it at least doesn’t break and saves the document exactly as it was loaded, but that’s probably as far as it can go.

UPDATE: Sorry, I think it does require some comments, I’ll ask Claude to check that.

5

The parsing is a bit smarter and we can load and save a lot more typ files without breaking them. Still far from perfect, but already usable in some simple use cases. The source field is now editable, there’s a zoom features and lots more.

6

Sounds pretty interesting, and using your demo in the browser is quite fun!

I am wondering though if for your use case “some people I work with aren’t very comfortable with the raw nature of writing typst files” such a WYSIWYG editor would help. Would it be beneficial for those users that the editor is based on Typst? Or is the idea here that the users use the WYSIWYG editor to become more familiar with the concepts and syntax of Typst[1]?

I noticed two small issues:

  • In the Typst preview pane links are not underlined and blue.
  • Trying to format only part of a word as bold or underlined causes either a syntax error (e.g. when formatting “test”) or the Typst markup to appear literally (e.g. when formatting “test”)

  1. Though a risk might be that the generated Typst code is not idiomatic. ↩︎

7

Thanks for your feedback.

  • In my case it’s more that some users will have to edit existing typ files. For this, the editor is sufficient. I don’t think we can have a full WYSIWYG experience since some more dynamic features of typst are too complex. I’m trying to at least show them, even if it’s a code block and ensure they don’t get lost when saving.
  • Partial formatting has been fixed, thanks for reporting this
  • There’s a default rule in the template so that links look more like in the editor. This will probably always be a problem, if you add a rule it’s not reflected in the HTML editor and hence looks a bit different. While we can maybe parse some rules, getting 100% is probably not feasible.
8

I love the way how Typora do it with Markdown (and HTML) language. Maybe you should look on that.

9

Hi! I’m adding the project to :memo: Writing — Best of Typst (TCDM). Could you add a repo description on GitHub? It’ll be automatically fetched by TCDM, and it also people find the repo. (To do so, go to the same place that you set the repo homepage.)

1 Like
10

Thanks, that looks very slick indeed. I guess with the six dotted icon I’m fairly close, I’d basically have to hide the toolbar and improve the inline editing functionality. I’ll think about it!

11

Great thanks, description added

1 Like