CartaNova: Turning Plain Text into Beautiful HTML (Without Dependencies)

Spread the love

There’s something deeply satisfying about typing plain Markdown.
It’s minimal, portable, and human-readable — but when you want to display it on the web, it’s not always easy to find the right library.

So I wrote CartaNova (ehm, I vibe coded…sorry I did it again 💁‍♀️) a lightweight Markdown-to-HTML library written in plain JavaScript. No dependencies, no frameworks, no CDN bloat. Just text in, HTML out.

TLDR; here is the public repo https://github.com/enreeco/cartanova-markdown-js

Why Another Markdown Parser?

Because most Markdown libraries are either:

Enormous and do everything (CommonMark compliance, GFM, frontmatter, emoji shortcodes, math, diagrams, and a pizza with all toppings)
Or minimal, but missing things I actually use daily — tables, inline code, definition lists

CartaNova sits in the middle:
small enough to read in one sitting, powerful enough to cover your notes, documentation, or static site needs.

It supports:

Headings, paragraphs, and line breaks
Bold, italic, underline, strikethrough, highlight, superscript, subscript
Blockquotes
Ordered, unordered, and task lists
Definition lists (Term: Definition)
Links and images
Inline and fenced code blocks
Horizontal rules
Tables (with column alignment)

The Name: CartaNova

It’s Italian for “new paper.”, and no, it wasn’t necessary at all to give it a name but I’m all generative AI right now, so deal with it 🎤
That’s the vibe I wanted — the feeling of a clean sheet ready for thoughts, notes, and technical scribbles.
It’s Markdown as paper, not a framework.

Getting Started

Include the parser and its default stylesheet:

<link rel="stylesheet" href="markdownlite.css">
<script src="markdownlite.js"></script>

Create a container with the .mdlite namespace:

<div class="mdlite" id="preview"></div>

Then call the parser:

<script>
const text = `
# Hello, CartaNova

Markdown **without** dependencies.

- Fast
- Tiny
- Reliable

[View source](https://github.com/enreeco/cartanova)
`;

document.getElementById("preview").innerHTML = MarkdownLite.parse(text);
</script>

You’ll get clean HTML instantly styled by markdownlite.css.
The namespace ensures your site’s CSS won’t interfere — it’s Markdown in its own sandbox.

Bonus: Live Preview Editor

If you like tinkering, you can set up a small two-pane Markdown editor in about 30 lines of HTML.
Left side: editable Markdown.
Right side: live CartaNova preview that updates as you type.

It’s the minimal version of what every “fancy” editor does — but it’s yours, transparent and hackable.

<textarea id="editor"></textarea>
<div class="mdlite" id="output"></div>

<script>
const render = () => {
  output.innerHTML = MarkdownLite.parse(editor.value);
};
editor.addEventListener("input", render);
editor.value = "# Hello Markdown\n\nType here...";
render();
</script>

No frameworks. No bundlers. Just CartaNova.

Philosophy

CartaNova isn’t trying to compete with the big Markdown engines.
It’s for hackers, note-takers, and curious minds who want to understand how Markdown parsing works — and who like the freedom of code they can read and tweak in an afternoon. And I needed it for a lightweight markdown library for AIDA.

It’s a reminder that simplicity is a feature.

You said bugs? I’m sure there is plenty 🤣

You can check out the demo and source at: https://github.com/enreeco/cartanova-markdown-js
If you end up forking it, adding syntax extensions, or theming the output — I’d love to see your version. That’s the spirit of open tools: CartaNova is your new paper.

Nerd @ Work