diff --git a/README.md b/README.md
index 9dd8feb..9cae627 100644
--- a/README.md
+++ b/README.md
@@ -38,10 +38,12 @@ Simply-reactive is a [very small & dependency free](https://bundlephobia.com/pac
- [Selectors](#selector) are pieces of derived reactive state.
- [Effects](#effect) are side effects produced by changes to the reactive graph.
-`Simply-reactive` also provides two reactive composites:
+`Simply-reactive` also provides four reactive composites:
- [Groups](#group) are atoms containing collections of reactive primitives or other reactive composites.
+- [Effect Groups](#effect-Group) are collections of effects used for enabeling and disabeling multiple effects at once.
- [Resources](#resource) are selectors specifically optimized for data fetching.
+- [Query Atoms](#query-atom) are atoms with two way databindings to query search parameters.
### Atom
@@ -108,6 +110,27 @@ console.log(DoubleCountGroup.find(1).get()); // 4
console.log(DoubleCountGroup.find(2).get()); // 0
```
+### Effect Group
+
+Effect Groups are collections of effects used for enabeling and disabeling multiple effects at once.
+
+```ts
+const EffectGroup = createEffectGroup([
+ () => (document.getElementById('in-a').value = A.get()),
+ () => (document.getElementById('in-b').value = B.get()),
+ () => (document.getElementById('out-a').innerText = A.get()),
+ () => (document.getElementById('out-b').innerText = B.get()),
+ () => (document.getElementById('out-product').innerText = A.get() * B.get()),
+]);
+
+document.getElementById('in-a').addEventListener('change', (ev) => {
+ A.set(parseInt(ev.target.value, 10));
+});
+document.getElementById('in-b').addEventListener('change', (ev) => {
+ B.set(parseInt(ev.target.value, 10));
+});
+```
+
### Resource
Resources are selectors specifically optimized for data fetching.
@@ -122,3 +145,20 @@ console.log(`Data after first load ${await Data.get()}`);
Data.invalidate();
console.log(`Data after second load ${await Data.get()}`);
```
+
+### Query Atom
+
+Query Atoms are atoms with two way databindings to query search parameters.
+
+```ts
+const A = createQueryAtom({
+ key: 'a',
+ default: 0,
+});
+
+A.set(3);
+
+// Reload page
+
+A.get(); // 3
+```
diff --git a/demos/count.ts b/demos/count.ts
index 7f9d368..89436fa 100644
--- a/demos/count.ts
+++ b/demos/count.ts
@@ -1,4 +1,4 @@
-import { createAtom, createEffect, createSelector } from '../dist/api';
+import { createAtom, createEffect, createSelector } from '../dist/api.node';
const Count = createAtom({
default: 0,
diff --git a/demos/groups.ts b/demos/groups.ts
index 6222c16..319a951 100644
--- a/demos/groups.ts
+++ b/demos/groups.ts
@@ -1,4 +1,4 @@
-import { createGroup, createAtom, createSelector } from '../dist/api';
+import { createGroup, createAtom, createSelector } from '../dist/api.node';
const CountGroup = createGroup({
getDefault: () =>
diff --git a/demos/browser.html b/demos/web.html
similarity index 64%
rename from demos/browser.html
rename to demos/web.html
index f0d2ff5..b313e0a 100644
--- a/demos/browser.html
+++ b/demos/web.html
@@ -23,18 +23,27 @@
-
-
+
+
+
+
+
+
+ Increment A
+ Increment B