diff --git a/README.md b/README.md index bfb1f3d9..07c38d34 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ⚠️ Expect API changes until v1.0.0 ⚠️ -Current version: 0.0.9. +Current version: 0.0.10. Bundle Size: 8kb minified & gzipped. A minimalist & flexible toolkit for interactive islands & state management in hypermedia-driven web applications. @@ -28,7 +28,132 @@ That said, I like the idea of declarative templates, uni-directional data flow, - **Lean Teams or Solo Devs**: If you're building a small to medium-sized application, I built Cami with that in mind. You can start with `ReactiveElement`, and once you need to share state between components, you can add our store. It's a great choice for rich data tables, dashboards, calculators, and other interactive islands. If you're working with large applications with large teams, you may want to consider other frameworks. - **Developers of Multi-Page Applications**: For folks who have an existing server-rendered application, you can use Cami to add interactivactivity to your application, along with other MPA-oriented libraries like HTMX, Unpoly, Turbo, or TwinSpark. -## Get Started & View Examples +## Get Started + +Below are a couple of examples: counter & client-side form validation. + +Just copy paste the following an HTML file and open it in your browser: + +```html + + + + + + Application Shell + + + +
+

Counter

+ +
+ + + +``` + +Client Side Form Validation: + +```html + + + + + + Application Shell + + + +
+

Form Validation

+ +
+ + + +``` + + +### View Examples To see some examples, just do the following: @@ -61,7 +186,7 @@ Let's illustrate these three concepts with an example. Here's a simple counter c ```html diff --git a/examples/layouts/template.html b/examples/layouts/template.html index 5da99382..9c04ab2b 100644 --- a/examples/layouts/template.html +++ b/examples/layouts/template.html @@ -2,7 +2,7 @@ diff --git a/examples/partials/_001_counter.html b/examples/partials/_001_counter.html index 9eef2c02..d7f6d9dd 100644 --- a/examples/partials/_001_counter.html +++ b/examples/partials/_001_counter.html @@ -1,9 +1,9 @@

Counter

- +
diff --git a/examples/partials/_006_nested2.html b/examples/partials/_006_nested2.html index 5515675f..b203beb1 100644 --- a/examples/partials/_006_nested2.html +++ b/examples/partials/_006_nested2.html @@ -1,9 +1,9 @@

User Update Page (Nested Observable)

- +