1 files changed, 128 insertions, 0 deletions
diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000..957bcc3
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,128 @@
+## framework
+another js framework
+
+### components
+
+there are 5 major components for this framework
+
+#### element
+
+The most basic component. An `element` represends any HTMLElement.
+These can be created with any of the functions named after their html functions, i.e. `a`, `div`, `textarea`, etc. Elements can hold other elements, contents, and routers as children.
+
+To make a component, (most) require 2 paramaters. First, its attributes, and second its children.
+
+```js
+# Usage
+# element(attrs, ...children)
+
+div({
+    style: 'background-color: red;'
+}, 
+    a({ href: 'google.com'})
+)
+```
+
+#### content
+
+The content type is how you add dynamic strings and insert content into the dom.
+You cannot just add text as a child directly to any element, it must be wrapped in a
+content tag.
+
+The content tag tags a single callback that returns a string. Its called on every render.
+
+```js
+// Usage
+// content(callback, ...states)
+
+content(() => 'Hello world!')
+```
+
+#### state
+
+State is how you create signals and store variables a reactive way. When a state object is updated,
+it causes every content and element its attached to, to update.
+
+It takes one argument, the default value of the state;
+
+```js
+// Usage
+// state(defaultValue)
+
+let test = state('test')
+test.value // get value
+test.update('test2') // update value
+```
+
+Also you need to attach the state object to any element or content that uses it. Otherwise they wont update when changed. To do this add them to the `signals` attribute on any `element`, or pass them in after the callback in any `content`.
+
+```js
+// Usage
+
+content(() => `${test.value}`, test);
+
+// or
+
+div({
+    signals: [test],
+    style: `background-color: ${test.value}`
+})
+```
+
+#### router
+
+The router is what allows you to switch between pages reactivly based on the location.
+
+To change location use the following functions
+
+```js
+backLocation() // go back
+forwardLocation() // go forward
+
+pushLocation('/newPath') // append location to history, and goto newPath
+replaceLocation('/newPath') // replace location in history, and goto newPath
+```
+
+To create a router you must pass in a callback that takes in the current location, and returns either a element, content, or another router. Routers will auto update on location change.
+
+```js
+// Usage
+// router(callback)
+
+const component() => {
+    return div({}, content(() => 'hello world!'))
+}
+
+const notFound() => {
+    return div({}, content(() => 'not found :('))
+}
+
+router((path) => {
+    switch(path) {
+        case: '/secret':
+            return component()
+        default:
+            retrun notFound()
+    }
+})
+```
+
+#### app
+
+The final type is the App. This is the highest component in the component tree, and requires a signle router, element, or content to manage at the top of the tree.
+
+You are only allowed to make a single app, since they arent gurenteed to work with multiple.
+
+```js
+// Usage
+// app(root)
+
+let mySite = app(router((path) => { /* ... */ }))
+mySite.render(document.body)
+```
+
+### todo
+
+- page titles
+- component arrays
+- likly other things