diff --git a/js-lib/.eslintrc.cjs b/js-lib/.eslintrc.cjs
new file mode 100644
index 0000000..a0bbe9b
--- /dev/null
+++ b/js-lib/.eslintrc.cjs
@@ -0,0 +1,22 @@
+/* eslint-env node */
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+ root: true,
+ extends: [
+ "eslint:recommended",
+ "@vue/eslint-config-prettier",
+ ],
+ env : {
+ browser : true,
+ es6 : true,
+ },
+ rules : {
+ "no-unused-vars" : 2,
+ "no-undef" : 2
+ },
+ parserOptions: {
+ sourceType: "module",
+ ecmaVersion: "latest",
+ },
+};
diff --git a/js-lib/.gitignore b/js-lib/.gitignore
new file mode 100644
index 0000000..53c37a1
--- /dev/null
+++ b/js-lib/.gitignore
@@ -0,0 +1 @@
+dist
\ No newline at end of file
diff --git a/js-lib/LICENSE b/js-lib/LICENSE
new file mode 100644
index 0000000..7878467
--- /dev/null
+++ b/js-lib/LICENSE
@@ -0,0 +1,15 @@
+Apache Software License 2.0
+
+Copyright (c) 2024, Kitware Inc.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
diff --git a/js-lib/README.md b/js-lib/README.md
new file mode 100644
index 0000000..469dbe7
--- /dev/null
+++ b/js-lib/README.md
@@ -0,0 +1,46 @@
+# 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)
+
+## 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";
+
+const trame = new ClientCommunicator(iframe, iframe_url);
+
+// 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 !
+
+
+
+
+
+
+