diff --git a/src/Typed/CHANGELOG.md b/src/Typed/CHANGELOG.md
index 3b62fe41dbc..b12c0133840 100644
--- a/src/Typed/CHANGELOG.md
+++ b/src/Typed/CHANGELOG.md
@@ -1,5 +1,9 @@
# CHANGELOG
+## 2.27.0
+
+- Deprecate the package
+
## 2.13.2
- Revert "Change JavaScript package to `type: module`"
diff --git a/src/Typed/README.md b/src/Typed/README.md
index 5c9ef23728c..17352bc948f 100644
--- a/src/Typed/README.md
+++ b/src/Typed/README.md
@@ -1,5 +1,121 @@
# Symfony UX Typed
+> [!WARNING]
+> **Deprecated**: This package has been **deprecated** in 2.x and will be removed in the next major version.
+
+To keep the same functionality in your Symfony application, follow these migration steps:
+
+1. Install the `typed.js` library:
+
+```bash
+# If using Symfony AssetMapper:
+php bin/console importmap:require typed.js
+
+# If using NPM (e.g.: with Webpack Encore):
+npm install typed.js
+```
+
+2. Add the following code to your app:
+
+assets/controllers/typed_controller.js
+
+```javascript
+import { Controller } from '@hotwired/stimulus';
+import Typed from 'typed.js';
+
+export default class extends Controller {
+ static values = {
+ strings: Array,
+ typeSpeed: { type: Number, default: 30 },
+ smartBackspace: { type: Boolean, default: true },
+ startDelay: Number,
+ backSpeed: Number,
+ shuffle: Boolean,
+ backDelay: { type: Number, default: 700 },
+ fadeOut: Boolean,
+ fadeOutClass: { type: String, default: 'typed-fade-out' },
+ fadeOutDelay: { type: Number, default: 500 },
+ loop: Boolean,
+ loopCount: { type: Number, default: Number.POSITIVE_INFINITY },
+ showCursor: { type: Boolean, default: true },
+ cursorChar: { type: String, default: '.' },
+ autoInsertCss: { type: Boolean, default: true },
+ attr: String,
+ bindInputFocusEvents: Boolean,
+ contentType: { type: String, default: 'html' },
+ };
+
+ connect() {
+ const options = {
+ strings: this.stringsValue,
+ typeSpeed: this.typeSpeedValue,
+ smartBackspace: this.smartBackspaceValue,
+ startDelay: this.startDelayValue,
+ backSpeed: this.backSpeedValue,
+ shuffle: this.shuffleValue,
+ backDelay: this.backDelayValue,
+ fadeOut: this.fadeOutValue,
+ fadeOutClass: this.fadeOutClassValue,
+ fadeOutDelay: this.fadeOutDelayValue,
+ loop: this.loopValue,
+ loopCount: this.loopCountValue,
+ showCursor: this.showCursorValue,
+ cursorChar: this.cursorCharValue,
+ autoInsertCss: this.autoInsertCssValue,
+ attr: this.attrValue,
+ bindInputFocusEvents: this.bindInputFocusEventsValue,
+ contentType: this.contentTypeValue,
+ };
+
+ this.dispatchEvent('pre-connect', { options });
+ const typed = new Typed(this.element, options);
+ this.dispatchEvent('connect', { typed, options });
+ }
+
+ dispatchEvent(name, payload) {
+ this.dispatch(name, { detail: payload, prefix: 'typed' });
+ }
+}
+```
+
+