Minimal Tree Sitter Powered Text Editor for the Web

Hi,

I find Tree Sitter to be the best thing since sliced bread.

Unfortunately I am having a hard time to find a minimal text editor component with syntax highlighting using Tree Sitter - something like just the colors from it in a cut down version of Scintilla but for use in the browser.

Can be either JS or WASM. Is there anything available? Browsing GitHub most related projects are archived and no longer working.

I just wanted the coloring and the rest I can handle on top of it. I am asking here since there’s no specific forum for Tree Sitter.

Thanks!

May I ask why the need for Tree Sitter syntax highlighting? I’ve played around with Ace for in-browser usage and it works great. You can even use Monaco, the editor from VSCode. But AFAIK none of them use Tree Sitter.

Sure! My usage is with my own languages and Tree Sitter is super nice to maintain. Writing, testing, every step is pure fun. And it is so fast!

Writing TextMate grammars on the other hand is painful. Alternatively to Tree Sitter I would just roll my own tools because my experience with everything else has not been good, but maybe there’s some other thing new that is deserving of attention that I didn’t look into exists though.

I have written some languages but never used Tree Sitter. It’s in my TODO list :stuck_out_tongue: I have written some TextMate grammars though and once you get the hang of it it’s not really that bad. What sucks is that it’s not really testable though. And there’s some repetition, I’d love it if you can just at least save a regex in a variable and reference it later, but it gets the job done with minimal hassle.

The Ace editor has a similar state machine like tokenizer. I used it to create syntax highlighting for Pasukon, my parser generator library. It took some time getting used to the way they do things but the tokenizer itself was quite easy to write.

1 Like

That’s very cool! I learned about Ace in a talk from Ben Smith, it’s really beautiful! It does use TextMate grammar. XD

I have an old Macbook that I run TextMate in an offline mental zen state (I also have it’s old book!) if I have too, but the manual test makes the whole thing very slow for me. I probably need to learn a new way to write the thing using VSCode, maybe this will speedup the process.

If you have the time I urge using Tree Sitter while it’s alive. It’s so easy, very refreshing! There are some LSP projects floating around that use it that you can modify and plug your tree sitter parser in place that are very useful!

JetBrains also has a very cool product for making “JetBrains IDEs”, called MPS, targeting domain specific languages - but you sort of write the ast and not text, it’s a bit hard to explain, but it’s free so one can just download and test it.