From 385530bccf10e501829487b4683aebf6e8840442 Mon Sep 17 00:00:00 2001
From: Simon Weidacher <17548832+sweidac@users.noreply.github.com>
Date: Sat, 24 Dec 2022 15:48:17 +0100
Subject: [PATCH] Adds a readme.

---
 README.md | 47 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 README.md

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`<div class="foo"></div>`;
+
+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`
+	<section class="deeper">
+		<h1>Complicated Structure</h1>
+		<p>Peasy removes empty whitespace between elements so you don't end up
+		with nasty collapsed TextNodes.
+		</p>
+	</section>
+	`;
+```
+
+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`<h2>Gnarly</h2>`;
+
+const foo = html`
+	<div class="foo">
+		${bar /* bar is an actual Element! */}
+	</div>
+	`;
+```
\ No newline at end of file