TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    NPM Dependencies DevDependencies OptionalDependencies Tests


    Render JSX/Hyperscript to PostHTML AST.

    Can be used to inject elements to PostHTML AST with ability to use any plugin to modify parsed JSX, or to produce HTML string, using only posthtml-render.

    Supports functional components and dangerouslySetInnerHTML.

    Examples of working with JSX with some ideas and code parts were taken from packages preact and vhtml by developit.


    For bundlers and other NPM-based environments:

    npm install --save-dev jsx2posthtml

    Types for TypeScript are included.

    Package tslib is in optional dependencies because it is required only for ES5 code with ES2015 module systems version (and for development) to use __assign helper function, and did not required for other versions (in UMD version this function bundled, in ES2015 it’s not required at all).

    ES2015 CommonJS

    By default this package provides ES2015 version with CommonJS module system.

    To use it, you can:

    import h from 'jsx2posthtml';
    const h = require( 'jsx2posthtml' ).default;

    It uses default export, so don’t forget to add .default, if you want to use require.

    ES5 UMD

    You can manually use ES5 version with UMD package if you want to use package in a browser, or your Node version is outdated.

    import * as h from 'jsx2posthtml/es5';
    const h = require( 'jsx2posthtml/es5' );

    This version did not use default export, so you should write * as h in ESM import and you should not add .default with require.

    For using directly in browser (import with <script> tag in HTML-file):

    You can use AMD or jsx2posthtml global variable.

    Instead of importing jsx2posthtml/es5, you can specify alias in bandlers like Webpack:

        // …
        resolve: {
            extensions: ['.ts', '.tsx', '.js'],
            alias: {
                'jsx2posthtml': 'jsx2posthtml/es5',

    Also, you can write a similar alias to use other versions, available in this package (described below).

    ES5 code with ES2015 module systems

    Package contain module property for use with ES2015 module bundlers (like Rollup and Webpack 2).

    Bundlers moustly used for browsers, so this version is transplitted to ES5 code.

    You can also use it directly:

    import h from 'jsx2posthtml/es5-esm';

    ES2015 code with ES2015 module systems

    If you don’t want to use transplitted to ES5 code in your bundle, you can use import ES2015 version.

    import h from 'jsx2posthtml/es2015';


    To use with JSX you should specify:

    • /** @jsx h */ for Babel, or
      • In Babel 5 config: {"jsxPragma": "h"}
      • In Babel 6 config:
          "plugins": [
            ["transform-react-jsx", {"pragma": "h"}]
    • For TypeScript in tsconfig.json, section compilerOptions:

    Then just use:

    const node = (
        <div class="test">
            Hello, world!
    node == {
        tag: 'div',
        attrs: {
            class: 'test',
        content: [
            'Hello, world!',

    You can write components — a functions with props argument (component attributes), that returns AST node (similar to React functional component).

    import h from 'jsx2posthtml';
    import * as render from 'posthtml-render';
    const items = ['one', 'two'];
    interface ItemProps
        item: string;
        index: number;
        children?: JSX.Element;
    const Item = ( {item, index, children}: ItemProps ) => (
        <li id={'item-' + index}>
    const html = render(
        <div class="foo">
                        ( item, index ) => (
                                This is item {item}!
    html == '<div class="foo"><h1>Hi!</h1><ul><li id="item-0">'
        + '<h2>one</h2>This is item one!</li><li id="item-1">'
        + '<h2>two</h2>This is item two!</li></ul></div>';

    Attribute dangerouslySetInnerHTML is also supported:

    const html = render(
        <div dangerouslySetInnerHTML={{__html: '<strong>allowed</strong>'}} />,
    html == '<div><strong>allowed</strong></div>'

    Or with small improvement, incompatible with React — specifying this object as child element:

    const html = render(
            {{__html: '<strong>allowed</strong>'}}
    html == '<div>&lt;strong&gt;blocked&lt;/strong&gt;'
        + '<strong>allowed</strong><em>allowed</em></div>';

    You can find more examples in tests.

    Change Log

    View changelog.




    npm i jsx2posthtml

    DownloadsWeekly Downloads






    Unpacked Size

    69.4 kB

    Total Files


    Last publish


    • avol