https://github.com/callmecavs/string-dom

Create HTML strings using JSX (or functions).
https://github.com/callmecavs/string-dom

components dom html-string jsx

Last synced: about 2 months ago
JSON representation

Create HTML strings using JSX (or functions).

• Host: GitHub
• URL: https://github.com/callmecavs/string-dom
• Owner: callmecavs
• Created: 2017-02-10T00:40:59.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-11T03:27:53.000Z (over 8 years ago)
• Last Synced: 2025-04-09T23:07:03.599Z (2 months ago)
• Topics: components, dom, html-string, jsx
• Language: JavaScript
• Homepage:
• Size: 24.4 KB
• Stars: 14
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# string-dom

[![string-dom on Travis](https://img.shields.io/travis/callmecavs/string-dom.svg?style=flat-square)](https://travis-ci.org/callmecavs/string-dom) [![string-dom on NPM](https://img.shields.io/npm/v/string-dom.svg?style=flat-square)](https://www.npmjs.com/package/string-dom) [![Standard JavaScript Style](https://img.shields.io/badge/code_style-standard-brightgreen.svg?style=flat-square)](http://standardjs.com/)

Create HTML strings using JSX (or functions).

## About

`string-dom` is a function that creates an HTML string.

* It is made to work with JSX, but **renders it to a string, instead of to DOM**.

* With `string-dom`, JSX becomes an HTML templating language that can be used separately of React.

## Install

```sh

$ npm i string-dom --save

```

## Usage

```jsx

import sd from 'string-dom'

/** @jsx sd */

// with JSX

// note the comment above, and see the link below

// https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-react-jsx#custom

document.body.innerHTML += (

  


    
Heading Text

    
Subheading Text

    
An element without attributes.

  

)


// without JSX

document.body.innerHTML += (

  sd('div', { class: 'wrapper' },

    sd('h1', { class: 'heading', 'data-heading': 'data-heading' }, 'Heading Text'),

    sd('p', { class: 'heading-sub', 'data-subheading': 'data-subheading' }, 'Subheading Text'),

    sd('p', 'An element without attributes.')

  )

)

```

Both the above generate the following HTML (as a string), then add it to the `body`:

```html



  
Heading Text

  
Subheading Text

  
An element without attributes.



```


## Prior Art

* [ejsx](https://github.com/jxnblk/ejsx)

* [hyperscript](https://github.com/hyperhype/hyperscript)

* [vhtml](https://github.com/developit/vhtml)

## Linting

[![JS Standard Style](https://cdn.rawgit.com/feross/standard/master/badge.svg)](http://standardjs.com)

## License

[MIT](https://opensource.org/licenses/MIT). © 2017 Michael Cavalea