Show HN: Writemark, a dependency free web component for inline Markdown editing

Posted by _boffin_ 1 day ago

Counter53Comment23OpenOriginal

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

- NPM: https://www.npmjs.com/package/writemark-editor

Comments

Comment by yabdulaah52 1 day ago

Inline editing is underrated. Being able to see mistakes instantly cuts down a lot of the trial‑and‑error debugging in Markdown-heavy projects.

Comment by tadfisher 1 day ago

What does debugging Markdown even mean?

What is a Markdown-heavy project?

Is this a generated comment?

Comment by mjcohen 1 day ago

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.

Comment by janrakete 23 hours ago

Nice work.

Markdown has some more possibilities, see: https://github.com/lifeparticle/Markdown-Cheatsheet

Comment by sheept 1 day ago

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:

    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

FYSA: 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.

Comment by _boffin_ 17 hours ago

Found out about 45 min ago about pretty much the lack of mobile creature comforts.

Working on mobile clients right now. Will push improvements tonight.

Comment by lofaszvanitt 1 day ago

When will we forget about markdown.... I feel like we are going backwards.

Comment by _boffin_ 1 day ago

How so?

Comment by lofaszvanitt 1 day ago

rich text editors > markdown

Comment by euroderf 1 day ago

RTF format is pretty powerful. I wonder what has held it back.

Comment by teo_zero 1 day ago

How can it be defined dependency free if it depends on Node.js?

Comment by _boffin_ 1 day ago

Dependency-free means zero runtime dependencies, not no dev tools. Could have explained that better.

Comment by teo_zero 1 day ago

Do you mean I don't need Node.js on the machine where I run it?

Comment by jjice 1 day ago

It's a web component so you run it in the browser without dependencies after it's already been built with Node.

Comment by _boffin_ 1 day ago

Doesn’t need to be built by node. It’s standalone.

Comment by songhonglei1985 1 day ago

[flagged]

Comment by chronicler 1 day ago

it needs an operating system to run omg not dependency free

Comment by teo_zero 1 day ago

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?

Comment by bpev 1 day ago

i mean fwiw can prolly include direct script tag using something like https://esm.sh

Comment by jpease 1 day ago

Does this operating system also depend on an underlying computer?

Comment by xyzzy_plugh 1 day ago

You're free to just step through the assembly manually. You might need some paper and a pen.

Comment by stevesajeev 1 day ago

It ain't dependency free, if you need pen and paper.

Comment by mcflysj 1 day ago

[flagged]

Comment by duffB 1 day ago

[dead]