By
@jupeme6
A markdown note editor called Margen, built with a "digital typewriter" aesthetic. The app is a three-column layout: a sidebar with the list of notes, a raw markdown editor pane, and a live preview pane that renders the markdown as you type. The markdown parser is written from scratch, no marked.js or any library, just a chain of regex replaces.
What did you make?
A markdown note editor called Margen, built with a “digital typewriter” aesthetic. The app is a three-column layout: a sidebar with the list of notes, a raw markdown editor pane, and a live preview pane that renders the markdown as you type. The markdown parser is written from scratch, no marked.js or any library, just a chain of regex and line-by-line processing.
Built in four planned betas, currently on Beta 3. Beta 1 was the basics: editor, preview, note list, search, auto-save. Beta 2 fixed a bug where opening a note to read it would mark it as modified, added a markdown cheat sheet accessible via a button, and rewrote the markdown parser which had bugs with lists, blockquotes and code blocks. Beta 3 added LaTeX support via KaTeX for math formulas, a formula toolbar with 16 buttons that insert LaTeX at the cursor so you don’t need to know LaTeX syntax, a dark mode with a warm dark palette, and an ES/EN language toggle.
Everything is local-first, stored in localStorage, no account, no server, no tracking. The goal is a clean, offline place to write university notes with formulas, without the bloat of Notion or the online-only dependency of most editors.
What was challenging?
The markdown parser was the hardest part. My first version used a single regex per element type, which broke on multi-line constructs like lists and blockquotes. The blockquote bug was sneaky: after escaping HTML, the > character becomes >, but my regex was looking for > literally, so blockquotes never matched. Rewrote the parser to process line by line, opening and closing ul/ol/blockquote tags as it goes, and protecting code blocks in a temporary array so other regexes don’t touch them.
The LaTeX integration had a loading order issue. KaTeX loads from CDN asynchronously, so the first renderMathInElement call would fail because the library wasn’t ready yet. Had to chain the loads: first KaTeX CSS, then KaTeX JS, then the auto-render extension, and only then try to render. If a formula has a syntax error, I set throwOnError to false so it shows the raw LaTeX instead of breaking the whole preview.
The dirty flag bug from Beta 2 was a design problem. Before, every time you opened a note it would save with modificada=now and jump to the top of the sidebar, which made browsing notes frustrating. Had to track whether the user actually changed anything before marking a note as modified.
What are you proud of?
The markdown parser, written entirely from scratch, no library. About 150 lines of regex and line-by-line processing, handles headers, bold, italic, lists, code blocks, inline code, links, images, blockquotes and horizontal rules. The formula toolbar with 16 buttons that insert LaTeX at the cursor position, so you can write math without knowing LaTeX syntax. And the “digital typewriter” aesthetic: Bitter serif for rendered content, Inter for UI, JetBrains Mono for the raw editor, thin dividing lines instead of cards or shadows.
What should people know so they can test your project?
Open the demo URL. A welcome note with markdown examples appears on first launch. Click the + button in the sidebar to create a new note. Type markdown in the left pane, see it rendered live in the right pane. Click the ? button to open a markdown cheat sheet. Click the “formulas” button in the editor header to open a toolbar with 16 math buttons (square root, integral, fraction, etc.) that insert LaTeX at the cursor. Click the “ajustes” button to switch between light/dark mode and ES/EN language. Notes auto-save to localStorage, nothing is sent anywhere.
Live demo: https://notjuangamer10.github.io/margen/
Source: https://github.com/notjuangamer10/margen
Beta 3 of Margen adds LaTeX support, dark mode and multi-language.
LaTeX is the big one. KaTeX loads from CDN the first time you need it,
then renders $…$ as inline math and $$…$$ as block math. So you can
write $E=mc^2$ inline or a full integral in a block. If a formula has
an error it just shows the raw text instead of breaking the preview.
The formula toolbar was important to me because I don’t know LaTeX
syntax by heart. A “formulas” button in the editor header opens a bar
with 16 buttons: square root, integral, fraction, superscript,
subscript, sum, limit, Greek letters, infinity, plus-minus, inequalities,
arrows. Click one and it inserts the LaTeX at the cursor position, then
you just fill in the blanks. No need to remember that integral is
\int_{}^{} or that fraction is \frac{}{}.
Dark mode uses a warm dark palette instead of the usual cold gray, so
it still feels like the typewriter aesthetic. The toggle is in a settings
panel in the sidebar, along with an ES/EN language switch that
translates the whole UI.
Next version will be the last: code syntax highlighting, PDF export,
and PWA installable for offline use on desktop and Android.
But I’m starting to get tired, so i wil be on vacation for the next week!
Beta 2 of Margen fixes a usability bug and adds helpful features.
Fixed the modified timestamp bug. Before, every time you opened a note
to read it, it would save with modificada=now and jump to the top of the
sidebar list. Now there is a dirty flag that tracks whether you actually
changed anything. Opening a note to read it does not mark it as
modified. The sidebar list stays stable when you are just browsing.
Added a markdown cheat sheet. A ? button in the sidebar opens a floating
panel with the full syntax: headers, bold, italic, lists, code blocks,
links, images, blockquotes, horizontal rules. Useful for when you forget
how to do something without leaving the editor.
Also added a welcome note that appears on first launch with examples of
every markdown feature rendered in the preview. You can delete it if you
want.
Changed the typography from Source Serif 4 to Bitter, a slab serif that
gives a more typewriter feel without being monospaced. Still legible,
but more character.
I personally like this version, this is like, the base of what i want to build, i would leave it like this and thats it, but I feel that i can get better at coding if i just add more things, it would be more usefull
Started a new project called Margen, a markdown note editor for
university notes. The idea came from wanting a clean, offline place to
write notes with formulas, without the bloat of Notion or the
online-only dependency of most editors.
Beta 1 is the basics. A three-column layout: sidebar with the list of
notes, editor pane with a monospace textarea, and a live preview pane
that renders markdown as you type. The markdown parser is written from
scratch, no marked.js or any library, just a chain of regex replaces
handling headers, bold, italic, lists, code blocks, inline code, links,
images, blockquotes and horizontal rules.
The design is “digital typewriter”: white background, serif typography
for the rendered content, monospace for the raw editor, thin dividing
lines instead of cards or shadows. The aesthetic is deliberately calm
and distraction-free, like iA Writer or Bear.
Notes auto-save to localStorage 400ms after you stop typing. There is
also a Ctrl+S shortcut for manual save. The sidebar shows title, first
line preview and relative date for each note, and filters instantly as
you type in the search bar.
Next version will add subjects (folders), tags, and better organization.
