{"id":25732,"library":"htmdown","title":"htmdown","description":"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.","status":"active","version":"0.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/mxmul/htmdown","tags":["javascript","markdown","md","mdx","jsx","htm","react","preact","typescript"],"install":[{"cmd":"npm install htmdown","lang":"bash","label":"npm"},{"cmd":"yarn add htmdown","lang":"bash","label":"yarn"},{"cmd":"pnpm add htmdown","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime peer dependency; htmdown uses htm internally to compile tagged templates into vnodes.","package":"htm","optional":false}],"imports":[{"note":"ESM-only; CommonJS require is not supported in v0.1.0.","wrong":"const htmdown = require('htmdown')","symbol":"default","correct":"import htmdown from 'htmdown'"},{"note":"Default export is a function that must be bound to a createElement (e.g., React.createElement). Named import is incorrect.","wrong":"import { htmdown } from 'htmdown'","symbol":"htmdown","correct":"import htmdown from 'htmdown';\nconst md = htmdown.bind(createElement)"},{"note":"Types are bundled; use the default export typed as a generic that returns a vnode or element.","wrong":"const md: any = htmdown.bind(createElement) // missing type","symbol":"TypeScript usage","correct":"import htmdown from 'htmdown';\nconst md: (strings: TemplateStringsArray, ...values: any[]) => ReturnType<typeof htmdown> = htmdown.bind(createElement)"}],"quickstart":{"code":"import htmdown from 'htmdown';\nimport { createElement, render } from 'react';\nimport { createRoot } from 'react-dom/client';\n\nconst md = htmdown.bind(createElement);\n\nfunction App() {\n  const name = 'World';\n  return md`\n    # Hello ${name}\n\n    This is **htmdown** in action!\n\n    <button onClick={() => alert('Hi!')}>Click me</button>\n  `;\n}\n\nconst root = createRoot(document.getElementById('root'));\nroot.render(createElement(App));","lang":"typescript","description":"Demonstrates using htmdown with React: binding to createElement, embedding expressions, and rendering with React DOM."},"warnings":[{"fix":"Call const md = htmdown.bind(React.createElement); before using md`...`.","message":"htmdown must be bound to a createElement function before use. Forgetting .bind(createElement) will cause a runtime error.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Run npm i htm alongside htmdown.","message":"HTM is a peer dependency and must be installed explicitly. Skipping npm i htm will cause a missing module error.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use <br/> instead of <br> inside template literals.","message":"HTML elements must be closed. Self-closing tags like <br/> are required; <br> is invalid and will throw.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Wrap multiple elements in a single parent, e.g., div or fragment.","message":"Only one root element per template literal is allowed. Multiple sibling elements will cause undefined behavior.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Use the syntax normally; it's by design.","message":"Expressions inside code blocks (backticks) are not parsed; they are treated as literal strings.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure you use import (not require) and bind to a createElement: const md = htmdown.bind(React.createElement);","cause":"Attempting to use require() in an ESM context or calling htmdown directly without .bind().","error":"Uncaught TypeError: htmdown is not a function"},{"fix":"Run: npm install htm","cause":"Missing peer dependency htm.","error":"Module not found: Can't resolve 'htm'"},{"fix":"Always self-close void elements: <img src='...' />","cause":"Using unclosed tags like <img src='...'> instead of self-closing <img src='...'/>.","error":"JSX element 'img' has no corresponding closing tag"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}