diff --git a/README.md b/README.md new file mode 100644 index 0000000..5201f80 --- /dev/null +++ b/README.md @@ -0,0 +1,47 @@ +# Peasy - Makes Elements easy + +Peasy is a [template string tagging function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates) that parses HTML from the template string and returns Elements. + +This makes dynamic creation easy-peasy while being as lightweight as possible. + +## Example + +```javascript +import html from 'peasy'; + +const foo = html`
`; + +foo.innerText = 'i now have an element to interact with'; + +document.body.append(foo); +``` + +Of course, you can also go multiline: + +```javascript +import html from 'peasy'; + +const multiline = html` +
+

Complicated Structure

+

Peasy removes empty whitespace between elements so you don't end up + with nasty collapsed TextNodes. +

+
+ `; +``` + +It get's more fancy! Thanks to the magic of tagging functions, you can also append +other elements inline: + +```javascript +import html from 'peasy'; + +const bar = html`

Gnarly

`; + +const foo = html` +
+ ${bar /* bar is an actual Element! */} +
+ `; +``` \ No newline at end of file