https://github.com/developit/vhtml

Render JSX/Hyperscript to HTML strings, without VDOM 🌈
https://github.com/developit/vhtml

html-string hyperscript jsx preact vdom virtual-dom

Last synced: 1 day ago
JSON representation

Render JSX/Hyperscript to HTML strings, without VDOM 🌈

• Host: GitHub
• URL: https://github.com/developit/vhtml
• Owner: developit
• License: mit
• Created: 2016-03-13T01:29:44.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2024-04-15T08:46:22.000Z (10 months ago)
• Last Synced: 2025-01-17T16:07:46.889Z (8 days ago)
• Topics: html-string, hyperscript, jsx, preact, vdom, virtual-dom
• Language: JavaScript
• Homepage: http://npm.im/vhtml
• Size: 19.5 KB
• Stars: 792
• Watchers: 11
• Forks: 35
• Open Issues: 26
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - vhtml - Render JSX/Hyperscript to HTML strings, without VDOM 🌈 (JavaScript)

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 [](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:

    


      { items.map( item => (

        
{ item }

      )) }

    

  

);

```


### 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!

    


      { items.map( (item, index) => (

        

          This is item {item}!

        

      )) }

    

  

);

```


The above outputs the following HTML:

```html



  
Hi!

  


    


      
one
This is item one!

    

    


      
two
This is item two!

    

  



```