SnapTex is a snappy web-based LaTeX editor that is designed to be easy to use for beginners. This LaTeX editor is equipped with built-in snippets for quick and easy LaTeX editing or writing without having to memorize complicated syntax.
I used Gemini and Claude to help with debugging and setting up Vite and React.
I made a web-based LaTeX editor with built-in snippets and tab-autocomplete for quick and easy LaTeX editing without having to memorize complicated syntax. The most challenging part of this project was setting up React, Vite, and KaTeX since I have no experience at all in working with those tools. I eventually managed to overcome those problem by watching tutorial videos and reading documentations I could find online though. I’m most proud of the autosave and version history of this project since it makes the website look really professional and nice to use. I’m also very happy to finally be able to make the rendering of the LaTeX work properly.
In this update, I’ve added more themes (System, Light, Dark, Sepia) for the site. The System mode will automatically follow your browser/device theme settings (light or dark), while Sepia gives a yellowish, calm, and moody theme across your workspace. I’ve also edited the documentation overlay to maintain a constant size across different tabs for better UX. In addition to the documentation on the main site, you can now find the complete documentation on the GitHub repository (https://github.com/xaviershilosaputra/SnapTex/blob/main/docs/documentation.md).
All contributions are welcome! This project is licensed under the MIT license, so you are free to modify, remix, or build upon this project. In terms of accessibility, all overlays in this site can be closed by clicking the area outside the panel, using the close button, or using the Esc key.
I initially experienced some difficulty in setting up React and Vite since it’s my first time using those tools, and I didn’t have any background with KaTeX or advanced LaTeX. However, I managed to overcome those issues by watching tutorial videos and reading documentation, and I learned a lot about LaTeX along the way. (It was not that easy!) But that actually shows that this project solves a real problem and makes me motivated to develop this project so that LaTeX editing becomes easy for everyone (as easy as using Google Docs or Scratch/Pictoblox).
Log in to leave a comment
This is my first devlog of SnapTex! SnapTex is a web-based LaTeX editor designed to be snappy and easy to use by using prebuilt snippets. This LaTeX editor tool is built with React 18 and Vite, as well as KaTeX for the LaTeX engine. One of the core features of this editor is the toolbox, or sidebar, that allows people to easily create a math expression using LaTeX and tab autocomplete, just like the one in VS Code. You can type shorthands like \fr or \al and hit Tab to expand them instantly.
I’ve also included a quick-insert toolbar for common symbols and a searchable “All functions” grid to help you find any shorthand you need. It also has some quality-of-life features, such as autosave every 2 seconds, manual version history snapshots, and a live preview that renders everything in real time. There is even a “Recently used” section so you never have to hunt for the same symbol twice. Everything is saved in LocalStorage, so no account, server, or setup is needed beyond cloning the repo. It all survives a page refresh. You can also export your work as a PDF, SVG, or a .tex file whenever you’re done.
For future updates, I’ll add more snippets covering physics and chemistry and support for additional text formatting (just like a combination of Google Docs and Overleaf). I’m also planning to improve mobile support and I’m even considering adding drag-and-drop “block coding” style writing to help beginners use LaTeX.
Log in to leave a comment