# vhtml **Repository Path**: mirrors_developit/vhtml ## Basic Information - **Project Name**: vhtml - **Description**: Render JSX/Hyperscript to HTML strings, without VDOM 🌈 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-08-08 - **Last Updated**: 2026-07-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # vhtml [![NPM](https://img.shields.io/npm/v/vhtml.svg?style=flat)](https://www.npmjs.org/package/vhtml) [![travis-ci](https://travis-ci.org/developit/vhtml.svg?branch=master)](https://travis-ci.org/developit/vhtml) ### **Render JSX/Hyperscript to HTML strings, without VDOM** > Need to use HTML strings (angular?) but want to use JSX? vhtml's got your back. > > Building components? do yourself a favor and use [Preact](https://github.com/developit/preact) [**JSFiddle Demo**](https://jsfiddle.net/developit/9q0vyskg/) --- ## Installation Via npm: `npm install --save vhtml` --- ## Usage ```js // import the library: import h from 'vhtml'; // tell babel to transpile JSX to h() calls: /** @jsx h */ // now render JSX to an HTML string! let items = ['one', 'two', 'three']; document.body.innerHTML = (

Hi!

Here is a list of {items.length} items:

); ``` ### New: "Sortof" Components! `vhtml` intentionally does not transform JSX to a Virtual DOM, instead serializing it directly to HTML. However, it's still possible to make use of basic Pure Functional Components as a sort of "template partial". When `vhtml` is given a Function as the JSX tag name, it will invoke that function and pass it `{ children, ...props }`. This is the same signature as a Pure Functional Component in react/preact, except `children` is an Array of already-serialized HTML strings. This actually means it's possible to build compositional template modifiers with these simple Components, or even higher-order components. Here's a more complex version of the previous example that uses a component to encapsulate iteration items: ```js let items = ['one', 'two']; const Item = ({ item, index, children }) => (
  • {item}

    {children}
  • ); console.log(

    Hi!

    ); ``` The above outputs the following HTML: ```html

    Hi!

    ```