Skip to content
/ kelbas Public

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

License

Notifications You must be signed in to change notification settings

tonis2/kelbas

Repository files navigation

Kelbas

Write JSX like code with ES6 template-strings.

gzip size Build Status

Support matrix: CHROME61+ | FIREFOX60+ | EDGE16+

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.
import {HTML} from "https://unpkg.com/kelbas"

// Or

  npm i -D kelbas

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

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

Examples


Create a document fragment with list of elements
const click_event = () => {
  window.alert("Click event works!");
}

const list = FRAGMENT`<span onclick=${click_event}><strong>Click me!</strong></span>
                      <span>Element2</span>
                      <span>Element3</span>
                      <span>Element4</span>
                      <span>Element5</span>
                      <span>Element6</span>`


document.body.appendChild(list);
Creating an Array of posts with click events
const open_post = () => {
  window.alert("Open!");
}

const array = HTML`<div id="container">
                      ${["post1", "post2", "post3"].map(item => HTML`<span onclick=${open_post}>${item}</span>`)}
                   </div>`



document.body.appendChild(array);
Creating SVG-s also possible
const circle = SVG`<svg height="100" width="100">
                      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
                    </svg>`;


document.body.appendChild(circle);

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published