- > **Spacy**, **Simple**, **Scalable** State Management Framework
+ > **Spacy, Simple, Scalable State Management Framework**
+
+ 
+
+ 
+
+ 
+
+
-
-
-
- 
-
- 
+
-## π Look how easy it is
-Below example is based on React
+
+
```tsx
-// At first we have to create an Instance of Agile
+// -- core.js ------------------------------------------
+
+// At first we need an Instance of Agile
const App = new Agile();
-// Now we can create a State which has an initial Value of "Hello Stranger!"
+// Than we can create our first State
const MY_FIRST_STATE = App.State("Hello Stranger!");
-// Our cool React Component
-const RandomComponent = () => {
- // With the Hook 'useAgile' we bind the State to our 'RandomComponent'
- const myFirstState = useAgile(MY_FIRST_STATE); // Returns "Hello Stranger!"
- // ^
- return ( // |
- {myFirstState}
// | gets changed to "Hello Friend!" - -
+
+### π
Straightforward
+Write minimalistic, boilerplate free code that captures your intent.
+
+**Some straightforward syntax examples:**
+- Store a State in the Local Storage
```ts
MY_STATE.persist("storage-key")
```
-- Reactive Collection of States
+- Create a reactive Collection of States
```ts
const MY_COLLECTION = App.Collection();
MY_COLLECTION.collect({id: 1, name: "Frank"});
MY_COLLECTION.collect({id: 2, name: "Dieter"});
```
-- Cool State checks and mutations
+- Mutate or Check States with simple Functions
```ts
MY_STATE.undo(); // Undo last change
MY_STATE.is({hello: "jeff"}); // Check if State has the Value {hello: "jeff"}
```
-#### π€Έβ Flexible
-Agile can be used in nearly every UI-Framework
-and surly works with the workflow that suits you best,
-since Agile isn't bound to _dispatches_, _reducers_, ..
+### π€Έβ Flexible
+- Works in nearly every UI-Framework. Check [here](TODO) if the Framework you are using is supported, too.
+- Surly behaves with the workflow that suits you best.
+ No need for _reducers_, _actions_, ..
+- Has **no** external dependencies
-#### π― Easy to Use
-Learn the powerful and simple tools of Agile in a short amount of time.
+### π Centralize
+Manage your Application Logic in a central place outside any UI-Framework.
+This makes your code more decoupled, portable, and above all, easily testable.
-#### β³οΈ Centralize
-Manage your Application Logic outside of any UI-Framework in a central place.
-This makes your code more decoupled, portable, and above all, easily testable.
+### π― Easy to Use
+Learn the powerful tools of AgileTs in a short amount of time.
+A good place to start is in our [documentation](https://agile-ts.org/docs).
-#### π Lightweight
-Agile has an unpacked size of [52.7kB](https://bundlephobia.com/result?p=@agile-ts/core@0.0.6)
+### π Lightweight
+AgileTs has an unpacked size of [52.7kB](https://bundlephobia.com/result?p=@agile-ts/core@0.0.6)
and [0 dependencies](https://www.npmjs.com/package/@agile-ts/core).
-## β¬οΈ Installation
-```
-npm install @agile-ts/core
-```
-To use Agile we have to install the _core_ package, it's the brain and handles your States, Collections, ..
+To use AgileTs properly, in an UI-Framework we have to install 2 packages.
+
+- The _Core Package_, which is the brain of AgileTs and handles your States, Collections, ..
+ ```
+ npm install @agile-ts/core
+ ```
+
+- A _fitting integration_ for the UI-Framework you are using.. in my case [React](https://www.npmjs.com/package/@agile-ts/react).
+ ```
+ npm install @agile-ts/react
+ ```
+
+
+
+
+If AgileTs sounds interesting to you and you want to find out more.
+Checkout our **[docs](https://agile-ts.org/docs/)**.
+If you have any questions don't mind joining our [Discord Community](https://discord.gg/FTqeMNCxw7).
+
+
+
+
+Get a part of AgileTs and start contributing. To find out more read the [CONTRIBUTING.md](./CONTRIBUTING.md).
+
+
+
-## π Packages of Agile
| Name | Latest Version | Description |
| ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
| [@agile-ts/core](/packages/core) | [](https://www.npmjs.com/package/@agile-ts/core) | Brain of Agile |
@@ -113,9 +150,10 @@ The Agile Docs are located [here](https://agile-ts.org/docs/)
| [@agile-ts/multieditor](/packages/multieditor) | [](https://www.npmjs.com/package/@agile-ts/multieditor) | Simple Form Manager |
-## π¨βπ» Contribute
-Feel free to contribute
+
-## π Credits
AgileTs is inspired by [PulseJs](https://github.com/pulse-framework/pulse)
diff --git a/static/contribute_header.png b/static/contribute_header.png
new file mode 100644
index 00000000..03baada3
Binary files /dev/null and b/static/contribute_header.png differ
diff --git a/static/credits_header.png b/static/credits_header.png
new file mode 100644
index 00000000..e1ade96e
Binary files /dev/null and b/static/credits_header.png differ
diff --git a/static/documentation_header.png b/static/documentation_header.png
new file mode 100644
index 00000000..269172a1
Binary files /dev/null and b/static/documentation_header.png differ
diff --git a/static/how_to_create_state_header.png b/static/how_to_create_state_header.png
new file mode 100644
index 00000000..67b29ca2
Binary files /dev/null and b/static/how_to_create_state_header.png differ
diff --git a/static/installation_header.png b/static/installation_header.png
new file mode 100644
index 00000000..d804d509
Binary files /dev/null and b/static/installation_header.png differ
diff --git a/static/packages_of_agile.png b/static/packages_of_agile.png
new file mode 100644
index 00000000..af681711
Binary files /dev/null and b/static/packages_of_agile.png differ
diff --git a/static/why_should_i_use_agile.png b/static/why_should_i_use_agile.png
new file mode 100644
index 00000000..1691ae50
Binary files /dev/null and b/static/why_should_i_use_agile.png differ