{"id":20556,"library":"snabbdom-jsx","title":"snabbdom-jsx","description":"Snabbdom-jsx is a lightweight library (v0.4.2, latest stable) that enables writing Snabbdom virtual DOM nodes using JSX syntax with Babel. It transforms JSX attributes into Snabbdom's data format, supporting namespaces like on- for events, class- for classes, and style- for styles. Unlike full frameworks, it stays focused on the virtual DOM layer, allowing flexible architecture choices. Released irregularly with minor updates since 2016, it ships TypeScript types and avoids React's component class overhead by using simple functions. Key differentiator: direct mapping of JSX to Snabbdom's modular system without additional abstractions.","status":"active","version":"0.4.2","language":"javascript","source_language":"en","source_url":"https://github.com/snabbdom-jsx/snabbdom-jsx","tags":["javascript","snabbdom","virtual-dom","jsx","typescript"],"install":[{"cmd":"npm install snabbdom-jsx","lang":"bash","label":"npm"},{"cmd":"yarn add snabbdom-jsx","lang":"bash","label":"yarn"},{"cmd":"pnpm add snabbdom-jsx","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core virtual DOM library required for patch and h functions","package":"snabbdom","optional":false},{"reason":"Required in Babel configuration to parse JSX with custom pragma","package":"babel-plugin-syntax-jsx","optional":true}],"imports":[{"note":"html is a named export, not default. Use named import.","wrong":"import html from 'snabbdom-jsx'","symbol":"html","correct":"import { html } from 'snabbdom-jsx'"},{"note":"Use 'svg' pragma for SVG elements instead of 'html'.","wrong":"import { html } from 'snabbdom-jsx' // for SVG","symbol":"svg","correct":"import { svg } from 'snabbdom-jsx'"},{"note":"defineComponent is the correct name for creating reusable component functions.","wrong":"import { component } from 'snabbdom-jsx'","symbol":"defineComponent","correct":"import { defineComponent } from 'snabbdom-jsx'"}],"quickstart":{"code":"/** @jsx html */\nimport { html } from 'snabbdom-jsx';\nimport snabbdom from 'snabbdom';\nimport propsModule from 'snabbdom/modules/props';\nimport eventlistenersModule from 'snabbdom/modules/eventlisteners';\n\nconst patch = snabbdom.init([propsModule, eventlistenersModule]);\n\nconst app = <div on-click={() => alert('Hello!')}>\n  <h1>Hello JSX</h1>\n  <p>This is snabbdom-jsx.</p>\n</div>;\n\nconst container = document.getElementById('app');\npatch(container, app);","lang":"javascript","description":"Shows how to set up the JSX pragma, import html, initialize snabbdom with modules, create a virtual node with event listener, and patch the DOM."},"warnings":[{"fix":"Use 'key' as a direct attribute on the element, e.g., <div key=\"myId\">.","message":"In v0.3.0, 'key' and 'classNames' are no longer added to the 'props' namespace.","severity":"breaking","affected_versions":"< 0.3.0"},{"fix":"Use prefix notation: on-click for events, class-visible for classes.","message":"JSX attribute names with hyphens (e.g., 'on-click') must use lowercase; camelCase ('onClick') will be treated as 'props.onClick' without event listener binding.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Specify 'key' directly on the component element.","message":"The old practice of wrapping components with <div key=...> is deprecated since v0.2.0.","severity":"deprecated","affected_versions":"< 0.2.0"},{"fix":"Upgrade to v0.3.1+ and ensure child arrays are flattened.","message":"Children arrays are flattened in v0.3.1, but nested arrays from previous versions may still cause issues if not updated.","severity":"gotcha","affected_versions":"< 0.3.1"},{"fix":"Update component definitions to accept { attrs, children } object or (attributes, children) parameters.","message":"Component functions receive (attributes, children) in v0.4.0, changing from the previous signature.","severity":"breaking","affected_versions":"< 0.4.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install snabbdom-jsx' and ensure it's listed in package.json dependencies.","cause":"Package not installed or not in node_modules.","error":"Error: Cannot find module 'snabbdom-jsx'"},{"fix":"Change import to: import { html } from 'snabbdom-jsx'.","cause":"Using default import instead of named import for 'html'.","error":"TypeError: (0 , _snabbdomJsx.html) is not a function"},{"fix":"Ensure the first line of the file is '/** @jsx html */' (or the correct pragma function).","cause":"Missing or incorrect JSX pragma comment.","error":"Uncaught ReferenceError: html is not defined"},{"fix":"Use <div key=\"myKey\">...</div> directly, not <div props={{key: 'myKey'}}>.</div>.","cause":"Using 'key' inside props object instead of as a top-level attribute.","error":"The 'key' property is not being recognized"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}