{"id":11023,"library":"hastscript","title":"hastscript: Hyperscript for HAST Trees","description":"hastscript is a utility library that provides a hyperscript interface for programmatically creating HTML Abstract Syntax Trees (hast trees). Analogous to React's `createElement` or Vue's `h` function, it simplifies the process of generating complex HTML structures in code by replacing repetitive object literal syntax with concise function calls. It also handles the normalization of attributes into the format required by the hast specification. The current stable version is 9.0.1, with frequent patch and minor releases and major versions typically introducing breaking changes like ESM-only support or Node.js version bumps. It is a core part of the unified ecosystem for processing content and specifically targets HTML, differentiating it from `unist-builder` (for generic unist nodes) or `xastscript` (for XML nodes).","status":"active","version":"9.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/syntax-tree/hastscript","tags":["javascript","dom","dsl","hast-util","hast","html","hyperscript","rehype","unist","typescript"],"install":[{"cmd":"npm install hastscript","lang":"bash","label":"npm"},{"cmd":"yarn add hastscript","lang":"bash","label":"yarn"},{"cmd":"pnpm add hastscript","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"`h` is the primary function for creating HTML hast nodes. The package is ESM-only since v7.0.0.","wrong":"const { h } = require('hastscript')","symbol":"h","correct":"import { h } from 'hastscript'"},{"note":"`s` is specifically for creating SVG hast nodes, handling SVG namespaces and attributes correctly. ESM-only.","wrong":"const { s } = require('hastscript')","symbol":"s","correct":"import { s } from 'hastscript'"},{"note":"These are TypeScript types exported by the package for stricter type checking when creating or manipulating hast nodes.","symbol":"Child, Properties, Result","correct":"import type { Child, Properties, Result } from 'hastscript'"}],"quickstart":{"code":"import {h, s} from 'hastscript';\n\nconst htmlTree = h('.foo#some-id', [\n  h('span', 'some text'),\n  h('input', {type: 'text', value: 'foo'}),\n  h('a.alpha', {class: 'bravo charlie', download: 'download'}, [\n    'delta',\n    'echo'\n  ])\n]);\n\nconst svgTree = s('svg', {viewbox: '0 0 500 500', xmlns: 'http://www.w3.org/2000/svg'}, [\n  s('title', 'SVG `<circle>` element'),\n  s('circle', {cx: 120, cy: 120, r: 100})\n]);\n\nconsole.log('HTML Tree:', JSON.stringify(htmlTree, null, 2));\nconsole.log('SVG Tree:', JSON.stringify(svgTree, null, 2));","lang":"typescript","description":"Demonstrates how to create both HTML and SVG hast trees using the `h` and `s` functions with selectors, properties, and nested children."},"warnings":[{"fix":"Migrate your codebase to use ECMAScript Modules (ESM) syntax: `import { h } from 'hastscript'` instead of `require()`. Ensure your `package.json` has `\"type\": \"module\"` or use `.mjs` file extensions.","message":"hastscript switched to being an ESM-only package. CommonJS users must migrate to `import` statements or use dynamic `import()`.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Upgrade your Node.js environment to version 16 or newer to ensure compatibility.","message":"Node.js 16 or higher is now required for `hastscript`.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Update your imports to directly reference `hastscript`: `import { h, s } from 'hastscript'` instead of `import { h } from 'hastscript/html'`.","message":"The subpath exports `hastscript/html` and `hastscript/svg` were removed. Both HTML and SVG functions (`h` and `s`) are now directly available from the main `hastscript` export.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Review usage of `h` with custom elements. If issues arise, ensure your custom element declarations and property usage strictly adhere to the updated typing and runtime expectations.","message":"Better custom element support was added by tightening overload detection, which has a tiny chance of breaking existing code if you were relying on previous, more lenient behavior with custom elements.","severity":"breaking","affected_versions":">=9.0.0"},{"fix":"Update your TypeScript configuration and codebase to align with the provided types. Address any type errors that emerge after upgrading.","message":"TypeScript types were introduced, which could be a potentially breaking change if you or your dependents are using TypeScript in a specific way that conflicts with the new types.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Configure your `tsconfig.json` (`jsxImportSource`), Babel (`@babel/plugin-transform-react-jsx`), or other build tooling to specify `hastscript` for HTML JSX or `hastscript/svg` for SVG JSX.","message":"When using `hastscript` as a JSX pragma, ensure your build tool (e.g., TypeScript, Babel) is configured to use `hastscript` or `hastscript/svg` as the `importSource` for the automatic JSX runtime.","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change your import statements to use ESM syntax: `import { h } from 'hastscript';` and ensure your environment supports ESM (e.g., `\"type\": \"module\"` in `package.json`).","cause":"Attempting to import `hastscript` using CommonJS `require()` syntax when the package is ESM-only.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module .../node_modules/hastscript/index.js from ... not supported."},{"fix":"Ensure you are using `import { h } from 'hastscript';` for ESM, or if in a strict CommonJS context (not recommended for `hastscript`), use `import('hastscript').then(({ h }) => { /* ... */ });`.","cause":"This usually indicates an incorrect CommonJS `require()` of a named export from an ESM package, or a failure to import correctly.","error":"TypeError: Cannot read properties of undefined (reading 'h')"},{"fix":"Update your imports to `import { h, s } from 'hastscript';` as both functions are now directly exported from the main package entry point.","cause":"Attempting to import from `hastscript/html` or `hastscript/svg` subpaths, which were removed in version 8.0.0.","error":"Module not found: Error: Can't resolve 'hastscript/html' in '...'"},{"fix":"Upgrade Node.js to a version that supports ESM (>=16 for hastscript) and ensure your files are treated as ESM, or use dynamic `import()` if necessary.","cause":"You are trying to `require()` an ESM module in a context that does not allow it (e.g., an older Node.js version, or a CJS file trying to load ESM directly).","error":"SyntaxError: Must use import to load ES Module: .../node_modules/hastscript/index.js"}],"ecosystem":"npm"}