Nitpicking a bit: it's not as much _rendering_ markdown as it's _syntax highlighting_ it. Another interesting approach there could be to use the CSS Custom Highlight API [0]. Then it wouldn't need the preview div, and perhaps it'd even be possible to have non-mono fonts and varying size text for headers.

[0] https://developer.mozilla.org/en-US/docs/Web/API/CSS_Custom_...

Some links I've collected in the past that describe this approach:

- https://css-tricks.com/creating-an-editable-textarea-that-su...

- https://github.com/WebCoder49/code-input

I believe https://grugnotes.com also does this for markdown.

For https://grack.com/demos/adventure/, I used a hidden <input text> for something similar. I wanted to take advantage of paste/selection and all the other goodies of text, but with fully-integrated styling.

Like you, I found that standard text input boxes were far more interesting than contentEditable because they're just so simple overall.

I think there's probably an interesting middle ground here where you render real markdown with the textarea effectively fully hidden (but still with focus), emulate the selection events of the rendered markup into the textarea, and basically get a beautiful editor with all the textarea solidness.

I also made a similar thing a while ago called contextarea.com, maybe, I should add overtype!

The text overlay approach doesn't work if you want width-affecting/height style changes (I assume) since that'd cause the overlay to stop matching. The downside is contenteditable cursor movement is broken for inexplicable reasons.

https://sylvainpolletvillard.github.io/spell/demo.html

One thing that would be great is a bit better support for lists (todos, unordered and ordered) where when you press enter once it will add another `-` or `- [ ]`, etc item and when you press it a second time it becomes a blank line.

(It works fine in Chrome on the same Android phone. Android 16, Firefox 141.0.3)

I noticed on the site the really cool animation you got has a 1px solid border on one of the overlays in firefox. Figure you might care since it's clearly supposed to be flashy.

I noticed toolbar is missing from options doc, reason I went looking was if I could add my own custom button to the toolbar

> A PEAK UNDER THE HOOD

I think you meant "PEEK"

[0]: https://github.com/MeanderingProgrammer/render-markdown.nvim

Anyway, nice work mate.

https://www.texteditors.dev

(Btw, there might be a typo on the landing page on the set up part. There is 2 times de <div> instead of the textarea i guess;))

Edit: and the link to the Github is brocken

Only down side to it is that you cant apply any padding to the styled inline elements.

A natural extension seems to be a source code editor with syntax highlighting, like those used in https://marimo.io/, Jupyter, https://plutojl.org/ and other notebook-like Web editors.

That supports color coding for different languages?

The animation shows variable-pitch fonts, but the demo seems to be all the same fixed-pitch font for me. (On Firefox ESR and Chromium.)

And how does this handle rendering larger documents?

https://medv.io/codejar/

I have a couple projects I could see this being really useful in, at least as an option instead of pure plain text. I still feel like consumers don't like markdown though, it's frustrating.

One thing I noticed, when doing a list (bullet, numbered etc) it would be great if the list continued on barrage return (enter) - most general users would expect that I think.

That's it, I am loving it.