PHPackages symfony/ux-typed - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. symfony/ux-typed ActiveSymfony-bundle[Utility & Helpers](/categories/utility) symfony/ux-typed ================ Typed integration for Symfony v2.34.0(1mo ago)11132.1k↓17.7%1MITTypeScriptPHP >=8.1 Since Jun 16Pushed 1mo ago3 watchersCompare [ Source](https://github.com/symfony/ux-typed)[ Packagist](https://packagist.org/packages/symfony/ux-typed)[ Docs](https://symfony.com)[ Fund](https://symfony.com/sponsor)[ GitHub Sponsors](https://github.com/fabpot)[ RSS](/packages/symfony-ux-typed/feed)WikiDiscussions 2.x Synced 1mo ago READMEChangelog (2)Dependencies (2)Versions (50)Used By (1) Symfony UX Typed ================ [](#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: ``` # 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```` 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' }); } } ``` 3. Replace the `symfony--ux-typed` occurrences in your templates with `typed`, for example: ``` {% set strings = [ 'I ❤️ Symfony UX!', 'Symfony UX Typed loves to type', 'Symfony UX Typed and backspace', 'Control the speed', 'Control the cursor', 'Control your destiny!!!', 'Control your destiny... sort of', ] %} ``` 4. Remove `symfony/ux-typed` from your dependencies: ``` composer remove symfony/ux-typed ``` You're done! --- Symfony UX Typed is a Symfony bundle integrating [Typed](https://github.com/mattboldt/typed.js/blob/master/README.md) in Symfony applications. It is part of [the Symfony UX initiative](https://ux.symfony.com/). Typed is a complete and easy to use animated typed texts. Just enter the strings you want to see typed, and it goes live without complexity. [![Typed in action](doc/Animation.gif)](doc/Animation.gif) **This repository is a READ-ONLY sub-tree split**. See to create issues or submit pull requests. Sponsor ------- [](#sponsor) The Symfony UX packages are [backed](https://symfony.com/backers) by [Mercure.rocks](https://mercure.rocks). Create real-time experiences in minutes! Mercure.rocks provides a realtime API service that is tightly integrated with Symfony: create UIs that update in live with UX Turbo, send notifications with the Notifier component, expose async APIs with API Platform and create low level stuffs with the Mercure component. We maintain and scale the complex infrastructure for you! Help Symfony by [sponsoring](https://symfony.com/sponsor) its development! Resources --------- [](#resources) - [Documentation](https://symfony.com/bundles/ux-typed/current/index.html) - [Report issues](https://github.com/symfony/ux/issues) and [send Pull Requests](https://github.com/symfony/ux/pulls)in the [main Symfony UX repository](https://github.com/symfony/ux) ### Health Score 58 — FairBetter than 98% of packages Maintenance88 Actively maintained with recent releases Popularity39 Limited adoption so far Community21 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~28 days Recently: every ~39 days Total 50 Last Release 57d ago Major Versions v2.29.1 → 3.x-dev2025-08-08 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/47313?v=4)[Fabien Potencier](/maintainers/fabpot)[@fabpot](https://github.com/fabpot) --- Top Contributors [![Kocal](https://avatars.githubusercontent.com/u/2103975?v=4)](https://github.com/Kocal "Kocal (49 commits)")[![weaverryan](https://avatars.githubusercontent.com/u/121003?v=4)](https://github.com/weaverryan "weaverryan (27 commits)")[![Spomky](https://avatars.githubusercontent.com/u/1091072?v=4)](https://github.com/Spomky "Spomky (18 commits)")[![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?v=4)](https://github.com/github-actions[bot] "github-actions[bot] (9 commits)")[![smnandre](https://avatars.githubusercontent.com/u/1359581?v=4)](https://github.com/smnandre "smnandre (5 commits)")[![nicolas-grekas](https://avatars.githubusercontent.com/u/243674?v=4)](https://github.com/nicolas-grekas "nicolas-grekas (3 commits)")[![javiereguiluz](https://avatars.githubusercontent.com/u/73419?v=4)](https://github.com/javiereguiluz "javiereguiluz (1 commits)")[![jmsche](https://avatars.githubusercontent.com/u/3929498?v=4)](https://github.com/jmsche "jmsche (1 commits)")[![bocharsky-bw](https://avatars.githubusercontent.com/u/3317635?v=4)](https://github.com/bocharsky-bw "bocharsky-bw (1 commits)")[![ker0x](https://avatars.githubusercontent.com/u/5331654?v=4)](https://github.com/ker0x "ker0x (1 commits)")[![nexxome](https://avatars.githubusercontent.com/u/2526962?v=4)](https://github.com/nexxome "nexxome (1 commits)")[![sponno](https://avatars.githubusercontent.com/u/70642?v=4)](https://github.com/sponno "sponno (1 commits)")[![kbond](https://avatars.githubusercontent.com/u/127811?v=4)](https://github.com/kbond "kbond (1 commits)")[![chadyred](https://avatars.githubusercontent.com/u/5954673?v=4)](https://github.com/chadyred "chadyred (1 commits)")[![ChqThomas](https://avatars.githubusercontent.com/u/7740151?v=4)](https://github.com/ChqThomas "ChqThomas (1 commits)")[![Crovitche-1623](https://avatars.githubusercontent.com/u/35468476?v=4)](https://github.com/Crovitche-1623 "Crovitche-1623 (1 commits)")[![daFish](https://avatars.githubusercontent.com/u/150416?v=4)](https://github.com/daFish "daFish (1 commits)")[![fabpot](https://avatars.githubusercontent.com/u/47313?v=4)](https://github.com/fabpot "fabpot (1 commits)") --- Tags javascriptsymfonysymfony-uxuxsymfony-ux ### Embed Badge ![Health badge](/badges/symfony-ux-typed/health.svg) ``` [![Health](https://phpackages.com/badges/symfony-ux-typed/health.svg)](https://phpackages.com/packages/symfony-ux-typed) ``` ### Alternatives [symfony/ux-turbo Hotwire Turbo integration for Symfony 3906.8M47](/packages/symfony-ux-turbo)[symfony/ux-chartjs Chart.js integration for Symfony 1003.2M18](/packages/symfony-ux-chartjs)[symfony/ux-lazy-image Lazy image loader and utilities for Symfony 36335.2k](/packages/symfony-ux-lazy-image)[spomky-labs/pwa-bundle Progressive Web App Manifest Generator Bundle for Symfony. 6144.4k1](/packages/spomky-labs-pwa-bundle)[symfony/ux-react Integration of React in Symfony 371.4M3](/packages/symfony-ux-react)[kreyu/data-table-bundle Streamlines creation process of the data tables 11299.6k](/packages/kreyu-data-table-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)