Hypert

0.0.1 verified Fri May 01 auth: no javascript

Hypert is a hypertext transpiler in early alpha stage (v0.0.1), designed to parse and render HTML-like structures with optional React integration. Currently exploratory with no stable release cadence, it provides parse and render functions for transforming source strings into nodes and HTML output. Differentiates by offering a lightweight, library-agnostic core with a separate React module for component generation, but lacks maturity compared to established alternatives like htm or hyperHTML.

Common errors

error TypeError: hypert__WEBPACK_IMPORTED_MODULE_0__.parse is not a function ↓

cause Incorrect import path or bundler issue with ESM.

fix

Ensure using import { parse } from 'hypert' and that the bundler supports ESM.

Warnings

gotcha Package is in early alpha (v0.0.1); API is unstable and may change without notice. ↓

fix Lock dependency to exact version and expect breaking changes.

gotcha React component creation requires explicit import from 'hypert/react'; the main package does not re-export it. ↓

fix Use import { createReactComponent } from 'hypert/react'.

Install

npm install hypert

yarn add hypert

pnpm add hypert

Imports

parse
wrong
```
const parse = require('hypert').parse
```
correct
```
import { parse } from 'hypert'
```
ESM-only package; CommonJS require will fail in Node.js unless using esm.

render

wrong

import render from 'hypert'

correct

import { render } from 'hypert'

Named export, not default export.

createReactComponent
wrong
```
import { createReactComponent } from 'hypert'
```
correct
```
import { createReactComponent } from 'hypert/react'
```
Available only from the 'hypert/react' subpath; incorrect import will resolve to undefined.

Quickstart

Parses a simple HTML string into nodes and renders them back to HTML string.

import { parse, render } from 'hypert';

const source = '<div class="greeting">Hello, World!</div>';
const nodes = parse(source);
const html = render(nodes);
console.log(html); // '<div class="greeting">Hello, World!</div>'