Show HN: Writemark, a dependency free web component for inline Markdown editing
Posted by _boffin_ 1 day ago
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
Comments
Comment by yabdulaah52 1 day ago
Comment by tadfisher 1 day ago
What is a Markdown-heavy project?
Is this a generated comment?
Comment by mjcohen 1 day ago
I enter my math directly into the editor without writing anything on paper. Works for me. The ability to copy and paste is invaluable.
Comment by janrakete 23 hours ago
Markdown has some more possibilities, see: https://github.com/lifeparticle/Markdown-Cheatsheet
Comment by sheept 1 day ago
javascript:import('https://esm.sh/writemark-editor').then(() => document.body.append(document.createElement('writemark-editor')))Comment by _boffin_ 1 day ago
Comment by Terretta 17 hours ago
Comment by _boffin_ 17 hours ago
Working on mobile clients right now. Will push improvements tonight.
Comment by lofaszvanitt 1 day ago
Comment by _boffin_ 1 day ago
Comment by lofaszvanitt 1 day ago
Comment by euroderf 1 day ago
Comment by teo_zero 1 day ago
Comment by _boffin_ 1 day ago
Comment by teo_zero 1 day ago
Comment by songhonglei1985 1 day ago
Comment by chronicler 1 day ago
Comment by teo_zero 1 day ago
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?
Comment by bpev 1 day ago
Comment by jpease 1 day ago
Comment by xyzzy_plugh 1 day ago
Comment by stevesajeev 1 day ago
Comment by mcflysj 1 day ago
Comment by duffB 1 day ago