chore(docs)

README.md

@@ -6,6 +6,10 @@
 
 A lightweight state management layer for Alpine.js
 
+## About
+
+Many large frameworks have their own state management solutions. One thing these libraries have in common is a higher level of complexity and a wide range of API interactions. Since Alpine.js is designed to be a simpler and lighter alternative to larger frameworks such as Vue and React, shouldn't the state management solution be as simple, if not simpler, too?
+
 ## Installation
 
 ### CDN
@@ -30,4 +34,8 @@ Then add the following to your script:
 
 ```javascript
 import Spruce from '@ryangjchandler/spruce'
-```
+```
+
+## Usage
+
+Spruce exposes less than a handful of possible interaction points. There is an extremely simple "subscriptions" interaction which connects the roots from your Alpine component to the global store, then there is the "stores" interaction which allows you to define scopes of global state for use throughout your components.

examples/index.html

@@ -15,10 +15,5 @@
         <div x-data x-subscribe>
             <button @click="$store.dropdown.hello = 'amazing'">Update world to amazing</button>
         </div>
-        <!-- <script>
-            Spruce.store('dropdown', {
-                hello: 'world'
-            })
-        </script> -->
     </body>
 </html>

examples/store.js

@@ -0,0 +1,7 @@
+import Spruce from '../dist/spruce.module.js'
+
+Spruce.store('dropdown', {
+    hello: 'world'
+})
+
+export default Spruce

examples/test.js

@@ -1,8 +1,4 @@
-import Spruce from '../dist/spruce.module.js'
+import Store from './store.js'
 
-Spruce.store('dropdown', {
-    hello: 'world'
-})
-
-window.Spruce = Spruce
+window.Spruce = Store
 window.Spruce.start()