From 8b03ec755145ceafcd59a2e4237c32913eeb9af3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Samuel=20=C5=A0tancl?= <samuel.stancl@gmail.com>
Date: Sun, 16 May 2021 22:16:55 +0200
Subject: [PATCH] readme clarity

---
 README.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 4598b7c..73e7fb0 100644
--- a/README.md
+++ b/README.md
@@ -7,14 +7,14 @@ This package provides a reactivity layer for Alpine 2.x.
 When you create a component that uses a value defined outside of it, you can modify the value from Alpine, but not vice versa:
 
 ```html
-<div x-data="{ counter: window.clickCount "}>
+<div x-data="{ counter: window.clickCount }">
     <button @click="counter++">+</button>
     Click count: <span x-text="count" />
     <button @click="counter++">--</button>
 </div>
 ```
 
-Clicking the buttons **will** update `window.clickCount`. However when `window.clickCount` is modified outside of the component, Alpine won't notice, and won't re-render the DOM.
+Clicking the buttons **will** update `window.clickCount`. However when `window.clickCount` is modified outside of the component, Alpine **won't** notice, and won't re-render the DOM.
 
 Only after something else triggers a re-render, Alpine will show the correct click count again.
 
@@ -26,6 +26,8 @@ One difference between this package's solution and Vue's `reactive()` is that Al
 
 ## Demo
 
+[View online](https://archtechx.github.io/alpine-reactive/demo.html)
+
 ```html
 <script>
     window.counter = reactive({
@@ -40,7 +42,9 @@ One difference between this package's solution and Vue's `reactive()` is that Al
 </div>
 ```
 
-Under the hood, this creates a proxy that forwards everything to `window.clickCount`, but
+Under the hood, this creates a proxy that forwards everything to `window.clickCount`, but observes changes made to `window.clickCount` and updates the component as needed.
+
+Of course, you may use the same reactive proxy in multiple components.
 
 ## Full API