htmdown

library0.1.0jsnpmunverified

htmdown is an MDX-like syntax library for plain JavaScript using tagged template literals, built on top of htm. Current stable version is 0.1.0. It allows embedding JSX-like expressions in Markdown without a transpiler, leveraging the htm library for template-based virtual DOM creation. It ships TypeScript definitions. Key differentiators: no build step, works with React and Preact, and uses standard ES6 template literals. Released at a low cadence, it is a minimal utility for small projects or prototypes.

web-framework

npm install htmdown

github ↗package ↗

INSTALL

IMPORT

SIG · HTMDOWN

htmdown

web-frameworkjavascriptv0.1.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import htmdown from 'htmdown'

✗ const htmdown = require('htmdown')

ESM-only; CommonJS require is not supported in v0.1.0.

htmdown

✓ import htmdown from 'htmdown'; const md = htmdown.bind(createElement)

✗ import { htmdown } from 'htmdown'

Default export is a function that must be bound to a createElement (e.g., React.createElement). Named import is incorrect.

TypeScript usage

✓ import htmdown from 'htmdown'; const md: (strings: TemplateStringsArray, ...values: any[]) => ReturnType<typeof htmdown> = htmdown.bind(createElement)

✗ const md: any = htmdown.bind(createElement) // missing type

Types are bundled; use the default export typed as a generic that returns a vnode or element.

Demonstrates using htmdown with React: binding to createElement, embedding expressions, and rendering with React DOM.

import htmdown from 'htmdown'; import { createElement, render } from 'react'; import { createRoot } from 'react-dom/client'; const md = htmdown.bind(createElement); function App() { const name = 'World'; return md` # Hello ${name} This is **htmdown** in action! <button onClick={() => alert('Hi!')}>Click me</button> `; } const root = createRoot(document.getElementById('root')); root.render(createElement(App));

Debug

Known issues

gotchahtmdown must be bound to a createElement function before use. Forgetting .bind(createElement) will cause a runtime error.

fix

Call const md = htmdown.bind(React.createElement); before using md`...`.

affects: >=0.1.0

gotchaHTM is a peer dependency and must be installed explicitly. Skipping npm i htm will cause a missing module error.

fix

Run npm i htm alongside htmdown.

affects: >=0.1.0

gotchaHTML elements must be closed. Self-closing tags like <br/> are required; <br> is invalid and will throw.

fix

Use <br/> instead of <br> inside template literals.

affects: >=0.1.0

gotchaOnly one root element per template literal is allowed. Multiple sibling elements will cause undefined behavior.

fix

Wrap multiple elements in a single parent, e.g., div or fragment.

affects: >=0.1.0

gotchaExpressions inside code blocks (backticks) are not parsed; they are treated as literal strings.

fix

Use the syntax normally; it's by design.

affects: >=0.1.0

Errors

Common errors & fixes

Uncaught TypeError: htmdown is not a function

Attempting to use require() in an ESM context or calling htmdown directly without .bind().

fix

Ensure you use import (not require) and bind to a createElement: const md = htmdown.bind(React.createElement);

Module not found: Can't resolve 'htm'

Missing peer dependency htm.

fix

Run: npm install htm

JSX element 'img' has no corresponding closing tag

Using unclosed tags like <img src='...'> instead of self-closing <img src='...'/>.

fix

Always self-close void elements: <img src='...' />

Upgrade

Version history

0.1.0latest on npm

Audit

Dependencies

htmrequiredRuntime peer dependency; htmdown uses htm internally to compile tagged templates into vnodes.

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/mxmul/htmdown ↗

packagehttps://www.npmjs.com/package/htmdown ↗