Show HN: Writemark, a dependency free web component for inline Markdown editing
I like writing Markdown, but do not like writing it inside a plain textarea.
I wanted something I could use anywhere by dropping in a single web component:
```
<writemark-editor name="body"></writemark-editor>
```
That became Writemark.
It renders Markdown while you write, but Markdown remains the value you read, store, and submit. It also has source, split, and preview modes, along with slash commands, tables, task lists, code blocks, native form support, and an API for adding your own controls. There are no runtime dependencies and no required framework or built in toolbar.
It is fully vibecoded. The process was very iterative. I knocked something out, tried using it, found bugs, fixed them, and repeated that cycle until I had something I liked writing in and that performed reasonably well.
It did not begin as an experiment about AI generated software -- just did not want to use textareas anymore. I like Markdown, and I wanted one component that I could use anywhere without bringing along an entire editor framework.
It is still very young. The parser is handwritten, the component is essentially one large JavaScript file, and I am certain there are edge cases waiting to be found. If you find one, I am happy to fix it.
I have tried to give it a decent safety net. It currently has 951 Playwright checks across Chromium, Firefox, and WebKit, along with hostile input cases, sanitizer fuzzing, and differential tests against CommonMark.
I built this because I wanted it for myself, but I think it turned into something kind of cool. I hope some of you enjoy it. I would love hearing what you think, especially if you try it and manage to break something.
- Github: https://github.com/Brostoffed/writemark
Nice work.
Markdown has some more possibilities, see: https://github.com/lifeparticle/Markdown-Cheatsheet
Inline editing is underrated. Being able to see mistakes instantly cuts down a lot of the trial‑and‑error debugging in Markdown-heavy projects.
What does debugging Markdown even mean?
What is a Markdown-heavy project?
Is this a generated comment?
For math.stackexchange.com which uses MathJax, I use MacDown, a markdown editor with parallel windows, one showing the MathJax and the other (in real time) the rendered math. I find it essential.
I enter my math directly into the editor without writing anything on paper. Works for me. The ability to copy and paste is invaluable.
It'd be nice if there was a live demo without needing to clone the repo. Though I suppose I could just try it out with a bookmarklet:
Here you go: https://brostoffed.github.io/writemark/demo/
When will we forget about markdown.... I feel like we are going backwards.
How so?
rich text editors > markdown
RTF format is pretty powerful. I wonder what has held it back.
How can it be defined dependency free if it depends on Node.js?
Dependency-free means zero runtime dependencies, not no dev tools. Could have explained that better.
Do you mean I don't need Node.js on the machine where I run it?
It's a web component so you run it in the browser without dependencies after it's already been built with Node.
Doesn’t need to be built by node. It’s standalone.
[flagged]
it needs an operating system to run omg not dependency free
LOL, and an internet connection, too!
But, seriously, of course "web" requires internet and a computer and an operating system. But since when "web" also means Node.js?
If a web component is advertized as dependency free, I expect something that I can include in a <script> tag and it works. Am I wrong?
i mean fwiw can prolly include direct script tag using something like https://esm.sh
Does this operating system also depend on an underlying computer?
You're free to just step through the assembly manually. You might need some paper and a pen.
It ain't dependency free, if you need pen and paper.
[flagged]
[dead]