https://github.com/tonis2/kelbas

Super small JavaScript `template-string` -> DOM creating library.
https://github.com/tonis2/kelbas

dom es6 html5 javascript template-string

Last synced: 2 months ago
JSON representation

Super small JavaScript `template-string` -> DOM creating library.

• Host: GitHub
• URL: https://github.com/tonis2/kelbas
• Owner: tonis2
• License: apache-2.0
• Created: 2018-08-15T08:36:52.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2019-04-29T18:24:18.000Z (almost 7 years ago)
• Last Synced: 2025-11-09T21:03:18.728Z (5 months ago)
• Topics: dom, es6, html5, javascript, template-string
• Language: JavaScript
• Homepage:
• Size: 153 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
#  Kelbas

>  Write JSX like code with ES6 template-strings.

![gzip size](http://img.badgesize.io/https://unpkg.com/kelbas/build/kelbas.min.js?compression=gzip)

[![Build Status](https://travis-ci.org/tonis2/kelbas.svg?branch=1.0-release)](https://travis-ci.org/tonis2/kelbas)

#### Support matrix: ![CHROME](https://raw.githubusercontent.com/tonis2/kelbas/assets/chrome.png)61+ | ![FIREFOX](https://raw.githubusercontent.com/tonis2/kelbas/assets/firefox.png)60+ | ![EDGE](https://raw.githubusercontent.com/tonis2/kelbas/assets/edge.png)16+

## Features

* Small, less than 1KB minified.

* Includes multiple render possibilites.

  (as SVG, Fragment, regular Dom).

* Fast

* Use JSX like syntax without bundling

----

## How to use 

* Add script tagg to your JS file with modules enabled.

```JS

import {HTML} from "https://unpkg.com/kelbas"

// Or

  npm i -D kelbas

```

After installtion is complete you can import functions from the library.

 ```JS 

import {HTML, SVG, FRAGMENT} from "kelbas"

```

### Examples

----

##### Create a document fragment with list of elements

```js

const click_event = () => {

  window.alert("Click event works!");

}

const list = FRAGMENT`Click me!

                      Element2

                      Element3

                      Element4

                      Element5

                      Element6`

document.body.appendChild(list);

```

##### Creating an Array of posts with click events

```js

const open_post = () => {

  window.alert("Open!");

}

const array = HTML`


                      ${["post1", "post2", "post3"].map(item => HTML`${item}`)}

                   
`


document.body.appendChild(array);

```

##### Creating SVG-s also possible

```js

const circle = SVG`

                      

                    `;

document.body.appendChild(circle);

```

------