importmaps.html

@@ -1,7 +0,0 @@
-<script type="importmap">
-	{
-		"imports": {
-			"nyooom/render": "./render.js"
-		}
-	}
-</script>

readme.md

@@ -48,11 +48,84 @@ document.body.append(html.div(
 ))
 ```
 
-## Importmaps
+## Interface / Examples
 
-The included file `importmaps.html` can be used as a starting point for
+### Basic DOM generatio
-importing `nyooom` via importmaps in a minimal environment. Search-and-replace
+
-`./` to wherever the library should be loaded from if necessary.
+Accessing the `html` proxy with any string key returns a new node generator
+function:
+
+```js
+html.div("Hello, World!")
+```
+
+Attributes can be set by passing objects to the generator:
+
+```js
+html.div("Big Text", {style: "font-size: 1.4em"})
+```
+
+Complex structures can easily achieved by nesting generator functions:
+
+```js
+html.div(
+    html.p(
+        html.b("Bold Text")
+    )
+)
+```
+
+For convenience, arrays assigned as attributes will be joined with spaces:
+
+```js
+html.a({class: ["button", "important"]})
+```
+
+Assigning a function as an attribute will instead attach it as an event
+listener:
+
+```js
+html.button("Click me!", {click: event => {
+    alert("You clicked the button.")
+}})
+```
+
+<!-- TODO: Document special keys -->
+
+Generators can be called with many arguments. Arrays get iterated recursively as
+if they were part of a flat argument list.
+
+### Generating Text Nodes
+
+```js
+text("Hello, World")
+// Wraps document.createTextNode
+text()
+// Defaults to empty string instead of erroring
+text(null)
+// Non-string arguments still error
+
+text`Hello, World!`
+// returns a new document fragment containing the text node "Hello, World!"
+text`Hello, ${user}!`
+// returns a document fragment containing 3 nodes:
+// "Hello, ", the interpolated value of `user` and "!"
+text`Hello, ${html.b(user)}!`
+// Text node for Hello, the <b> tag with the user's name, and a text node for !
+```
+
+## handle
+
+```js
+import {handle} from 'nyooom/state.js'
+```
+
+Since it is common for event handlers to call `preventDefault()`, nyooom
+provides a helper function called `handle` with the following definition:
+
+```js
+fn => event => { event.preventDefault(); return fn(event) }
+```
 
 ## A few more examples: