This is a copy of the Github readme.
Find the original on


Render markdown to html client-side in the browser with WASM.
version: 2023 date: 2023-11-17 author: repository: GitHub

status Hits

Hashtags: #tutorial #markdown #wasm
My projects on GitHub are more like a tutorial than a finished product: bestia-dev tutorials.

Try it


Markdown is great! It is as easy as plain text but renders in a beautiful style that I could never achieve on my own in some Rich text or HTML.
The syntax is super easy and it is human readable in both plain text and HTML format.
In VSCode and many other editors, I can write Markdown files, and insert images and links. Then there is a Preview panel to watch how it renders.

Usually, the markdown syntax is rendered to HTML. Many libraries do that.
I chose because it can be used inside a browser on the client side.

Publish to Web

Now I want to publish these markdown files to the Web. I have a small web server. I copy all the files there.
No luck! Web browsers don't recognize and render markdown, just HTML.

I could use a server-side filter for Nginx or write my own Rust web app, but that is overkill.
I find it attractive to use Wasm in the browser to render the .md files on the fly.
I found this library: written in Rust and compiled to wasm.
With some glue files and JavaScript, it is easy to make it work.

Files on the Web server

For this to work I need a simple Web server that returns files, nothing more. No dynamic web app or anything exotic.
It will not work without a Web server on the local disk, because wasm files must be fetched from a Web server because of security.
Let's start with index.html. It will just redirect to the HTML file with JavaScript, adding the file as a parameter.


The javascript program is all in the mdtohtml.html. There is some simple code to accept a URL parameter.
I also regex replaced the links inside the markdown to work with the new indirection.
For simplicity I don't bother with subfolders. All .md files must be in the same folder.
And then we call the markdown.parse() method from the wasm module.
Sure we have to add some beautiful CSS that is similar to GitHub markdown.

<!doctype html>
        <html lang="en-US">
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="github-markdown.css">
            <script src="markdown.js"></script>
                async function fetch_md_convert_to_html() {
                    let params =;
                    if (params==''){
                        params = "?";
                    let mdFile = params.substring(1);
                    const response = await fetch(mdFile);
                    let mdText = await response.text();
                    mdText = mdText.replaceAll(/(\[.*\]\()(.*\.md\))/g, '$1mdtohtml.html?$2'); 
                .markdown-body {
                    box-sizing: border-box;
                    min-width: 200px;
                    max-width: 980px;
                    margin: 0 auto;
                    padding: 45px;
                @media (max-width: 767px) {
                    .markdown-body {
                        padding: 15px;
        <body class="markdown-body">

We need to add the magic ingredients to the folder: markdown.js, markdown.wasm, github-markdown.css

and voila! It works.

open-source and free as a beer

My open-source projects are free as a beer (MIT license).
I just love programming.
But I need also to drink. If you find my projects and tutorials helpful, please buy me a beer by donating to my PayPal.
You know the price of a beer in your local bar ;-)
So I can drink a free beer for your health :-)
Na zdravje! Alla salute! Prost! Nazdravlje! 🍻