snapshot of https://github.com/ueberdosis/hocuspocus.git @ cf3cfa355b4d3bb61c6b6c80071f71783e32470e (2026-09-15)

2026-09-15 17:21:35 +05:00
commit e0c588ca1c
265 changed files with 55259 additions and 0 deletions
--- a/playground/README.md
+++ b/playground/README.md
@@ -0,0 +1,23 @@
+# Hocuspocus Playground
+
+```
+Hi!
+
+Welcome to the playground. This is mainly meant for internal usage during Hocuspocus development,
+but feel free to fiddle around here and find a few examples of how things can work.
+
+Please note that there are different packages used in frontend / backend folders, so you should
+run `pnpm install` in both if you get any errors.
+
+The playground is importing @hocuspocus packages from the packages folder, so you need to build them first.
+Run `pnpm build:packages` in the repo root to do that.
+If you want changes inside the packages folder to compile live, you can use rollup: `rollup -c -w`.
+
+(see also docs/contributing.md)
+
+You can run `pnpm playground` in the repository root, which will spin up a development server on
+http://127.0.0.1:3000.
+
+If you have any questions, feel free to join our discord or ask on Github (links can be found in the
+repo README.md one folder up).
+```
--- a/playground/backend/.gitignore
+++ b/playground/backend/.gitignore
@@ -0,0 +1,3 @@
+/database
+/dashboard
+/db.sqlite
--- a/playground/backend/CHANGELOG.md
+++ b/playground/backend/CHANGELOG.md
@@ -0,0 +1,973 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.4.6-rc.1](https://github.com/ueberdosis/hocuspocus/compare/v3.4.6-rc.0...v3.4.6-rc.1) (2026-02-03)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.4.6-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.4.5-rc.0...v3.4.6-rc.0) (2026-02-03)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.4.5-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.4.4...v3.4.5-rc.0) (2026-02-03)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.4.4](https://github.com/ueberdosis/hocuspocus/compare/v3.4.3...v3.4.4) (2026-01-25)
+
+
+### Bug Fixes
+
+* fixes hono types in playground ([#1045](https://github.com/ueberdosis/hocuspocus/issues/1045)) ([163fbed](https://github.com/ueberdosis/hocuspocus/commit/163fbed167222eac8e89095cca09074bb7ddf6e2))
+
+
+
+
+
+## [3.4.3](https://github.com/ueberdosis/hocuspocus/compare/v3.4.2...v3.4.3) (2025-12-15)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.4.2](https://github.com/ueberdosis/hocuspocus/compare/v3.4.1...v3.4.2) (2025-12-15)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.4.1](https://github.com/ueberdosis/hocuspocus/compare/v3.4.0...v3.4.1) (2025-12-09)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [3.4.0](https://github.com/ueberdosis/hocuspocus/compare/v3.3.2...v3.4.0) (2025-10-24)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.3.2](https://github.com/ueberdosis/hocuspocus/compare/v3.3.1...v3.3.2) (2025-10-23)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.3.1](https://github.com/ueberdosis/hocuspocus/compare/v3.3.0...v3.3.1) (2025-10-22)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [3.3.0](https://github.com/ueberdosis/hocuspocus/compare/v3.2.6...v3.3.0) (2025-10-22)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.2.6](https://github.com/ueberdosis/hocuspocus/compare/v3.2.5...v3.2.6) (2025-10-17)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.2.5](https://github.com/ueberdosis/hocuspocus/compare/v3.2.4...v3.2.5) (2025-10-07)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.2.4](https://github.com/ueberdosis/hocuspocus/compare/v3.2.3...v3.2.4) (2025-09-30)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.2.3](https://github.com/ueberdosis/hocuspocus/compare/v3.2.2...v3.2.3) (2025-08-06)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.2.2](https://github.com/ueberdosis/hocuspocus/compare/v3.2.1...v3.2.2) (2025-07-28)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.2.1](https://github.com/ueberdosis/hocuspocus/compare/v3.2.0...v3.2.1) (2025-07-20)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [3.2.0](https://github.com/ueberdosis/hocuspocus/compare/v3.1.12...v3.2.0) (2025-07-12)
+
+
+### Features
+
+* adds hono example to backend playground ([bb2d390](https://github.com/ueberdosis/hocuspocus/commit/bb2d3902fc406e2964f422eda52b4fcc035f734e))
+* playground ([ea54455](https://github.com/ueberdosis/hocuspocus/commit/ea544550b4b76f519a547008e3b77b76388996f2))
+
+
+
+
+
+## [3.1.12](https://github.com/ueberdosis/hocuspocus/compare/v3.1.11...v3.1.12) (2025-07-09)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.1.10](https://github.com/ueberdosis/hocuspocus/compare/v3.1.9...v3.1.10) (2025-07-08)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.1.8](https://github.com/ueberdosis/hocuspocus/compare/v3.1.7...v3.1.8) (2025-07-01)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.1.7](https://github.com/ueberdosis/hocuspocus/compare/v3.1.6...v3.1.7) (2025-06-22)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.1.6](https://github.com/ueberdosis/hocuspocus/compare/v3.1.5...v3.1.6) (2025-06-20)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.1.5](https://github.com/ueberdosis/hocuspocus/compare/v3.1.4...v3.1.5) (2025-06-19)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.1.4](https://github.com/ueberdosis/hocuspocus/compare/v3.1.3...v3.1.4) (2025-06-17)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.1.3](https://github.com/ueberdosis/hocuspocus/compare/v3.1.2...v3.1.3) (2025-06-06)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.1.2](https://github.com/ueberdosis/hocuspocus/compare/v3.1.1...v3.1.2) (2025-06-05)
+
+
+### Bug Fixes
+
+* fixes koa example in playground ([1a73d14](https://github.com/ueberdosis/hocuspocus/commit/1a73d14221a006f38d07063d7001ae8f1e14deaf))
+
+
+
+
+
+## [3.1.1](https://github.com/ueberdosis/hocuspocus/compare/v3.1.1-rc.1...v3.1.1) (2025-05-10)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.1.1-rc.1](https://github.com/ueberdosis/hocuspocus/compare/v3.1.1-rc.0...v3.1.1-rc.1) (2025-05-08)
+
+
+### Bug Fixes
+
+* fixes express/koa backend demo, fixes [#939](https://github.com/ueberdosis/hocuspocus/issues/939) ([ddec715](https://github.com/ueberdosis/hocuspocus/commit/ddec7153e7d40725d6551d7dfbc61aac1b2b042e))
+
+
+
+
+
+## [3.1.1-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.1.0...v3.1.1-rc.0) (2025-04-30)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [3.1.0](https://github.com/ueberdosis/hocuspocus/compare/v3.1.0-rc.0...v3.1.0) (2025-04-29)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [3.1.0-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.8-rc.0...v3.1.0-rc.0) (2025-04-28)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.0.8-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.7-rc.0...v3.0.8-rc.0) (2025-04-09)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.0.7-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.6-rc.0...v3.0.7-rc.0) (2025-04-09)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.0.6-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.5-rc.0...v3.0.6-rc.0) (2025-03-28)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.0.5-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.4-rc.0...v3.0.5-rc.0) (2025-03-28)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.0.4-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.3-rc.0...v3.0.4-rc.0) (2025-03-20)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.0.3-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.15.2...v3.0.3-rc.0) (2025-03-20)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.0.2-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.15.2...v3.0.2-rc.0) (2025-03-13)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [3.0.1-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.15.2...v3.0.1-rc.0) (2025-03-13)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [3.0.0](https://github.com/ueberdosis/hocuspocus/compare/v2.15.2...v3.0.0) (2025-03-13)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.15.2](https://github.com/ueberdosis/hocuspocus/compare/v2.15.1...v2.15.2) (2025-02-03)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.15.1](https://github.com/ueberdosis/hocuspocus/compare/v2.15.1-rc.0...v2.15.1) (2025-01-29)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.15.1-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.15.0...v2.15.1-rc.0) (2025-01-29)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.15.0](https://github.com/ueberdosis/hocuspocus/compare/v2.14.0...v2.15.0) (2024-12-10)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.14.0](https://github.com/ueberdosis/hocuspocus/compare/v2.13.7...v2.14.0) (2024-11-20)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.13.7](https://github.com/ueberdosis/hocuspocus/compare/v2.13.6...v2.13.7) (2024-10-08)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.13.6](https://github.com/ueberdosis/hocuspocus/compare/v2.13.5...v2.13.6) (2024-09-19)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.13.5](https://github.com/ueberdosis/hocuspocus/compare/v2.13.5-rc.0...v2.13.5) (2024-07-02)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.13.5-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.13.4-rc.0...v2.13.5-rc.0) (2024-07-01)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.13.4-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.13.2...v2.13.4-rc.0) (2024-07-01)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.13.3-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.13.2...v2.13.3-rc.0) (2024-07-01)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.13.2](https://github.com/ueberdosis/hocuspocus/compare/v2.13.1...v2.13.2) (2024-06-14)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.13.1](https://github.com/ueberdosis/hocuspocus/compare/v2.13.0...v2.13.1) (2024-06-06)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.13.0](https://github.com/ueberdosis/hocuspocus/compare/v2.12.3...v2.13.0) (2024-05-18)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.12.3](https://github.com/ueberdosis/hocuspocus/compare/v2.12.2...v2.12.3) (2024-05-16)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.12.2](https://github.com/ueberdosis/hocuspocus/compare/v2.12.2-rc.0...v2.12.2) (2024-04-25)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.12.2-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.12.1-rc.0...v2.12.2-rc.0) (2024-03-29)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.12.1-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.12.0-rc.0...v2.12.1-rc.0) (2024-03-29)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.12.0-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.11.3...v2.12.0-rc.0) (2024-03-24)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.11.3](https://github.com/ueberdosis/hocuspocus/compare/v2.11.2...v2.11.3) (2024-03-02)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.11.2](https://github.com/ueberdosis/hocuspocus/compare/v2.11.1...v2.11.2) (2024-02-16)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.11.1](https://github.com/ueberdosis/hocuspocus/compare/v2.11.0...v2.11.1) (2024-02-11)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.11.0](https://github.com/ueberdosis/hocuspocus/compare/v2.10.0...v2.11.0) (2024-02-05)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.10.0](https://github.com/ueberdosis/hocuspocus/compare/v2.9.2-rc.0...v2.10.0) (2024-01-31)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.9.2-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.9.1-rc.0...v2.9.2-rc.0) (2024-01-22)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.9.1-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.9.0...v2.9.1-rc.0) (2024-01-18)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.9.0](https://github.com/ueberdosis/hocuspocus/compare/v2.9.0-rc.0...v2.9.0) (2024-01-05)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.9.0-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.8.1...v2.9.0-rc.0) (2024-01-04)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.8.1](https://github.com/ueberdosis/hocuspocus/compare/v2.8.0...v2.8.1) (2023-11-21)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.8.0](https://github.com/ueberdosis/hocuspocus/compare/v2.7.1...v2.8.0) (2023-11-15)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.7.1](https://github.com/ueberdosis/hocuspocus/compare/v2.7.0...v2.7.1) (2023-10-19)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.7.0](https://github.com/ueberdosis/hocuspocus/compare/v2.6.1...v2.7.0) (2023-10-16)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.6.1](https://github.com/ueberdosis/hocuspocus/compare/v2.6.0...v2.6.1) (2023-10-05)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.6.0](https://github.com/ueberdosis/hocuspocus/compare/v2.5.0...v2.6.0) (2023-10-04)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.5.0](https://github.com/ueberdosis/hocuspocus/compare/v2.5.0-rc.0...v2.5.0) (2023-09-06)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.5.0-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.4.0...v2.5.0-rc.0) (2023-08-24)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.4.0](https://github.com/ueberdosis/hocuspocus/compare/v2.4.0-rc.1...v2.4.0) (2023-08-17)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.4.0-rc.1](https://github.com/ueberdosis/hocuspocus/compare/v2.4.0-rc.0...v2.4.0-rc.1) (2023-08-12)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.4.0-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v2.3.1...v2.4.0-rc.0) (2023-08-12)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.3.1](https://github.com/ueberdosis/hocuspocus/compare/v2.3.0...v2.3.1) (2023-08-01)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.3.0](https://github.com/ueberdosis/hocuspocus/compare/v2.2.3...v2.3.0) (2023-07-31)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.2.3](https://github.com/ueberdosis/hocuspocus/compare/v2.2.2...v2.2.3) (2023-07-14)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.2.2](https://github.com/ueberdosis/hocuspocus/compare/v2.2.1...v2.2.2) (2023-07-14)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.2.1](https://github.com/ueberdosis/hocuspocus/compare/v2.2.0...v2.2.1) (2023-07-04)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.2.0](https://github.com/ueberdosis/hocuspocus/compare/v2.1.0...v2.2.0) (2023-06-22)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.1.0](https://github.com/ueberdosis/hocuspocus/compare/v2.0.6...v2.1.0) (2023-06-03)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.0.6](https://github.com/ueberdosis/hocuspocus/compare/v2.0.5...v2.0.6) (2023-04-25)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.0.5](https://github.com/ueberdosis/hocuspocus/compare/v2.0.4...v2.0.5) (2023-04-24)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.0.4](https://github.com/ueberdosis/hocuspocus/compare/v2.0.3...v2.0.4) (2023-04-23)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.0.3](https://github.com/ueberdosis/hocuspocus/compare/v2.0.2...v2.0.3) (2023-04-05)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.0.2](https://github.com/ueberdosis/hocuspocus/compare/v2.0.1...v2.0.2) (2023-04-04)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [2.0.1](https://github.com/ueberdosis/hocuspocus/compare/v2.0.0...v2.0.1) (2023-03-30)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.0.0](https://github.com/ueberdosis/hocuspocus/compare/v1.1.3...v2.0.0) (2023-03-29)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.0.0-beta.0](https://github.com/ueberdosis/hocuspocus/compare/v1.1.1...v2.0.0-beta.0) (2023-03-28)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.0.0-alpha.1](https://github.com/ueberdosis/hocuspocus/compare/v2.0.0-alpha.0...v2.0.0-alpha.1) (2023-03-23)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [2.0.0-alpha.0](https://github.com/ueberdosis/hocuspocus/compare/v1.1.0...v2.0.0-alpha.0) (2023-02-28)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [1.1.0](https://github.com/ueberdosis/hocuspocus/compare/v1.0.2...v1.1.0) (2023-02-24)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [1.0.2](https://github.com/ueberdosis/hocuspocus/compare/v1.0.1...v1.0.2) (2023-02-16)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [1.0.1](https://github.com/ueberdosis/hocuspocus/compare/v1.0.0...v1.0.1) (2023-01-30)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [1.0.0](https://github.com/ueberdosis/hocuspocus/compare/v1.0.0-beta.7...v1.0.0) (2023-01-18)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [1.0.0-beta.7](https://github.com/ueberdosis/hocuspocus/compare/v1.0.0-beta.6...v1.0.0-beta.7) (2023-01-11)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [1.0.0-beta.6](https://github.com/ueberdosis/hocuspocus/compare/v1.0.0-beta.5...v1.0.0-beta.6) (2022-12-03)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [1.0.0-beta.5](https://github.com/ueberdosis/hocuspocus/compare/v1.0.0-beta.3...v1.0.0-beta.5) (2022-11-25)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [1.0.0-beta.4](https://github.com/ueberdosis/hocuspocus/compare/v1.0.0-beta.3...v1.0.0-beta.4) (2022-11-25)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [1.0.0-beta.3](https://github.com/ueberdosis/hocuspocus/compare/v1.0.0-beta.2...v1.0.0-beta.3) (2022-11-03)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [1.0.0-beta.2](https://github.com/ueberdosis/hocuspocus/compare/v1.0.0-beta.1...v1.0.0-beta.2) (2022-09-28)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# 1.0.0-beta.111 (2022-09-28)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [0.2.6](https://github.com/ueberdosis/hocuspocus/compare/@hocuspocus/server-demos@0.2.5...@hocuspocus/server-demos@0.2.6) (2021-06-08)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [0.2.5](https://github.com/ueberdosis/hocuspocus/compare/@hocuspocus/server-demos@0.2.4...@hocuspocus/server-demos@0.2.5) (2021-05-15)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [0.2.4](https://github.com/ueberdosis/hocuspocus/compare/@hocuspocus/server-demos@0.2.3...@hocuspocus/server-demos@0.2.4) (2021-04-20)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [0.2.3](https://github.com/ueberdosis/hocuspocus/compare/@hocuspocus/server-demos@0.2.2...@hocuspocus/server-demos@0.2.3) (2021-04-20)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [0.2.2](https://github.com/ueberdosis/hocuspocus/compare/@hocuspocus/server-demos@0.2.1...@hocuspocus/server-demos@0.2.2) (2021-04-12)
+
+
+### Bug Fixes
+
+* demos ([59b73de](https://github.com/ueberdosis/hocuspocus/commit/59b73de474f23b563995264f87a395e65ff73fee))
+
+
+
+
+
+## [0.2.1](https://github.com/ueberdosis/hocuspocus/compare/@hocuspocus/server-demos@0.2.0...@hocuspocus/server-demos@0.2.1) (2021-04-08)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+# [0.2.0](https://github.com/ueberdosis/hocuspocus/compare/@hocuspocus/server-demos@0.1.37...@hocuspocus/server-demos@0.2.0) (2021-04-07)
+
+
+### Features
+
+* add connect event to webhook extension ([d907354](https://github.com/ueberdosis/hocuspocus/commit/d907354561ca31130061b6393c240598d67259b1))
+* add create event to import documents from api ([240a032](https://github.com/ueberdosis/hocuspocus/commit/240a032a8d839144f9662c1ec947958823abfd45))
+* add disconnect event to webhook extension ([81679dd](https://github.com/ueberdosis/hocuspocus/commit/81679dd7828e96fc6e0a279880379eb16b28d788))
+
+
+
+
+
+## [0.1.37](https://github.com/ueberdosis/hocuspocus/compare/@hocuspocus/server-demos@0.1.36...@hocuspocus/server-demos@0.1.37) (2021-04-06)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [0.1.36](https://github.com/ueberdosis/hocuspocus/compare/@hocuspocus/server-demos@0.1.35...@hocuspocus/server-demos@0.1.36) (2021-03-29)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## [0.1.35](https://github.com/ueberdosis/hocuspocus/compare/@hocuspocus/server-demos@0.1.34...@hocuspocus/server-demos@0.1.35) (2021-03-29)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
+
+
+
+
+
+## 0.1.34 (2021-03-18)
+
+**Note:** Version bump only for package @hocuspocus/server-demos
--- a/playground/backend/package.json
+++ b/playground/backend/package.json
@@ -0,0 +1,39 @@
+{
+	"name": "@hocuspocus/server-demos",
+	"version": "3.4.6-rc.1",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"start": "node --conditions=source --experimental-transform-types",
+		"dev": "nodemon -e ts --watch ./ --watch ../../packages --exec pnpm start"
+	},
+	"dependencies": {
+		"@hocuspocus/extension-logger": "workspace:*",
+		"@hocuspocus/extension-redis": "workspace:*",
+		"@hocuspocus/extension-sqlite": "workspace:*",
+		"@hocuspocus/extension-webhook": "workspace:*",
+		"@hocuspocus/server": "workspace:*",
+		"@hocuspocus/transformer": "workspace:*",
+		"@hono/node-server": "^1.19.17",
+		"@hono/node-ws": "^1.3.0",
+		"@tiptap/core": "^3.19.0",
+		"@tiptap/pm": "^3.19.0",
+		"@tiptap/starter-kit": "^3.19.0",
+		"@types/express": "^4.17.25",
+		"@types/express-ws": "^3.0.6",
+		"@types/node": "^16.18.126",
+		"cors": "^2.8.6",
+		"express": "^4.22.1",
+		"express-ws": "^5.0.2",
+		"hono": "^4.12.34",
+		"jsonwebtoken": "9.0.3",
+		"koa": "^3.1.2",
+		"koa-easy-ws": "^1.3.1",
+		"yjs": "^13.6.29"
+	},
+	"devDependencies": {
+		"@types/jsonwebtoken": "^9.0.10",
+		"@types/koa": "^2.15.0",
+		"nodemon": "^3.1.14"
+	}
+}
--- a/playground/backend/src/bun.ts
+++ b/playground/backend/src/bun.ts
@@ -0,0 +1,59 @@
+import { Logger } from "@hocuspocus/extension-logger";
+import { Hocuspocus } from "@hocuspocus/server";
+import crossws from "crossws/adapters/bun";
+
+const hocuspocus = new Hocuspocus({
+	extensions: [new Logger()],
+});
+
+const ws = crossws({
+	hooks: {
+		open(peer) {
+			// Use peer methods instead of peer.websocket to avoid
+			// Bun's Proxy `this` binding issue with ServerWebSocket
+			const wsLike = {
+				get readyState() {
+					return peer.websocket.readyState ?? 3; // 3 = CLOSED
+				},
+				send(data: any) {
+					peer.send(data);
+				},
+				close(code?: number, reason?: string) {
+					peer.close(code, reason);
+				},
+			};
+			const clientConnection = hocuspocus.handleConnection(
+				wsLike,
+				peer.request as Request,
+			);
+			(peer as any)._hocuspocus = clientConnection;
+		},
+		message(peer, message) {
+			(peer as any)._hocuspocus?.handleMessage(message.uint8Array());
+		},
+		close(peer, event) {
+			(peer as any)._hocuspocus?.handleClose({
+				code: event.code,
+				reason: event.reason,
+			});
+		},
+		error(peer, error) {
+			console.error("WebSocket error for peer:", peer.id);
+			console.error(error);
+		},
+	},
+});
+
+Bun.serve({
+	port: 8000,
+	websocket: ws.websocket,
+	fetch(request, server) {
+		if (request.headers.get("upgrade") === "websocket") {
+			return ws.handleUpgrade(request, server);
+		}
+
+		return new Response("Welcome to Hocuspocus!");
+	},
+});
+
+console.log("Listening on ws://127.0.0.1:8000");
--- a/playground/backend/src/default.ts
+++ b/playground/backend/src/default.ts
@@ -0,0 +1,58 @@
+import { Logger } from "@hocuspocus/extension-logger";
+import { SQLite } from "@hocuspocus/extension-sqlite";
+import { Server } from "@hocuspocus/server";
+
+const server = new Server({
+	port: 8000,
+	address: "127.0.0.1",
+	name: "hocuspocus-fra1-01",
+	extensions: [
+		new Logger(),
+		new SQLite({
+			database: "db.sqlite",
+		}),
+	],
+
+	// async onAuthenticate(data) {
+	//   if (data.token !== 'my-access-token') {
+	//     throw new Error('Incorrect access token')
+	//   }
+	// },
+
+	// Test error handling
+	// async onConnect(data) {
+	//   throw new Error('CRASH')
+	// },
+
+	// async onConnect(data) {
+	//   await new Promise((resolve, reject) => setTimeout(() => {
+	//     // @ts-expect-error
+	//     reject()
+	//   }, 1337))
+	// },
+
+	// async onConnect(data) {
+	//   await new Promise((resolve, reject) => setTimeout(() => {
+	//     // @ts-expect-error
+	//     resolve()
+	//   }, 1337))
+	// },
+
+	// Intercept HTTP requests
+	// onRequest(data) {
+	//   return new Promise((resolve, reject) => {
+	//     const { response } = data
+	//     // Respond with your custom content
+	//     response.writeHead(200, { 'Content-Type': 'text/plain' })
+	//     response.end('This is my custom response, yay!')
+
+	//     // Rejecting the promise will stop the chain and no further
+	//     // onRequest hooks are run
+	//     return reject()
+	//   })
+	// },
+});
+
+// server.enableMessageLogging()
+
+server.listen();
--- a/playground/backend/src/deno.ts
+++ b/playground/backend/src/deno.ts
@@ -0,0 +1,27 @@
+// @ts-nocheck - Deno types not installed
+import { Hocuspocus } from "@hocuspocus/server";
+const hocuspocus = new Hocuspocus({
+	name: "collaboration",
+});
+
+Deno.serve((req) => {
+	if (req.headers.get("upgrade") !== "websocket") {
+		return new Response(null, { status: 501 });
+	}
+
+	const { socket, response } = Deno.upgradeWebSocket(req);
+
+	socket.binaryType = "arraybuffer";
+
+	const clientConnection = hocuspocus.handleConnection(socket, req);
+
+	socket.addEventListener("message", (event) => {
+		clientConnection.handleMessage(new Uint8Array(event.data));
+	});
+
+	socket.addEventListener("close", (event) => {
+		clientConnection.handleClose({ code: event.code, reason: event.reason });
+	});
+
+	return response;
+});
--- a/playground/backend/src/express.ts
+++ b/playground/backend/src/express.ts
@@ -0,0 +1,49 @@
+import { Logger } from "@hocuspocus/extension-logger";
+import { Hocuspocus, type WebSocketLike } from "@hocuspocus/server";
+import { createServer } from "node:http";
+import crossws from "crossws/adapters/node";
+import express from "express";
+
+const hocuspocus = new Hocuspocus({
+	extensions: [new Logger()],
+});
+
+const app = express();
+
+app.get("/", (request, response) => {
+	response.send("Hello World!");
+});
+
+const server = createServer(app);
+
+const ws = crossws({
+	hooks: {
+		open(peer) {
+			const clientConnection = hocuspocus.handleConnection(
+				peer.websocket as unknown as WebSocketLike,
+				peer.request as Request,
+				{ user_id: 1234 },
+			);
+			(peer as any)._hocuspocus = clientConnection;
+		},
+		message(peer, message) {
+			(peer as any)._hocuspocus?.handleMessage(message.uint8Array());
+		},
+		close(peer, event) {
+			(peer as any)._hocuspocus?.handleClose({
+				code: event.code,
+				reason: event.reason,
+			});
+		},
+		error(peer, error) {
+			console.error("WebSocket error for peer:", peer.id);
+			console.error(error);
+		},
+	},
+});
+
+server.on("upgrade", (request, socket, head) => {
+	ws.handleUpgrade(request, socket, head);
+});
+
+server.listen(1234, () => console.log("Listening on http://127.0.0.1:1234…"));
--- a/playground/backend/src/hono.ts
+++ b/playground/backend/src/hono.ts
@@ -0,0 +1,51 @@
+// @ts-nocheck - Hono adapter types not installed
+import { Hocuspocus } from "@hocuspocus/server";
+import { Hono } from "hono";
+
+import { serve } from "@hono/node-server";
+import { createNodeWebSocket } from "@hono/node-ws";
+
+const hocuspocus = new Hocuspocus({
+	// …
+});
+
+const app = new Hono();
+
+const { injectWebSocket, upgradeWebSocket } = createNodeWebSocket({ app });
+
+app.get(
+	"/",
+	upgradeWebSocket((c) => {
+		let clientConnection;
+		return {
+			onOpen(_evt, ws) {
+				ws.raw.binaryType = "arraybuffer";
+				clientConnection = hocuspocus.handleConnection(ws.raw, c.req.raw, {});
+			},
+			onMessage(evt) {
+				clientConnection?.handleMessage(new Uint8Array(evt.data));
+			},
+			onClose(_evt, ws) {
+				clientConnection?.handleClose();
+			},
+		};
+	}),
+);
+
+const server = serve(
+	{
+		fetch: app.fetch,
+		port: 8000,
+	},
+	(info) => {
+		hocuspocus.hooks("onListen", {
+			instance: hocuspocus,
+			configuration: hocuspocus.configuration,
+			port: info.port,
+		});
+	},
+);
+
+injectWebSocket(server);
+
+console.log("Hono server is running on ws://127.0.0.1:8000");
--- a/playground/backend/src/koa.ts
+++ b/playground/backend/src/koa.ts
@@ -0,0 +1,49 @@
+import { Logger } from "@hocuspocus/extension-logger";
+import { Hocuspocus, type WebSocketLike } from "@hocuspocus/server";
+import { createServer } from "node:http";
+import crossws from "crossws/adapters/node";
+import Koa from "koa";
+
+const hocuspocus = new Hocuspocus({
+	extensions: [new Logger()],
+});
+
+const app = new Koa();
+
+app.use(async (ctx) => {
+	ctx.body = "Hello World!";
+});
+
+const server = createServer(app.callback());
+
+const ws = crossws({
+	hooks: {
+		open(peer) {
+			const clientConnection = hocuspocus.handleConnection(
+				peer.websocket as unknown as WebSocketLike,
+				peer.request as Request,
+				{ user_id: 1234 },
+			);
+			(peer as any)._hocuspocus = clientConnection;
+		},
+		message(peer, message) {
+			(peer as any)._hocuspocus?.handleMessage(message.uint8Array());
+		},
+		close(peer, event) {
+			(peer as any)._hocuspocus?.handleClose({
+				code: event.code,
+				reason: event.reason,
+			});
+		},
+		error(peer, error) {
+			console.error("WebSocket error for peer:", peer.id);
+			console.error(error);
+		},
+	},
+});
+
+server.on("upgrade", (request, socket, head) => {
+	ws.handleUpgrade(request, socket, head);
+});
+
+server.listen(1234);
--- a/playground/backend/src/load-document.ts
+++ b/playground/backend/src/load-document.ts
@@ -0,0 +1,63 @@
+import type { onLoadDocumentPayload } from '@hocuspocus/server'
+import { Server } from '@hocuspocus/server'
+import { Logger } from '@hocuspocus/extension-logger'
+import { TiptapTransformer } from '@hocuspocus/transformer'
+import { SQLite } from '@hocuspocus/extension-sqlite'
+
+const getProseMirrorJSON = (text: string) => {
+  return {
+    type: 'doc',
+    content: [
+      {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text,
+          },
+        ],
+      },
+    ],
+  }
+}
+
+const server = new Server({
+  port: 1234,
+  extensions: [
+    new Logger(),
+    new SQLite({
+      database: 'db.sqlite',
+    }),
+  ],
+
+  async onConnect(data) {
+    await new Promise(resolve => setTimeout(() => {
+      // @ts-expect-error
+      resolve()
+    }, 1337))
+  },
+
+  async onLoadDocument(data: onLoadDocumentPayload) {
+    if (data.document.isEmpty('default')) {
+      const defaultField = TiptapTransformer.toYdoc(
+        getProseMirrorJSON('What is love?'),
+        'default',
+      )
+
+      data.document.merge(defaultField)
+    }
+
+    if (data.document.isEmpty('secondary')) {
+      const secondaryField = TiptapTransformer.toYdoc(
+        getProseMirrorJSON('Baby don\'t hurt me…'),
+        'secondary',
+      )
+
+      data.document.merge(secondaryField)
+    }
+
+    return data.document
+  },
+})
+
+server.listen()
--- a/playground/backend/src/redis.ts
+++ b/playground/backend/src/redis.ts
@@ -0,0 +1,38 @@
+import { Server } from '@hocuspocus/server'
+import { Logger } from '@hocuspocus/extension-logger'
+import { Redis } from '@hocuspocus/extension-redis'
+import { SQLite } from '@hocuspocus/extension-sqlite'
+
+const server = new Server({
+  port: 1234,
+  name: 'redis-1',
+  extensions: [
+    new Logger(),
+    new Redis({
+      host: '127.0.0.1',
+      port: 6379,
+    }),
+    new SQLite(),
+  ],
+})
+
+server.listen()
+
+const anotherServer = new Server({
+  port: 1235,
+  name: 'redis-2',
+  extensions: [
+    new Logger(),
+    new Redis({
+      host: '127.0.0.1',
+      port: 6379,
+    }),
+    new SQLite(),
+  ],
+
+  // onAwarenessUpdate: async ({ documentName, states }) => {
+  //   console.log('onAwarenessUpdate', documentName, states)
+  // },
+})
+
+anotherServer.listen()
--- a/playground/backend/src/s3-redis.ts
+++ b/playground/backend/src/s3-redis.ts
@@ -0,0 +1,132 @@
+import { Server } from '@hocuspocus/server'
+import { Logger } from '@hocuspocus/extension-logger'
+import { Redis } from '@hocuspocus/extension-redis'
+import { S3 } from '@hocuspocus/extension-s3'
+
+// AWS S3 + Redis scaling example (only if AWS credentials are available)
+let awsServer1, awsServer2;
+
+if (process.env.AWS_ACCESS_KEY_ID && process.env.AWS_SECRET_ACCESS_KEY) {
+  awsServer1 = new Server({
+    port: 8001,
+    name: 's3-redis-aws-1',
+    extensions: [
+      new Logger(),
+      new Redis({
+        host: process.env.REDIS_HOST || '127.0.0.1',
+        port: Number(process.env.REDIS_PORT) || 6379,
+      }),
+      new S3({
+        bucket: process.env.S3_BUCKET || 'my-hocuspocus-documents',
+        region: process.env.S3_REGION || 'us-east-1',
+        prefix: process.env.S3_PREFIX || 'collaborative-docs/',
+        credentials: {
+          accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+          secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
+        }
+      }),
+    ],
+  })
+
+  // Second AWS S3 + Redis server instance
+  awsServer2 = new Server({
+    port: 8002,
+    name: 's3-redis-aws-2',
+    extensions: [
+      new Logger(),
+      new Redis({
+        host: process.env.REDIS_HOST || '127.0.0.1',
+        port: Number(process.env.REDIS_PORT) || 6379,
+      }),
+      new S3({
+        bucket: process.env.S3_BUCKET || 'my-hocuspocus-documents',
+        region: process.env.S3_REGION || 'us-east-1',
+        prefix: process.env.S3_PREFIX || 'collaborative-docs/',
+        credentials: {
+          accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+          secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
+        }
+      }),
+    ],
+  })
+}
+
+// MinIO + Redis local development example
+const minioServer1 = new Server({
+  port: 8000,
+  name: 's3-redis-minio-1',
+  extensions: [
+    new Logger(),
+    new Redis({
+      host: process.env.REDIS_HOST || '127.0.0.1',
+      port: Number(process.env.REDIS_PORT) || 6379,
+    }),
+    new S3({
+      bucket: process.env.S3_BUCKET || 'hocuspocus-documents',
+      endpoint: process.env.S3_ENDPOINT || 'http://localhost:9000',
+      forcePathStyle: true,
+      credentials: {
+        accessKeyId: process.env.AWS_ACCESS_KEY_ID || 'minioadmin',
+        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || 'minioadmin'
+      }
+    }),
+  ],
+})
+
+const minioServer2 = new Server({
+  port: 8003,
+  name: 's3-redis-minio-2',
+  extensions: [
+    new Logger(),
+    new Redis({
+      host: process.env.REDIS_HOST || '127.0.0.1',
+      port: Number(process.env.REDIS_PORT) || 6379,
+    }),
+    new S3({
+      bucket: process.env.S3_BUCKET || 'hocuspocus-documents',
+      endpoint: process.env.S3_ENDPOINT || 'http://localhost:9000',
+      forcePathStyle: true,
+      credentials: {
+        accessKeyId: process.env.AWS_ACCESS_KEY_ID || 'minioadmin',
+        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || 'minioadmin'
+      }
+    }),
+  ],
+})
+
+// Start server instances
+if (awsServer1 && awsServer2) {
+  awsServer1.listen()
+  awsServer2.listen()
+}
+minioServer1.listen()
+minioServer2.listen()
+
+const awsStatus = (awsServer1 && awsServer2) ? `
+  AWS S3 Instances:
+    Server 1:         http://localhost:8001
+    Server 2:         http://localhost:8002` : `
+  AWS S3 Instances:   [Skipped - no AWS credentials found]`
+
+console.log(`
+🚀 S3 + Redis Scaling Examples Started:
+${awsStatus}
+
+  MinIO Instances:
+    Server 1:         http://localhost:8000
+    Server 2:         http://localhost:8003
+
+📝 Environment Variables:
+  REDIS_HOST, REDIS_PORT
+  S3_BUCKET, S3_REGION, S3_ENDPOINT, S3_PREFIX
+  AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY
+
+🔄 Redis handles real-time sync between instances
+💾 S3/MinIO provides persistent document storage
+
+🐳 For local development with Redis + MinIO:
+  docker-compose up redis minio
+
+💡 Documents are stored as: {prefix}{documentName}.bin
+🔗 All server instances share the same Redis and S3 backend
+`)
--- a/playground/backend/src/s3.ts
+++ b/playground/backend/src/s3.ts
@@ -0,0 +1,103 @@
+import { Server } from '@hocuspocus/server'
+import { Logger } from '@hocuspocus/extension-logger'
+import { S3 } from '@hocuspocus/extension-s3'
+
+// Basic AWS S3 example
+const server = new Server({
+  port: 8001,
+  name: 's3-aws',
+  extensions: [
+    new Logger(),
+    new S3({
+      bucket: process.env.S3_BUCKET || 'my-hocuspocus-documents',
+      region: process.env.S3_REGION || 'us-east-1',
+      credentials: process.env.AWS_ACCESS_KEY_ID && process.env.AWS_SECRET_ACCESS_KEY ? {
+        accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
+      } : undefined
+    }),
+  ],
+})
+
+server.listen()
+
+// MinIO S3-compatible example (Main development server)
+const minioServer = new Server({
+  port: 8000,
+  name: 's3-minio',
+  extensions: [
+    new Logger(),
+    new S3({
+      bucket: process.env.S3_BUCKET || 'hocuspocus-documents',
+      endpoint: process.env.S3_ENDPOINT || 'http://localhost:9000',
+      forcePathStyle: true,
+      credentials: {
+        accessKeyId: process.env.AWS_ACCESS_KEY_ID || 'minioadmin',
+        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY || 'minioadmin'
+      }
+    }),
+  ],
+})
+
+minioServer.listen()
+
+// AWS S3 with IAM roles (no credentials needed when running on EC2/Lambda)
+// Falls back to environment variables for local development
+const iamServer = new Server({
+  port: 8002,
+  name: 's3-iam',
+  extensions: [
+    new Logger(),
+    new S3({
+      bucket: process.env.S3_BUCKET || 'my-hocuspocus-documents',
+      region: process.env.S3_REGION || 'us-east-1',
+      prefix: process.env.S3_PREFIX || 'collaborative-docs/',
+      // Use credentials from environment variables for local development
+      credentials: process.env.AWS_ACCESS_KEY_ID && process.env.AWS_SECRET_ACCESS_KEY ? {
+        accessKeyId: process.env.AWS_ACCESS_KEY_ID,
+        secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY
+      } : undefined
+    }),
+  ],
+})
+
+iamServer.listen()
+
+// DigitalOcean Spaces example
+const spacesServer = new Server({
+  port: 8003,
+  name: 's3-spaces',
+  extensions: [
+    new Logger(),
+    new S3({
+      bucket: process.env.S3_BUCKET || 'my-spaces-bucket',
+      region: process.env.S3_REGION || 'nyc3',
+      endpoint: process.env.S3_ENDPOINT || 'https://nyc3.digitaloceanspaces.com',
+      credentials: {
+        accessKeyId: process.env.SPACES_ACCESS_KEY || process.env.AWS_ACCESS_KEY_ID || 'your-spaces-key',
+        secretAccessKey: process.env.SPACES_SECRET_KEY || process.env.AWS_SECRET_ACCESS_KEY || 'your-spaces-secret'
+      }
+    }),
+  ],
+})
+
+spacesServer.listen()
+
+console.log(`
+🚀 S3 Extension Examples Started:
+
+  MinIO (Main):     http://localhost:8000
+  AWS S3:           http://localhost:8001
+  IAM Roles:        http://localhost:8002
+  DigitalOcean:     http://localhost:8003
+
+📝 Environment Variables:
+  S3_BUCKET, S3_REGION, S3_ENDPOINT, S3_PREFIX
+  AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY
+  SPACES_ACCESS_KEY, SPACES_SECRET_KEY
+
+🐳 For local development with MinIO:
+  ./start-dev.sh
+
+💡 Documents are stored as: {prefix}{documentName}.bin
+`)
--- a/playground/backend/src/slow.ts
+++ b/playground/backend/src/slow.ts
@@ -0,0 +1,25 @@
+import { Server } from '@hocuspocus/server'
+import { Logger } from '@hocuspocus/extension-logger'
+import { SQLite } from '@hocuspocus/extension-sqlite'
+
+const server = new Server({
+  port: 1234,
+  extensions: [
+    new Logger(),
+    new SQLite({
+      database: 'db.sqlite',
+    }),
+  ],
+
+  async onConnect(data) {
+    // simulate a very slow authentication process that takes 10 seconds (or more if you want to type more)
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+    await new Promise((resolve: Function) => {
+      setTimeout(() => { resolve() }, 10000)
+    })
+
+    return true
+  },
+})
+
+server.listen()
--- a/playground/backend/src/tiptapcollab.ts
+++ b/playground/backend/src/tiptapcollab.ts
@@ -0,0 +1,21 @@
+import express from 'express'
+import expressWebsockets from 'express-ws'
+// @ts-expect-error
+import jsonwebtoken from 'jsonwebtoken'
+// @ts-expect-error
+import cors from 'cors'
+
+const { app } = expressWebsockets(express())
+app.use(cors())
+
+app.get('/', (request, response) => {
+  // do NOT do this in production, this is just for demo purposes. The secret MUST be stored on the server and never reach the client side.
+  const { secret } = request.query
+
+  const jwt = jsonwebtoken.sign({
+    allowedDocumentNames: ['test1', 'test2'],
+  }, secret?.toString() ?? '')
+
+  response.send(jwt)
+})
+app.listen(1234, () => console.log('Listening on http://127.0.0.1:1234…'))
--- a/playground/backend/src/webhook.ts
+++ b/playground/backend/src/webhook.ts
@@ -0,0 +1,134 @@
+import type { IncomingMessage, ServerResponse, Server as HTTPServer} from 'http'
+import {
+  createServer,
+} from 'http'
+import { createHmac, timingSafeEqual } from 'crypto'
+import { Server } from '@hocuspocus/server'
+import { Logger } from '@hocuspocus/extension-logger'
+import { TiptapTransformer } from '@hocuspocus/transformer'
+import { Events, Webhook } from '@hocuspocus/extension-webhook'
+
+/*
+ * Setup server
+ */
+const server = new Server({
+  port: 1234,
+  extensions: [
+    new Logger(),
+    new Webhook({
+      transformer: TiptapTransformer,
+      secret: '1234',
+      url: 'http://localhost:12345',
+      events: [
+        Events.onCreate, Events.onChange, Events.onConnect,
+      ],
+    }),
+  ],
+})
+
+server.listen()
+
+/*
+ * Setup receiver
+ */
+class WebhookReceiver {
+
+  secret = '1234'
+
+  apiToken = '123456'
+
+  server: HTTPServer
+
+  constructor() {
+    this.server = createServer(this.handleRequest.bind(this))
+
+    this.server.listen(12345, () => {
+      console.log('[WebhookReceiver] listening on port 12345…')
+    })
+  }
+
+  verifySignature(body: string, header: string): boolean {
+    const signature = Buffer.from(header)
+
+    const hmac = createHmac('sha256', this.secret)
+    const digest = Buffer.from(`sha256=${hmac.update(body).digest('hex')}`)
+
+    return signature.length !== digest.length || timingSafeEqual(digest, signature)
+  }
+
+  handleRequest(request: IncomingMessage, response: ServerResponse) {
+    let data = ''
+
+    request.on('data', chunk => {
+      data += chunk
+    })
+
+    request.on('end', () => {
+      if (!this.verifySignature(data, <string> request.headers['x-hocuspocus-signature-256'])) {
+        response.writeHead(403, 'signature not valid')
+      }
+
+      const { event, payload } = <{ event: string, payload: any }> JSON.parse(data)
+
+      try {
+        // @ts-expect-error - let me do some magic here please TypeScript
+        this[`on${event[0].toUpperCase()}${event.substr(1)}`](payload, response)
+      } catch (e) {
+        console.log(`[WebhookReceiver] unknown event "${event}"`)
+      }
+    })
+  }
+
+  onConnect(payload: any, response: ServerResponse) {
+    console.log(`[WebhookReceiver] user connected to ${payload.documentName}`)
+
+    // authorize user
+    if (payload.requestParameters?.token !== this.apiToken) {
+      response.writeHead(403, 'unathorized')
+      return response.end()
+    }
+
+    // return context
+    response.writeHead(200, { 'Content-Type': 'application/json' })
+    response.end(JSON.stringify({
+      user: {
+        id: 1,
+        name: 'John',
+      },
+    }))
+  }
+
+  onCreate(payload: any, response: ServerResponse) {
+    console.log(`[WebhookReceiver] document ${payload.documentName} created`)
+
+    // return a document for the "default" field
+    response.writeHead(200, { 'Content-Type': 'application/json' })
+    response.end(JSON.stringify({
+      default:
+        {
+          type: 'doc',
+          content: [
+            {
+              type: 'paragraph',
+              content: [
+                {
+                  type: 'text',
+                  text: 'What is love?',
+                },
+              ],
+            },
+          ],
+        },
+    }))
+  }
+
+  onChange(payload: any, response: ServerResponse) {
+    console.log(`[WebhookReceiver] document ${payload.documentName} was changed: ${JSON.stringify(payload.document)}`)
+  }
+
+  onDisconnect(payload: any, response: ServerResponse) {
+    console.log(`[WebhookReceiver] user ${payload.context.user.name} disconnected from ${payload.documentName}`)
+  }
+}
+
+const receiver = new WebhookReceiver()
--- a/playground/frontend/.gitignore
+++ b/playground/frontend/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
--- a/playground/frontend/CHANGELOG.md
+++ b/playground/frontend/CHANGELOG.md
@@ -0,0 +1,302 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## [3.4.6-rc.1](https://github.com/ueberdosis/hocuspocus/compare/v3.4.6-rc.0...v3.4.6-rc.1) (2026-02-03)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.4.6-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.4.5-rc.0...v3.4.6-rc.0) (2026-02-03)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.4.5-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.4.4...v3.4.5-rc.0) (2026-02-03)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.4.4](https://github.com/ueberdosis/hocuspocus/compare/v3.4.3...v3.4.4) (2026-01-25)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.4.3](https://github.com/ueberdosis/hocuspocus/compare/v3.4.2...v3.4.3) (2025-12-15)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.4.2](https://github.com/ueberdosis/hocuspocus/compare/v3.4.1...v3.4.2) (2025-12-15)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.4.1](https://github.com/ueberdosis/hocuspocus/compare/v3.4.0...v3.4.1) (2025-12-09)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+# [3.4.0](https://github.com/ueberdosis/hocuspocus/compare/v3.3.2...v3.4.0) (2025-10-24)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.3.2](https://github.com/ueberdosis/hocuspocus/compare/v3.3.1...v3.3.2) (2025-10-23)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.3.1](https://github.com/ueberdosis/hocuspocus/compare/v3.3.0...v3.3.1) (2025-10-22)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+# [3.3.0](https://github.com/ueberdosis/hocuspocus/compare/v3.2.6...v3.3.0) (2025-10-22)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.2.6](https://github.com/ueberdosis/hocuspocus/compare/v3.2.5...v3.2.6) (2025-10-17)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.2.5](https://github.com/ueberdosis/hocuspocus/compare/v3.2.4...v3.2.5) (2025-10-07)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.2.4](https://github.com/ueberdosis/hocuspocus/compare/v3.2.3...v3.2.4) (2025-09-30)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.2.3](https://github.com/ueberdosis/hocuspocus/compare/v3.2.2...v3.2.3) (2025-08-06)
+
+
+### Bug Fixes
+
+* fixes playground plug and play confg ([f9dff84](https://github.com/ueberdosis/hocuspocus/commit/f9dff843e5132fd858ce410e1774089e6b4c9692))
+
+
+
+
+
+## [3.2.2](https://github.com/ueberdosis/hocuspocus/compare/v3.2.1...v3.2.2) (2025-07-28)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.2.1](https://github.com/ueberdosis/hocuspocus/compare/v3.2.0...v3.2.1) (2025-07-20)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+# [3.2.0](https://github.com/ueberdosis/hocuspocus/compare/v3.1.12...v3.2.0) (2025-07-12)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.1.12](https://github.com/ueberdosis/hocuspocus/compare/v3.1.11...v3.1.12) (2025-07-09)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.1.10](https://github.com/ueberdosis/hocuspocus/compare/v3.1.9...v3.1.10) (2025-07-08)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.1.8](https://github.com/ueberdosis/hocuspocus/compare/v3.1.7...v3.1.8) (2025-07-01)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.1.7](https://github.com/ueberdosis/hocuspocus/compare/v3.1.6...v3.1.7) (2025-06-22)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.1.6](https://github.com/ueberdosis/hocuspocus/compare/v3.1.5...v3.1.6) (2025-06-20)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.1.5](https://github.com/ueberdosis/hocuspocus/compare/v3.1.4...v3.1.5) (2025-06-19)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.1.4](https://github.com/ueberdosis/hocuspocus/compare/v3.1.3...v3.1.4) (2025-06-17)
+
+
+### Bug Fixes
+
+* playground: Cannot update a component (`CollaborationStatus`) while rendering a different component (`CollaborativeEditor`) ([9c6b87d](https://github.com/ueberdosis/hocuspocus/commit/9c6b87d882d2a1c00dca55cac1d71de2221a3a6d))
+* playground: destroy instead of detach ([c8b60f8](https://github.com/ueberdosis/hocuspocus/commit/c8b60f84ea7b7df0d04a9aad71e92e8bba2c747c))
+* playground: port 1234 ([62e45d4](https://github.com/ueberdosis/hocuspocus/commit/62e45d40fd7e044daa6b0eee0b96b0786d2c5a6b))
+* playground: update styling of collaboration caret ([4a2506b](https://github.com/ueberdosis/hocuspocus/commit/4a2506ba0fe399280b7cd6cba31602c0660e7a36))
+
+
+### Features
+
+* playground: adds two editors for nicer testing ([b2332f2](https://github.com/ueberdosis/hocuspocus/commit/b2332f21c5369a6e980e19c1ef7842e8cf32b878))
+
+
+
+
+
+## [3.1.3](https://github.com/ueberdosis/hocuspocus/compare/v3.1.2...v3.1.3) (2025-06-06)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.1.2](https://github.com/ueberdosis/hocuspocus/compare/v3.1.1...v3.1.2) (2025-06-05)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.1.1](https://github.com/ueberdosis/hocuspocus/compare/v3.1.1-rc.1...v3.1.1) (2025-05-10)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.1.1-rc.1](https://github.com/ueberdosis/hocuspocus/compare/v3.1.1-rc.0...v3.1.1-rc.1) (2025-05-08)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.1.1-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.1.0...v3.1.1-rc.0) (2025-04-30)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+# [3.1.0](https://github.com/ueberdosis/hocuspocus/compare/v3.1.0-rc.0...v3.1.0) (2025-04-29)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+# [3.1.0-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.8-rc.0...v3.1.0-rc.0) (2025-04-28)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.0.8-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.7-rc.0...v3.0.8-rc.0) (2025-04-09)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.0.7-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.6-rc.0...v3.0.7-rc.0) (2025-04-09)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.0.6-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.5-rc.0...v3.0.6-rc.0) (2025-03-28)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
+
+
+
+
+
+## [3.0.5-rc.0](https://github.com/ueberdosis/hocuspocus/compare/v3.0.4-rc.0...v3.0.5-rc.0) (2025-03-28)
+
+**Note:** Version bump only for package @hocuspocus/frontend-demo
--- a/playground/frontend/README.md
+++ b/playground/frontend/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
--- a/playground/frontend/app/SocketContext1.ts
+++ b/playground/frontend/app/SocketContext1.ts
@@ -0,0 +1,8 @@
+"use client";
+
+import type { HocuspocusProviderWebsocket } from "@hocuspocus/provider";
+import { createContext } from "react";
+
+export const SocketContext1 = createContext<HocuspocusProviderWebsocket | null>(
+	null,
+);
--- a/playground/frontend/app/SocketContext2.ts
+++ b/playground/frontend/app/SocketContext2.ts
@@ -0,0 +1,8 @@
+"use client";
+
+import type { HocuspocusProviderWebsocket } from "@hocuspocus/provider";
+import { createContext } from "react";
+
+export const SocketContext2 = createContext<HocuspocusProviderWebsocket | null>(
+	null,
+);
--- a/playground/frontend/app/articles/[slug]/ArticleEditor.tsx
+++ b/playground/frontend/app/articles/[slug]/ArticleEditor.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import { SocketContext1 } from "@/app/SocketContext1";
+import { SocketContext2 } from "@/app/SocketContext2";
+import CollaborationStatus from "@/app/articles/[slug]/CollaborationStatus";
+import CollaborativeEditor from "@/app/articles/[slug]/CollaborativeEditor";
+import {
+	HocuspocusProvider,
+	HocuspocusProviderWebsocket,
+} from "@hocuspocus/provider";
+// import { TiptapCollabProvider } from "@tiptap-cloud/provider";
+import { useContext, useEffect, useState } from "react";
+
+export default function ArticleEditor({ slug }: { slug: string }) {
+	const socket1 = useContext(SocketContext1);
+	const socket2 = useContext(SocketContext2);
+
+	const [provider1, setProvider1] = useState<HocuspocusProvider>();
+	const [provider2, setProvider2] = useState<HocuspocusProvider>();
+
+	useEffect(() => {
+		if (!socket1 || !socket2) return;
+
+		// Create separate providers for each editor
+		const _p1 = new HocuspocusProvider({
+			websocketProvider: socket1,
+			name: slug,
+			onOpen: (data) => console.log("Editor 1 onOpen!", data),
+			onClose: (data) => console.log("Editor 1 onClose!", data),
+			onAuthenticated: (data) => console.log("Editor 1 onAuthenticated!", data),
+			onAuthenticationFailed: (data) =>
+				console.log("Editor 1 onAuthenticationFailed", data),
+			onUnsyncedChanges: (data) =>
+				console.log("Editor 1 onUnsyncedChanges", data),
+			onStatus(data) {
+				console.log("editor 1 onStatus", data);
+			},
+		});
+
+		const _p2 = new HocuspocusProvider({
+			websocketProvider: socket2,
+			name: slug,
+			onOpen: (data) => console.log("Editor 2 onOpen!", data),
+			onClose: (data) => console.log("Editor 2 onClose!", data),
+			onAuthenticated: (data) => console.log("Editor 2 onAuthenticated!", data),
+			onAuthenticationFailed: (data) =>
+				console.log("Editor 2 onAuthenticationFailed", data),
+			onUnsyncedChanges: (data) =>
+				console.log("Editor 2 onUnsyncedChanges", data),
+			onStatus(data) {
+				console.log("editor 2 onStatus", data);
+			},
+		});
+
+		setProvider1(_p1);
+		setProvider2(_p2);
+
+		return () => {
+			_p1.destroy();
+			_p2.destroy();
+		};
+	}, [socket1, socket2, slug]);
+
+	if (!provider1 || !provider2) {
+		return <></>;
+	}
+
+	// you need to attach here, to make sure the connection gets properly established due to React strict-mode re-run of hooks
+	provider1.attach();
+	provider2.attach();
+
+	return (
+		<div className="flex flex-col min-h-screen">
+			{/* Header */}
+			<header className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200 dark:border-slate-700">
+				<div className="px-8 py-6">
+					<div className="flex items-center justify-between">
+						<div>
+							<h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+								Article #{slug}
+							</h1>
+							<p className="text-slate-600 dark:text-slate-400 mt-1">
+								Real-time collaborative editing - Two editors demonstrating sync
+							</p>
+						</div>
+					</div>
+				</div>
+			</header>
+
+			{/* Main content */}
+			<main className="flex-1 p-8">
+				<div className="max-w-7xl mx-auto space-y-6">
+					{/* Editors side by side */}
+					<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+						{/* Editor 1 */}
+						<div className="space-y-4">
+							<div className="flex items-center justify-between">
+								<h2 className="text-lg font-semibold text-slate-900 dark:text-white">
+									Editor 1
+								</h2>
+								<span className="text-sm text-slate-500 dark:text-slate-400">
+									Independent WebSocket connection
+								</span>
+							</div>
+
+							{/* Status Panel 1 */}
+							<CollaborationStatus provider={provider1} />
+
+							{/* Editor 1 */}
+							<div className="bg-white/30 dark:bg-slate-900/30 backdrop-blur-sm rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-xl">
+								<CollaborativeEditor slug={slug} provider={provider1} />
+							</div>
+						</div>
+
+						{/* Editor 2 */}
+						<div className="space-y-4">
+							<div className="flex items-center justify-between">
+								<h2 className="text-lg font-semibold text-slate-900 dark:text-white">
+									Editor 2
+								</h2>
+								<span className="text-sm text-slate-500 dark:text-slate-400">
+									Independent WebSocket connection
+								</span>
+							</div>
+
+							{/* Status Panel 2 */}
+							<CollaborationStatus provider={provider2} />
+
+							{/* Editor 2 */}
+							<div className="bg-white/30 dark:bg-slate-900/30 backdrop-blur-sm rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-xl">
+								<CollaborativeEditor slug={slug} provider={provider2} />
+							</div>
+						</div>
+					</div>
+
+					{/* Info panel */}
+					<div className="bg-blue-50/50 dark:bg-blue-900/20 backdrop-blur-sm rounded-xl border border-blue-200 dark:border-blue-700 p-6">
+						<div className="flex items-start space-x-3">
+							<div className="flex-shrink-0">
+								<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900/40 rounded-full flex items-center justify-center">
+									<svg
+										className="w-4 h-4 text-blue-600 dark:text-blue-400"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											strokeWidth={2}
+											d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+								</div>
+							</div>
+							<div>
+								<h3 className="text-sm font-medium text-blue-900 dark:text-blue-100">
+									Real-time Collaboration Demo
+								</h3>
+								<p className="text-sm text-blue-700 dark:text-blue-300 mt-1">
+									Both editors are connected to the same document but use
+									separate WebSocket connections. Changes made in one editor
+									will appear in the other in real-time. Try typing in either
+									editor or use the connection controls to test synchronization
+									behavior.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</main>
+		</div>
+	);
+}
--- a/playground/frontend/app/articles/[slug]/CollaborationStatus.tsx
+++ b/playground/frontend/app/articles/[slug]/CollaborationStatus.tsx
@@ -0,0 +1,184 @@
+import type {
+	HocuspocusProvider,
+	onStatusParameters,
+	onUnsyncedChangesParameters,
+} from "@hocuspocus/provider";
+import { useEffect, useState } from "react";
+
+const CollaborationStatus = (props: {
+	provider: HocuspocusProvider;
+}) => {
+	const { provider } = props;
+
+	const [unsyncedChanges, setUnsyncedChanges] = useState(0);
+	const [socketStatus, setSocketStatus] = useState<string | null>(null);
+	const [isAttached, _setAttached] = useState<boolean>(false);
+
+	useEffect(() => {
+		setSocketStatus(provider.configuration.websocketProvider.status);
+		_setAttached(provider.isAttached);
+
+		const handleUnsyncedChanges = (changes: onUnsyncedChangesParameters) => {
+			setUnsyncedChanges(changes.number);
+		};
+
+		const handleSocketStatus = (status: onStatusParameters) => {
+			setSocketStatus(status.status);
+		};
+
+		provider.on("unsyncedChanges", handleUnsyncedChanges);
+		provider.configuration.websocketProvider.on("status", handleSocketStatus);
+
+		return () => {
+			provider.off("unsyncedChanges", handleUnsyncedChanges);
+			provider.configuration.websocketProvider.off(
+				"status",
+				handleSocketStatus,
+			);
+		};
+	}, [provider]);
+
+	const updateAttached = (attach: boolean) => {
+		if (attach) {
+			provider.attach();
+		} else {
+			provider.detach();
+		}
+
+		_setAttached(provider.isAttached);
+	};
+
+	const getStatusColor = (status: string | null) => {
+		switch (status) {
+			case "connected":
+				return "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400";
+			case "connecting":
+				return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400";
+			case "disconnected":
+				return "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400";
+			default:
+				return "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-400";
+		}
+	};
+
+	const UNSYNCED_THRESHOLD = 10;
+
+	return (
+		<div className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 p-6">
+			{/* Alert banner when unsynced changes grow — indicates connection issues */}
+			{unsyncedChanges >= UNSYNCED_THRESHOLD && (
+				<div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center space-x-3">
+					<div className="w-5 h-5 shrink-0 text-red-600 dark:text-red-400">
+						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<p className="text-sm font-medium text-red-800 dark:text-red-200">
+							Connection issue detected
+						</p>
+						<p className="text-xs text-red-600 dark:text-red-400">
+							{unsyncedChanges} changes are waiting to sync. Your edits are
+							saved locally but not yet on the server.
+						</p>
+					</div>
+				</div>
+			)}
+
+			{/* Status indicators */}
+			<div className="flex items-center justify-between mb-6">
+				<h3 className="text-lg font-semibold text-slate-900 dark:text-white">
+					Connection Status
+				</h3>
+				<div className="flex items-center space-x-4">
+					<div className="flex items-center space-x-2">
+						<div
+							className={`w-3 h-3 rounded-full ${socketStatus === "connected" ? "bg-green-500" : socketStatus === "connecting" ? "bg-yellow-500" : "bg-red-500"}`}
+						></div>
+						<span
+							className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(socketStatus)}`}
+						>
+							{socketStatus || "Unknown"}
+						</span>
+					</div>
+					<div className="flex items-center space-x-2">
+						<div
+							className={`w-3 h-3 rounded-full ${provider.isAttached ? "bg-green-500" : "bg-red-500"}`}
+						></div>
+						<span
+							className={`px-2 py-1 rounded-full text-xs font-medium ${provider.isAttached ? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400" : "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400"}`}
+						>
+							{isAttached ? "Attached" : "Detached"}
+						</span>
+					</div>
+					<div className="flex items-center space-x-2">
+						<div
+							className={`w-3 h-3 rounded-full ${unsyncedChanges >= UNSYNCED_THRESHOLD ? "bg-red-500 animate-pulse" : "bg-orange-500 animate-pulse"}`}
+						></div>
+						<span
+							className={`px-2 py-1 rounded-full text-xs font-medium ${unsyncedChanges >= UNSYNCED_THRESHOLD ? "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400" : "bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400"}`}
+						>
+							{unsyncedChanges} unsynced
+						</span>
+					</div>
+				</div>
+			</div>
+
+			{/* Control buttons */}
+			<div className="grid grid-cols-2 gap-6">
+				<div className="space-y-3">
+					<h4 className="text-sm font-medium text-slate-700 dark:text-slate-300">
+						WebSocket Controls
+					</h4>
+					<div className="flex space-x-2">
+						<button
+							className="flex-1 px-3 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+							onClick={() =>
+								provider.configuration.websocketProvider.disconnect()
+							}
+							disabled={socketStatus === "disconnected"}
+						>
+							Disconnect
+						</button>
+						<button
+							className="flex-1 px-3 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+							onClick={() => provider.configuration.websocketProvider.connect()}
+							disabled={socketStatus === "connected"}
+						>
+							Connect
+						</button>
+					</div>
+				</div>
+
+				<div className="space-y-3">
+					<h4 className="text-sm font-medium text-slate-700 dark:text-slate-300">
+						Provider Controls
+					</h4>
+					<div className="flex space-x-2">
+						<button
+							className="flex-1 px-3 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+							onClick={() => updateAttached(false)}
+							disabled={!isAttached}
+						>
+							Detach
+						</button>
+						<button
+							className="flex-1 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+							onClick={() => updateAttached(true)}
+							disabled={isAttached}
+						>
+							Attach
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default CollaborationStatus;
--- a/playground/frontend/app/articles/[slug]/CollaborativeEditor.tsx
+++ b/playground/frontend/app/articles/[slug]/CollaborativeEditor.tsx
@@ -0,0 +1,65 @@
+"use client";
+
+import type { HocuspocusProvider } from "@hocuspocus/provider";
+import { Collaboration } from "@tiptap/extension-collaboration";
+import { CollaborationCaret } from "@tiptap/extension-collaboration-caret";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+import * as Y from "yjs";
+
+const initialContent = [
+	1, 3, 223, 175, 255, 141, 2, 0, 7, 1, 7, 100, 101, 102, 97, 117, 108, 116, 3,
+	9, 112, 97, 114, 97, 103, 114, 97, 112, 104, 7, 0, 223, 175, 255, 141, 2, 0,
+	6, 4, 0, 223, 175, 255, 141, 2, 1, 17, 72, 101, 108, 108, 111, 32, 87, 111,
+	114, 108, 100, 33, 32, 240, 159, 140, 142, 0,
+];
+
+const CollaborativeEditor = (props: {
+	slug: string;
+	provider: HocuspocusProvider;
+}) => {
+	/**
+	 * if you want to load initial content to the editor, the safest way to do so is by applying an initial Yjs update.
+	 * Yjs updates can safely be applied multiple times, while using `setContent` or similar Tiptap commands may result in
+	 * duplicate content in the Tiptap editor.
+	 *
+	 * The easiest way to generate the Yjs update (`initialContent` above) is to do something like
+	 *
+	 * ```
+	 * console.log(Y.encodeStateAsUpdate(provider.props.document).toString())
+	 * ```
+	 *
+	 * after you have filled the editor with the desired content.
+	 */
+	Y.applyUpdate(props.provider.document, Uint8Array.from(initialContent));
+
+	const editor = useEditor(
+		{
+			extensions: [
+				// make sure to turn off the undo-redo extension when using collaboration
+				StarterKit.configure({
+          undoRedo: false,
+        }),
+				Collaboration.configure({
+					document: props.provider.document,
+				}),
+				CollaborationCaret.configure({
+					provider: props.provider,
+				}),
+			],
+			// immediatelyRender needs to be `false` when using SSR
+			immediatelyRender: false,
+			editorProps: {
+				attributes: {
+					class:
+						"prose prose-lg max-w-none focus:outline-none min-h-[500px] p-8 bg-white/50 dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm",
+				},
+			},
+		},
+		[props.provider.document],
+	);
+
+	return <EditorContent editor={editor} />;
+};
+
+export default CollaborativeEditor;
--- a/playground/frontend/app/articles/[slug]/page.tsx
+++ b/playground/frontend/app/articles/[slug]/page.tsx
@@ -0,0 +1,10 @@
+import ArticleEditor from "@/app/articles/[slug]/ArticleEditor";
+
+export default async function Home(props: {
+	params: Promise<{ slug: string }>;
+}) {
+	const params = await props.params;
+	const slug = params.slug;
+
+	return <ArticleEditor slug={slug} />;
+}
--- a/playground/frontend/app/articles/layout.tsx
+++ b/playground/frontend/app/articles/layout.tsx
@@ -0,0 +1,53 @@
+"use client";
+
+import { HocuspocusProviderWebsocket } from "@hocuspocus/provider";
+// import {
+// 	TiptapCollabProvider,
+// 	TiptapCollabProviderWebsocket,
+// } from "@tiptap-cloud/provider";
+import { useEffect, useState } from "react";
+import { SocketContext1 } from "@/app/SocketContext1";
+import { SocketContext2 } from "@/app/SocketContext2";
+
+export default function Layout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	const [socket1, setSocket1] = useState<HocuspocusProviderWebsocket | null>(
+		null,
+	);
+	const [socket2, setSocket2] = useState<HocuspocusProviderWebsocket | null>(
+		null,
+	);
+
+	useEffect(() => {
+		const newlyCreatedSocket1 = new HocuspocusProviderWebsocket({
+			url: "ws://localhost:8000",
+		});
+		const newlyCreatedSocket2 = new HocuspocusProviderWebsocket({
+			url: "ws://localhost:8000",
+		});
+		// const newlyCreatedSocket = new TiptapCollabProviderWebsocket({
+		// 	appId: "",
+		// });
+
+		setSocket1(newlyCreatedSocket1);
+		setSocket2(newlyCreatedSocket2);
+
+		return () => {
+			newlyCreatedSocket1?.destroy();
+			newlyCreatedSocket2?.destroy();
+		};
+	}, []);
+
+	if (socket1 && socket2) {
+		return (
+			<>
+				<SocketContext1 value={socket1}>
+					<SocketContext2 value={socket2}>{children}</SocketContext2>
+				</SocketContext1>
+			</>
+		);
+	}
+}
--- a/playground/frontend/app/favicon.ico
+++ b/playground/frontend/app/favicon.ico
--- a/playground/frontend/app/globals.css
+++ b/playground/frontend/app/globals.css
@@ -0,0 +1,124 @@
+@import "tailwindcss";
+
+:root {
+	--background: #ffffff;
+	--foreground: #171717;
+}
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--font-sans: var(--font-geist-sans);
+	--font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--background: #0a0a0a;
+		--foreground: #ededed;
+	}
+}
+
+body {
+	background: var(--background);
+	color: var(--foreground);
+	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
+		sans-serif;
+	font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+	line-height: 1.6;
+}
+
+/* Modern editor styles */
+.tiptap {
+	:first-child {
+		margin-top: 0;
+	}
+
+	/* Placeholder styling */
+	p.is-editor-empty:first-child::before {
+		color: rgb(148 163 184);
+		content: attr(data-placeholder);
+		float: left;
+		height: 0;
+		pointer-events: none;
+		font-style: italic;
+	}
+
+	p {
+		word-break: break-word;
+		line-height: 1.8;
+	}
+
+	/* Improved focus styles */
+	&:focus {
+		outline: none;
+		box-shadow: 0 0 0 2px rgb(59 130 246 / 0.1);
+	}
+
+	/* Better typography */
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-weight: 600;
+		color: rgb(15 23 42);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			color: rgb(248 250 252);
+		}
+		p.is-editor-empty:first-child::before {
+			color: rgb(100 116 139);
+		}
+	}
+
+	/* Modern collaboration cursor */
+	.collaboration-carets__caret {
+		border-left: 2px solid currentColor;
+		border-right: 2px solid currentColor;
+		margin-left: -1px;
+		margin-right: -1px;
+		pointer-events: none;
+		position: relative;
+		word-break: normal;
+		animation: blink 1s infinite;
+	}
+
+	/* Smooth blinking animation */
+	@keyframes blink {
+		0%,
+		50% {
+			opacity: 1;
+		}
+		51%,
+		100% {
+			opacity: 0.3;
+		}
+	}
+
+	/* Modern username label */
+	.collaboration-carets__label {
+		border-radius: 6px 6px 6px 2px;
+		color: white;
+		font-size: 11px;
+		font-style: normal;
+		font-weight: 500;
+		left: -1px;
+		line-height: normal;
+		padding: 0.25rem 0.5rem;
+		position: absolute;
+		top: -1.8em;
+		user-select: none;
+		white-space: nowrap;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		backdrop-filter: blur(4px);
+	}
+}
--- a/playground/frontend/app/layout.tsx
+++ b/playground/frontend/app/layout.tsx
@@ -0,0 +1,70 @@
+import Link from "next/link";
+import "./globals.css";
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="en">
+			<body className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50 dark:from-slate-900 dark:to-slate-800">
+				<div className="flex min-h-screen">
+					{/* Sidebar */}
+					<div className="w-64 bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-r border-slate-200 dark:border-slate-700 shadow-sm">
+						<div className="p-6">
+							<div className="mb-8">
+								<Link href="/" className="flex items-center space-x-2 text-slate-900 dark:text-white hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+									<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+										<span className="text-white font-bold text-sm">H</span>
+									</div>
+									<span className="font-semibold">Hocuspocus</span>
+								</Link>
+							</div>
+
+							<nav className="space-y-6">
+								<div>
+									<h2 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">Classic Provider</h2>
+									<ul className="space-y-2">
+										{[1, 2, 3, 4].map((num) => (
+											<li key={num}>
+												<Link
+													href={`/articles/${num}`}
+													className="flex items-center px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-blue-600 dark:hover:text-blue-400 transition-all duration-200"
+												>
+													<div className="w-2 h-2 bg-slate-400 dark:bg-slate-500 rounded-full mr-3"></div>
+													Article {num}
+												</Link>
+											</li>
+										))}
+									</ul>
+								</div>
+								<div>
+									<h2 className="text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider mb-3">React Provider</h2>
+									<ul className="space-y-2">
+										{[1, 2, 3, 4].map((num) => (
+											<li key={num}>
+												<Link
+													href={`/react-provider/${num}`}
+													className="flex items-center px-3 py-2 text-sm font-medium text-slate-700 dark:text-slate-300 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-purple-600 dark:hover:text-purple-400 transition-all duration-200"
+												>
+													<div className="w-2 h-2 bg-purple-400 dark:bg-purple-500 rounded-full mr-3"></div>
+													Article {num}
+												</Link>
+											</li>
+										))}
+									</ul>
+								</div>
+							</nav>
+						</div>
+					</div>
+
+					{/* Main content */}
+					<div className="flex-1 overflow-hidden">
+						{children}
+					</div>
+				</div>
+			</body>
+		</html>
+	);
+}
--- a/playground/frontend/app/page.tsx
+++ b/playground/frontend/app/page.tsx
@@ -0,0 +1,76 @@
+export default function Home() {
+	return (
+		<div className="flex flex-col min-h-screen">
+			{/* Header */}
+			<header className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200 dark:border-slate-700">
+				<div className="px-8 py-6">
+					<h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+						Hocuspocus v3 Playground
+					</h1>
+					<p className="text-slate-600 dark:text-slate-400 mt-2">
+						Real-time collaborative editor demo
+					</p>
+				</div>
+			</header>
+
+			{/* Main content */}
+			<main className="flex-1 p-8">
+				<div className="max-w-4xl mx-auto">
+					{/* Welcome card */}
+					<div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm rounded-2xl border border-slate-200 dark:border-slate-700 shadow-xl p-8 mb-8">
+						<div className="flex items-center mb-6">
+							<div className="w-12 h-12 bg-gradient-to-br from-green-400 to-blue-500 rounded-xl flex items-center justify-center mr-4">
+								<span className="text-white text-xl">🚀</span>
+							</div>
+							<h2 className="text-2xl font-bold text-slate-900 dark:text-white">Welcome!</h2>
+						</div>
+						<p className="text-slate-700 dark:text-slate-300 text-lg leading-relaxed mb-6">
+							This demo showcases how to use a shared WebSocket connection to load multiple documents with real-time collaboration.
+						</p>
+						<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
+							<p className="text-blue-800 dark:text-blue-200 font-medium">
+								💡 Tip: Open a second tab or window and experience collaborative editing in real-time!
+							</p>
+						</div>
+					</div>
+
+					{/* Features grid */}
+					<div className="grid md:grid-cols-2 gap-6 mb-8">
+						<div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 p-6">
+							<div className="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-lg flex items-center justify-center mb-4">
+								<span className="text-white text-lg">🔌</span>
+							</div>
+							<h3 className="font-semibold text-slate-900 dark:text-white mb-2">Smart Connection</h3>
+							<p className="text-slate-600 dark:text-slate-400 text-sm">
+								WebSocket connection opens when you enter article routes and closes when you leave.
+							</p>
+						</div>
+
+						<div className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 p-6">
+							<div className="w-10 h-10 bg-gradient-to-br from-amber-500 to-orange-500 rounded-lg flex items-center justify-center mb-4">
+								<span className="text-white text-lg">📄</span>
+							</div>
+							<h3 className="font-semibold text-slate-900 dark:text-white mb-2">On-Demand Loading</h3>
+							<p className="text-slate-600 dark:text-slate-400 text-sm">
+								Documents are fetched as needed via the shared connection for optimal performance.
+							</p>
+						</div>
+					</div>
+
+					{/* Debug info */}
+					<div className="bg-slate-50 dark:bg-slate-800/50 rounded-xl border border-slate-200 dark:border-slate-700 p-6">
+						<div className="flex items-center mb-3">
+							<div className="w-8 h-8 bg-gradient-to-br from-slate-500 to-slate-600 rounded-lg flex items-center justify-center mr-3">
+								<span className="text-white text-sm">🔍</span>
+							</div>
+							<h3 className="font-semibold text-slate-700 dark:text-slate-300">Developer Console</h3>
+						</div>
+						<p className="text-slate-600 dark:text-slate-400 text-sm">
+							Open your browser's developer console to see detailed connection and synchronization information.
+						</p>
+					</div>
+				</div>
+			</main>
+		</div>
+	);
+}
--- a/playground/frontend/app/react-provider/[slug]/ArticleEditor.tsx
+++ b/playground/frontend/app/react-provider/[slug]/ArticleEditor.tsx
@@ -0,0 +1,159 @@
+"use client";
+
+import {
+	HocuspocusProviderWebsocketComponent,
+	HocuspocusRoom,
+} from "@hocuspocus/provider-react";
+import React, { useCallback } from "react";
+import CollaborationStatus from "./CollaborationStatus";
+import CollaborativeEditor from "./CollaborativeEditor";
+import ConnectedUsers from "./ConnectedUsers";
+
+export default function ArticleEditor({ slug }: { slug: string }) {
+	const handleAuthFailed = useCallback(
+		(data: { reason: string }) => {
+			console.error(`[Editor 1] Auth failed for "${slug}":`, data.reason);
+		},
+		[slug],
+	);
+
+	return (
+		<div className="flex flex-col min-h-screen">
+			{/* Header */}
+			<header className="bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border-b border-slate-200 dark:border-slate-700">
+				<div className="px-8 py-6">
+					<div className="flex items-center justify-between">
+						<div>
+							<h1 className="text-2xl font-bold text-slate-900 dark:text-white">
+								Article #{slug}
+								<span className="ml-3 text-sm font-medium text-purple-600 dark:text-purple-400 bg-purple-100 dark:bg-purple-900/30 px-2 py-1 rounded-full">
+									provider-react
+								</span>
+							</h1>
+							<p className="text-slate-600 dark:text-slate-400 mt-1">
+								Using @hocuspocus/provider-react hooks and components
+							</p>
+						</div>
+					</div>
+				</div>
+			</header>
+
+			{/* Main content */}
+			<main className="flex-1 p-8">
+				<div className="max-w-7xl mx-auto space-y-6">
+					{/* Two independent WebSocket connections, each with its own room */}
+					<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+						{/* Editor 1 — event handlers via HocuspocusRoom props */}
+						<HocuspocusProviderWebsocketComponent url="ws://localhost:8000">
+							<HocuspocusRoom
+								name={slug}
+								onAuthenticationFailed={handleAuthFailed}
+								onClose={(data) =>
+									console.log("[Editor 1] Connection closed:", data.event)
+								}
+								onSynced={(data) =>
+									console.log("[Editor 1] Synced:", data.state)
+								}
+							>
+								<div className="space-y-4">
+									<div className="flex items-center justify-between">
+										<h2 className="text-lg font-semibold text-slate-900 dark:text-white">
+											Editor 1
+										</h2>
+										<span className="text-sm text-slate-500 dark:text-slate-400">
+											Event handlers via props
+										</span>
+									</div>
+
+									<CollaborationStatus />
+
+									<ConnectedUsers />
+
+									<div className="bg-white/30 dark:bg-slate-900/30 backdrop-blur-sm rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-xl">
+										<CollaborativeEditor />
+									</div>
+								</div>
+							</HocuspocusRoom>
+						</HocuspocusProviderWebsocketComponent>
+
+						{/* Editor 2 — event handlers via useHocuspocusEvent hook (see CollaborationStatus) */}
+						<HocuspocusProviderWebsocketComponent url="ws://localhost:8000">
+							<HocuspocusRoom name={slug}>
+								<div className="space-y-4">
+									<div className="flex items-center justify-between">
+										<h2 className="text-lg font-semibold text-slate-900 dark:text-white">
+											Editor 2
+										</h2>
+										<span className="text-sm text-slate-500 dark:text-slate-400">
+											Event handlers via hook
+										</span>
+									</div>
+
+									<CollaborationStatus />
+
+									<ConnectedUsers />
+
+									<div className="bg-white/30 dark:bg-slate-900/30 backdrop-blur-sm rounded-2xl p-6 border border-slate-200 dark:border-slate-700 shadow-xl">
+										<CollaborativeEditor />
+									</div>
+								</div>
+							</HocuspocusRoom>
+						</HocuspocusProviderWebsocketComponent>
+					</div>
+
+					{/* Info panel */}
+					<div className="bg-purple-50/50 dark:bg-purple-900/20 backdrop-blur-sm rounded-xl border border-purple-200 dark:border-purple-700 p-6">
+						<div className="flex items-start space-x-3">
+							<div className="flex-shrink-0">
+								<div className="w-8 h-8 bg-purple-100 dark:bg-purple-900/40 rounded-full flex items-center justify-center">
+									<svg
+										className="w-4 h-4 text-purple-600 dark:text-purple-400"
+										fill="none"
+										stroke="currentColor"
+										viewBox="0 0 24 24"
+									>
+										<path
+											strokeLinecap="round"
+											strokeLinejoin="round"
+											strokeWidth={2}
+											d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+										/>
+									</svg>
+								</div>
+							</div>
+							<div>
+								<h3 className="text-sm font-medium text-purple-900 dark:text-purple-100">
+									@hocuspocus/provider-react Demo
+								</h3>
+								<p className="text-sm text-purple-700 dark:text-purple-300 mt-1">
+									This demo uses the new React-specific package. Each editor is
+									wrapped in its own{" "}
+									<code className="bg-purple-200/50 dark:bg-purple-800/50 px-1 rounded">
+										HocuspocusProviderWebsocketComponent
+									</code>{" "}
+									(independent WebSocket) and{" "}
+									<code className="bg-purple-200/50 dark:bg-purple-800/50 px-1 rounded">
+										HocuspocusRoom
+									</code>
+									. Status is read via{" "}
+									<code className="bg-purple-200/50 dark:bg-purple-800/50 px-1 rounded">
+										useHocuspocusConnectionStatus()
+									</code>
+									,{" "}
+									<code className="bg-purple-200/50 dark:bg-purple-800/50 px-1 rounded">
+										useHocuspocusSyncStatus()
+									</code>
+									, and{" "}
+									<code className="bg-purple-200/50 dark:bg-purple-800/50 px-1 rounded">
+										useHocuspocusAwareness()
+									</code>{" "}
+									hooks &mdash; no manual event listeners needed.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</main>
+		</div>
+	);
+}
--- a/playground/frontend/app/react-provider/[slug]/CollaborationStatus.tsx
+++ b/playground/frontend/app/react-provider/[slug]/CollaborationStatus.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import {
+	useHocuspocusConnectionStatus,
+	useHocuspocusEvent,
+	useHocuspocusProvider,
+	useHocuspocusSyncStatus,
+} from "@hocuspocus/provider-react";
+import { useState } from "react";
+
+const CollaborationStatus = () => {
+	const provider = useHocuspocusProvider();
+	const connectionStatus = useHocuspocusConnectionStatus();
+	const syncStatus = useHocuspocusSyncStatus();
+	const [unsyncedChanges, setUnsyncedChanges] = useState(0);
+
+	// Using the useHocuspocusEvent hook instead of manual provider.on/off
+	useHocuspocusEvent("unsyncedChanges", (data) => {
+		setUnsyncedChanges(data.number);
+	});
+
+	const getStatusColor = (status: string) => {
+		switch (status) {
+			case "connected":
+				return "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400";
+			case "connecting":
+				return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/20 dark:text-yellow-400";
+			case "disconnected":
+				return "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400";
+			default:
+				return "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-400";
+		}
+	};
+
+	const UNSYNCED_THRESHOLD = 10;
+
+	return (
+		<div className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 p-6">
+			{/* Alert banner when unsynced changes grow — indicates connection issues */}
+			{unsyncedChanges >= UNSYNCED_THRESHOLD && (
+				<div className="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg flex items-center space-x-3">
+					<div className="w-5 h-5 shrink-0 text-red-600 dark:text-red-400">
+						<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<p className="text-sm font-medium text-red-800 dark:text-red-200">
+							Connection issue detected
+						</p>
+						<p className="text-xs text-red-600 dark:text-red-400">
+							{unsyncedChanges} changes are waiting to sync. Your edits are
+							saved locally but not yet on the server.
+						</p>
+					</div>
+				</div>
+			)}
+
+			{/* Status indicators */}
+			<div className="flex items-center justify-between mb-6">
+				<h3 className="text-lg font-semibold text-slate-900 dark:text-white">
+					Connection Status
+				</h3>
+				<div className="flex items-center space-x-4">
+					<div className="flex items-center space-x-2">
+						<div
+							className={`w-3 h-3 rounded-full ${connectionStatus === "connected" ? "bg-green-500" : connectionStatus === "connecting" ? "bg-yellow-500" : "bg-red-500"}`}
+						/>
+						<span
+							className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(connectionStatus)}`}
+						>
+							{connectionStatus}
+						</span>
+					</div>
+					<div className="flex items-center space-x-2">
+						<div
+							className={`w-3 h-3 rounded-full ${syncStatus === "synced" ? "bg-green-500" : "bg-orange-500 animate-pulse"}`}
+						/>
+						<span
+							className={`px-2 py-1 rounded-full text-xs font-medium ${syncStatus === "synced" ? "bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-400" : "bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400"}`}
+						>
+							{syncStatus}
+						</span>
+					</div>
+					<div className="flex items-center space-x-2">
+						<div
+							className={`w-3 h-3 rounded-full ${unsyncedChanges >= UNSYNCED_THRESHOLD ? "bg-red-500 animate-pulse" : "bg-orange-500 animate-pulse"}`}
+						/>
+						<span
+							className={`px-2 py-1 rounded-full text-xs font-medium ${unsyncedChanges >= UNSYNCED_THRESHOLD ? "bg-red-100 text-red-800 dark:bg-red-900/20 dark:text-red-400" : "bg-orange-100 text-orange-800 dark:bg-orange-900/20 dark:text-orange-400"}`}
+						>
+							{unsyncedChanges} unsynced
+						</span>
+					</div>
+				</div>
+			</div>
+
+			{/* Control buttons */}
+			<div className="grid grid-cols-2 gap-6">
+				<div className="space-y-3">
+					<h4 className="text-sm font-medium text-slate-700 dark:text-slate-300">
+						WebSocket Controls
+					</h4>
+					<div className="flex space-x-2">
+						<button
+							className="flex-1 px-3 py-2 bg-red-500 hover:bg-red-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+							onClick={() =>
+								provider.configuration.websocketProvider.disconnect()
+							}
+							disabled={connectionStatus === "disconnected"}
+						>
+							Disconnect
+						</button>
+						<button
+							className="flex-1 px-3 py-2 bg-green-500 hover:bg-green-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+							onClick={() =>
+								provider.configuration.websocketProvider.connect()
+							}
+							disabled={connectionStatus === "connected"}
+						>
+							Connect
+						</button>
+					</div>
+				</div>
+
+				<div className="space-y-3">
+					<h4 className="text-sm font-medium text-slate-700 dark:text-slate-300">
+						Provider Controls
+					</h4>
+					<div className="flex space-x-2">
+						<button
+							className="flex-1 px-3 py-2 bg-orange-500 hover:bg-orange-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+							onClick={() => provider.detach()}
+						>
+							Detach
+						</button>
+						<button
+							className="flex-1 px-3 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+							onClick={() => provider.attach()}
+						>
+							Attach
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};
+
+export default CollaborationStatus;
--- a/playground/frontend/app/react-provider/[slug]/CollaborativeEditor.tsx
+++ b/playground/frontend/app/react-provider/[slug]/CollaborativeEditor.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useHocuspocusProvider } from "@hocuspocus/provider-react";
+import { Collaboration } from "@tiptap/extension-collaboration";
+import { CollaborationCaret } from "@tiptap/extension-collaboration-caret";
+import { EditorContent, useEditor } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+import { useEffect, useRef } from "react";
+import * as Y from "yjs";
+
+const initialContent = [
+	1, 3, 223, 175, 255, 141, 2, 0, 7, 1, 7, 100, 101, 102, 97, 117, 108, 116, 3,
+	9, 112, 97, 114, 97, 103, 114, 97, 112, 104, 7, 0, 223, 175, 255, 141, 2, 0,
+	6, 4, 0, 223, 175, 255, 141, 2, 1, 17, 72, 101, 108, 108, 111, 32, 87, 111,
+	114, 108, 100, 33, 32, 240, 159, 140, 142, 0,
+];
+
+const CollaborativeEditor = () => {
+	const provider = useHocuspocusProvider();
+	const initializedRef = useRef(false);
+
+	useEffect(() => {
+		if (!initializedRef.current) {
+			Y.applyUpdate(provider.document, Uint8Array.from(initialContent));
+			initializedRef.current = true;
+		}
+	}, [provider.document]);
+
+	const editor = useEditor(
+		{
+			extensions: [
+				StarterKit.configure({
+					undoRedo: false,
+				}),
+				Collaboration.configure({
+					document: provider.document,
+				}),
+				CollaborationCaret.configure({
+					provider,
+				}),
+			],
+			immediatelyRender: false,
+			editorProps: {
+				attributes: {
+					class:
+						"prose prose-lg max-w-none focus:outline-none min-h-[500px] p-8 bg-white/50 dark:bg-slate-900/50 rounded-xl border border-slate-200 dark:border-slate-700 shadow-sm",
+				},
+			},
+		},
+		[provider.document],
+	);
+
+	return <EditorContent editor={editor} />;
+};
+
+export default CollaborativeEditor;
--- a/playground/frontend/app/react-provider/[slug]/ConnectedUsers.tsx
+++ b/playground/frontend/app/react-provider/[slug]/ConnectedUsers.tsx
@@ -0,0 +1,56 @@
+"use client";
+
+import { useHocuspocusAwareness } from "@hocuspocus/provider-react";
+import { useEffect, useState } from "react";
+
+const colors = [
+	"bg-blue-500",
+	"bg-green-500",
+	"bg-purple-500",
+	"bg-pink-500",
+	"bg-amber-500",
+	"bg-cyan-500",
+	"bg-rose-500",
+	"bg-indigo-500",
+];
+
+const ConnectedUsers = () => {
+	const users = useHocuspocusAwareness();
+	const [mounted, setMounted] = useState(false);
+
+	useEffect(() => {
+		setMounted(true);
+	}, []);
+
+	return (
+		<div className="bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm rounded-xl border border-slate-200 dark:border-slate-700 px-4 py-3">
+			<div className="flex items-center space-x-3">
+				<span className="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase tracking-wider">
+					Users
+				</span>
+				{mounted && (
+					<>
+						<div className="flex -space-x-2">
+							{users.map((user, i) => (
+								<div
+									key={user.clientId}
+									className={`w-7 h-7 rounded-full ${colors[i % colors.length]} border-2 border-white dark:border-slate-900 flex items-center justify-center`}
+									title={`Client ${user.clientId}`}
+								>
+									<span className="text-white text-xs font-bold">
+										{String(user.clientId).slice(-2)}
+									</span>
+								</div>
+							))}
+						</div>
+						<span className="text-xs text-slate-500 dark:text-slate-400">
+							{users.length} connected
+						</span>
+					</>
+				)}
+			</div>
+		</div>
+	);
+};
+
+export default ConnectedUsers;
--- a/playground/frontend/app/react-provider/[slug]/page.tsx
+++ b/playground/frontend/app/react-provider/[slug]/page.tsx
@@ -0,0 +1,10 @@
+import ArticleEditor from "./ArticleEditor";
+
+export default async function Page(props: {
+	params: Promise<{ slug: string }>;
+}) {
+	const params = await props.params;
+	const slug = params.slug;
+
+	return <ArticleEditor slug={slug} />;
+}
--- a/playground/frontend/app/react-provider/layout.tsx
+++ b/playground/frontend/app/react-provider/layout.tsx
@@ -0,0 +1,7 @@
+export default function Layout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return children;
+}
--- a/playground/frontend/next.config.ts
+++ b/playground/frontend/next.config.ts
@@ -0,0 +1,20 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+	serverExternalPackages: ["yjs"],
+	turbopack: {
+		root: "../../",
+		resolveAlias: {
+			"@hocuspocus/provider": "../../packages/provider/src/index.ts",
+			"@hocuspocus/common": "../../packages/common/src/index.ts",
+			"@hocuspocus/transformer": "../../packages/transformer/src/index.ts",
+			"@hocuspocus/provider-react":
+				"../../packages/provider-react/src/index.ts",
+		},
+	},
+	webpack: (config) => {
+		return config;
+	},
+};
+
+export default nextConfig;
--- a/playground/frontend/package.json
+++ b/playground/frontend/package.json
@@ -0,0 +1,33 @@
+{
+	"name": "@hocuspocus/frontend-demo",
+	"version": "3.4.6-rc.1",
+	"private": true,
+	"scripts": {
+		"dev": "next dev",
+		"build": "next build",
+		"start": "next start",
+		"lint": "next lint"
+	},
+	"dependencies": {
+		"@hocuspocus/provider": "workspace:*",
+		"@hocuspocus/provider-react": "workspace:*",
+		"@tiptap/extension-collaboration": "^3.19.0",
+		"@tiptap/extension-collaboration-caret": "^3.19.0",
+		"@tiptap/extension-floating-menu": "^3.19.0",
+		"@tiptap/react": "^3.19.0",
+		"@tiptap/starter-kit": "^3.19.0",
+		"jwt-encode": "^1.0.1",
+		"next": "16.3.3",
+		"react": "^19.2.4",
+		"react-dom": "^19.2.4",
+		"yjs": "^13.6.29"
+	},
+	"devDependencies": {
+		"@tailwindcss/postcss": "^4.1.18",
+		"@types/node": "^22.19.11",
+		"@types/react": "^19.2.14",
+		"@types/react-dom": "^19.2.3",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.8.2"
+	}
+}
--- a/playground/frontend/postcss.config.mjs
+++ b/playground/frontend/postcss.config.mjs
@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;
--- a/playground/frontend/public/file.svg
+++ b/playground/frontend/public/file.svg
@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
--- a/playground/frontend/public/globe.svg
+++ b/playground/frontend/public/globe.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
--- a/playground/frontend/public/next.svg
+++ b/playground/frontend/public/next.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
--- a/playground/frontend/public/vercel.svg
+++ b/playground/frontend/public/vercel.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
--- a/playground/frontend/public/window.svg
+++ b/playground/frontend/public/window.svg
@@ -0,0 +1 @@
+<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
--- a/playground/frontend/tsconfig.json
+++ b/playground/frontend/tsconfig.json
@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
				`@@ -0,0 +1 @@`
				`<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
				`@@ -0,0 +1 @@`
				`<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>`