diff --git a/crates/loro-wasm/src/lib.rs b/crates/loro-wasm/src/lib.rs
index d537d63a..9c4ca655 100644
--- a/crates/loro-wasm/src/lib.rs
+++ b/crates/loro-wasm/src/lib.rs
@@ -48,6 +48,20 @@ fn run() {
     console_error_panic_hook::set_once();
 }
 
+#[wasm_bindgen]
+pub fn encodeFrontiers(frontiers: Vec<JsID>) -> JsResult<Vec<u8>> {
+    let frontiers = ids_to_frontiers(frontiers)?;
+    let encoded = frontiers.encode();
+    Ok(encoded)
+}
+
+#[wasm_bindgen]
+pub fn decodeFrontiers(bytes: &[u8]) -> JsResult<JsIDs> {
+    let frontiers =
+        Frontiers::decode(bytes).map_err(|_| JsError::new("Invalid frontiers binary data"))?;
+    Ok(frontiers_to_ids(&frontiers))
+}
+
 /// Enable debug info of Loro
 #[wasm_bindgen(js_name = setDebug)]
 pub fn set_debug() {
diff --git a/loro-js/tests/basic.test.ts b/loro-js/tests/basic.test.ts
index f5b1ee9c..e4567151 100644
--- a/loro-js/tests/basic.test.ts
+++ b/loro-js/tests/basic.test.ts
@@ -12,6 +12,9 @@ import {
   VersionVector,
   MapDiff,
   TextDiff,
+  Frontiers,
+  encodeFrontiers,
+  decodeFrontiers,
 } from "../src";
 
 it("basic example", () => {
@@ -608,3 +611,11 @@ it("can query pending txn length", () => {
   doc.commit();
   expect(doc.getPendingTxnLength()).toBe(0);
 })
+
+
+it("can encode/decode frontiers", () => {
+  const frontiers = [{ peer: "1123", counter: 1 }, { peer: "222", counter: 2 }] as Frontiers;
+  const encoded = encodeFrontiers(frontiers);
+  const decoded = decodeFrontiers(encoded);
+  expect(decoded).toStrictEqual(frontiers);
+})