4 ms·
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 https://github.com/Brostoffed/writemark
- NPM: https://www.npmjs.com/package/writemark-editor https://www.npmjs.com/package/writemark-editor
- teo_zero 2mo agoHow can it be defined dependency free if it depends on Node.js?
- _boffin_ 2mo agoDependency-free means zero runtime dependencies, not no dev tools. Could have explained that better.
- teo_zero 2mo agoDo you mean I don't need Node.js on the machine where I run it?
- songhonglei1985 2mo ago[flagged]
- chronicler 2mo agoit needs an operating system to run omg not dependency free
- jpease 2mo agoDoes this operating system also depend on an underlying computer?
- xyzzy_plugh 2mo agoYou're free to just step through the assembly manually. You might need some paper and a pen.
- stevesajeev 2mo agoIt ain't dependency free, if you need pen and paper.
- teo_zero 2mo agoLOL, 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?
- bpev 2mo agoi mean fwiw can prolly include direct script tag using something like https://esm.sh https://esm.sh
- yabdulaah52 2mo agoInline editing is underrated. Being able to see mistakes instantly cuts down a lot of the trial‑and‑error debugging in Markdown-heavy projects.
- tadfisher 2mo agoWhat does debugging Markdown even mean? What is a Markdown-heavy project? Is this a generated comment?
- mjcohen 2mo agoFor 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.
- 0n0n0m0uz 2mo agoi would never use markdown without it
- sheept 2mo agoIt'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: javascript:import('https://esm.sh/writemark-editor').then(() => document.body.append(document.createElement('writemark-editor')))
- _boffin_ 2mo agoHere you go: https://brostoffed.github.io/writemark/demo/ https://brostoffed.github.io/writemark/demo/
- Terretta 2mo agoFYSA: iPadOS 26.5 user here, cursor keys send the cursor to start of line. Clicking somewhere allows insert at that spot, but then arrows send cursor back to start of line again.
- _boffin_ 2mo agoFound out about 45 min ago about pretty much the lack of mobile creature comforts. Working on mobile clients right now. Will push improvements tonight.
- mcflysj 2mo ago[flagged]
- duffB 2mo ago[dead]
- lofaszvanitt 2mo agoWhen will we forget about markdown.... I feel like we are going backwards.
- _boffin_ 2mo agoHow so?
- lofaszvanitt 2mo agorich text editors > markdown
- euroderf 2mo agoRTF format is pretty powerful. I wonder what has held it back.
- lofaszvanitt 2mo agoNothing.
- janrakete 2mo agoNice work. Markdown has some more possibilities, see: https://github.com/lifeparticle/Markdown-Cheatsheet https://github.com/lifeparticle/Markdown-Cheatsheet