diff --git a/js-lib/README.md b/js-lib/README.md
index 2ebe83f..469dbe7 100644
--- a/js-lib/README.md
+++ b/js-lib/README.md
@@ -1,18 +1,46 @@
-// const trame = new Trame({ iframe });
-// await trame.connect({ application: 'trame' });
+# Trame iframe client library for plain JS
+This library aims to simplify interaction between a trame application living inside an iframe and its iframe parent.
+This work is inspired by the [official trame-client js lib](https://github.com/Kitware/trame-client/tree/master/js-lib)
-// State handing
-trame.state.set("a", 5);
-console.log(trame.state.get("b"));
-trame.state.update({
- a: 1,
- b: 2,
-});
+## Examples
+- [Vite](./examples/vite/)
+
+## Usage
+First you need to grab the iframe that contains your trame application.
+```js
+import ClientCommunicator from "@kitware/trame-iframe-client";
+
+const iframe = document.getElementById("trame_app");
+const iframe_url = "http://localhost:3000";
-// Method call on Python
-const result = await trame.trigger("name", [arg_0, arg_1], { kwarg_0: 1, kwarg_1: 2 });
+const trame = new ClientCommunicator(iframe, iframe_url);
-// TODO - state watching
-trame.state.watch(["a"], (a) => {
- console.log(`a changed to ${a}`);
+// set
+trame.state.set("a", 2);
+trame.state.set('b', 3);
+trame.state.update({
+ a: 2.5,
+ b: 3.5,
+ c: 4.5,
})
+
+// get
+console.log(trame.state.get("c"));
+console.log(trame.state.get('a'));
+
+
+// simple api for state change
+trame.state.watch(
+ ["a", "b", "c"],
+ (a, b, c) => {
+ console.log(`a(${a}) or b(${b}) or c(${c}) have changed`);
+ }
+);
+
+// -----------------------------------
+// Method execution API
+// -----------------------------------
+
+// method execution on Python side
+trame.trigger("name", ['arg_0', 'arg_1'], { kwarg_0: 1, kwarg_1: 2 });
+```
diff --git a/js-lib/examples/vite/README.md b/js-lib/examples/vite/README.md
new file mode 100644
index 0000000..e5787f0
--- /dev/null
+++ b/js-lib/examples/vite/README.md
@@ -0,0 +1,25 @@
+# Vite project
+
+This example use npm package to illustrate how to use the trame iframe client.
+
+## Trame setup
+
+```bash
+python3 -m venv .venv
+source .venv/bin/activate
+pip install trame trame-iframe
+```
+
+## Build the client
+
+```bash
+cd client
+npm i
+npm run build
+```
+
+## Running example
+
+```bash
+python ./server.py --port 3000 --server
+```
diff --git a/js-lib/examples/vite/client/.gitignore b/js-lib/examples/vite/client/.gitignore
new file mode 100644
index 0000000..a547bf3
--- /dev/null
+++ b/js-lib/examples/vite/client/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/js-lib/examples/vite/client/counter.js b/js-lib/examples/vite/client/counter.js
new file mode 100644
index 0000000..f94ba09
--- /dev/null
+++ b/js-lib/examples/vite/client/counter.js
@@ -0,0 +1,9 @@
+export function setupCounter(element, trame) {
+ trame.state.onReady(() => {
+ trame.state.watch(["count"], (count) => {
+ console.log(`count is ${count}`);
+ element.innerHTML = `count is ${count}`;
+ });
+ });
+ element.addEventListener("click", () => trame.trigger("add"));
+}
diff --git a/js-lib/examples/vite/client/index.html b/js-lib/examples/vite/client/index.html
new file mode 100644
index 0000000..ddc7e32
--- /dev/null
+++ b/js-lib/examples/vite/client/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Vite App
+
+
+
+
+
+
diff --git a/js-lib/examples/vite/client/main.js b/js-lib/examples/vite/client/main.js
new file mode 100644
index 0000000..dc27295
--- /dev/null
+++ b/js-lib/examples/vite/client/main.js
@@ -0,0 +1,29 @@
+import ClientCommunicator from "@kitware/trame-iframe-client";
+import "./style.css";
+import { setupCounter } from "./counter.js";
+
+document.querySelector("#app").innerHTML = `
+
+
Hello Trame !
+
+
+
+
+
+
+