snabbdom-jsx

library0.4.2jsnpmunverified

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.

web-framework

npm install snabbdom-jsx

github ↗package ↗

INSTALL

IMPORT

SIG · SNABBDOM-JSX

snabbdom-jsx

web-frameworkjavascriptv0.4.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

html

✓ import { html } from 'snabbdom-jsx'

✗ import html from 'snabbdom-jsx'

html is a named export, not default. Use named import.

svg

✓ import { svg } from 'snabbdom-jsx'

✗ import { html } from 'snabbdom-jsx' // for SVG

Use 'svg' pragma for SVG elements instead of 'html'.

defineComponent

✓ import { defineComponent } from 'snabbdom-jsx'

✗ import { component } from 'snabbdom-jsx'

defineComponent is the correct name for creating reusable component functions.

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.

/** @jsx html */ import { html } from 'snabbdom-jsx'; import snabbdom from 'snabbdom'; import propsModule from 'snabbdom/modules/props'; import eventlistenersModule from 'snabbdom/modules/eventlisteners'; const patch = snabbdom.init([propsModule, eventlistenersModule]); const app = <div on-click={() => alert('Hello!')}> <h1>Hello JSX</h1> <p>This is snabbdom-jsx.</p> </div>; const container = document.getElementById('app'); patch(container, app);

Debug

Known issues

breakingIn v0.3.0, 'key' and 'classNames' are no longer added to the 'props' namespace.

fix

Use 'key' as a direct attribute on the element, e.g., <div key="myId">.

affects: < 0.3.0

gotchaJSX attribute names with hyphens (e.g., 'on-click') must use lowercase; camelCase ('onClick') will be treated as 'props.onClick' without event listener binding.

fix

Use prefix notation: on-click for events, class-visible for classes.

affects: >=0.0.0

deprecatedThe old practice of wrapping components with <div key=...> is deprecated since v0.2.0.

fix

Specify 'key' directly on the component element.

affects: < 0.2.0

gotchaChildren arrays are flattened in v0.3.1, but nested arrays from previous versions may still cause issues if not updated.

fix

Upgrade to v0.3.1+ and ensure child arrays are flattened.

affects: < 0.3.1

breakingComponent functions receive (attributes, children) in v0.4.0, changing from the previous signature.

fix

Update component definitions to accept { attrs, children } object or (attributes, children) parameters.

affects: < 0.4.0

Errors

Common errors & fixes

Error: Cannot find module 'snabbdom-jsx'

Package not installed or not in node_modules.

fix

Run 'npm install snabbdom-jsx' and ensure it's listed in package.json dependencies.

TypeError: (0 , _snabbdomJsx.html) is not a function

Using default import instead of named import for 'html'.

fix

Change import to: import { html } from 'snabbdom-jsx'.

Uncaught ReferenceError: html is not defined

Missing or incorrect JSX pragma comment.

fix

Ensure the first line of the file is '/** @jsx html */' (or the correct pragma function).

The 'key' property is not being recognized

Using 'key' inside props object instead of as a top-level attribute.

fix

Use <div key="myKey">...</div> directly, not <div props={{key: 'myKey'}}>.</div>.

Upgrade

Version history

0.4.2latest on npm

Audit

Dependencies

snabbdomrequiredCore virtual DOM library required for patch and h functions

babel-plugin-syntax-jsxoptionalRequired in Babel configuration to parse JSX with custom pragma

Agent activity

4 hits · last 30 days

node

Resources

githubhttps://github.com/snabbdom-jsx/snabbdom-jsx ↗

packagehttps://www.npmjs.com/package/snabbdom-jsx ↗