Write Letters using Markdown

Writing letters on Linux can be a pretty frustrating experience. Maybe I'm too demanding, but I'd like my letters to adhere to certain standards. With regards to letters (which I'm writing maybe once a year or so), the German DIN 5008 specifies how a letter should be laid out. And of course - as anybody would - I want my letters to comply with that standard.

Joking aside, I'm just tired of manually creating letters where I eyeball the layout somewhat, so that everything looks as expected. Unfortunately, my Linux word processor of choice "LibreOffice" is not really satisfactory when it comes to writing letters. It does have some letter template functionality, but I just could not wrap my head around the clunky UI.

Being in urgent need of writing a letter and being a web developer, I developed a small application which let's me (and you!) write German DIN 5008-compliant letters in your browser, no server involved (besides serving the application itself of course). Being based on Markdown, I named it MD Letter.

Technical Choices

With this project, I finally gave Web Components a shot. Since I wanted the development experience to be as smooth as possible, I tried to go the no-build route, i.e. I didn't want a separate build step for my frontend code. This was definitely harder than expected, as most (all?) Web Component libraries I tried expect some kind of build step. In the end, I settled for the popular choice Lit and used the bundled version, which might not be optimal in terms of initial download size, but that's a trade-off I'm willing to make.

Going no-build means that I don't get to enjoy TypeScript support, but for the components I wrote this was totally fine.

For the styling, I used TailwindCSS. Using Tailwind's print: prefix, I was able to style the printed version of the page according to my needs. Still, I found all this print styling turns out to be quite brittle, when it comes to responsive styling. In the end, the site Works On My Machine™ and fulfills my needs.

Using Markdown

I'm not a fan of WYSIWYG editors, so I wanted to write my letter using Markdown. Combined with web components, a surprising implementation opportunity revealed itself: Because markdown (or rather markedjs) renders HTML elements as-is into the DOM, this means that we can use web components in our markdown, which then get rendered however we want.

In my case, I wanted a nice way to upload images (i.e. a logo or a signature). So I created a web component named md-img that you can use anywhere in the letter. For example, you could include <md-img id="signature" width="3cm"></md-img> into your letter. During editing, this displays a nice widget to upload an image or draw a signature. During printing, this just shows the image itself. Combined with local-storage, this let's me include the same signature in all my letters easily.

Conclusion

All in all I'm really happy about how this turned out. Using web components was actually kind-of fun, though I'd welcome better no-build solutions. Of course, I invite you to try MD Letter out yourself. If you have any feedback, feel free to contact me (somehow).