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.36.0(1mo ago)11147.8k↓71%1MITTypeScriptPHP >=8.1 Since Jun 16Pushed 2w 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 today READMEChangelog (4)Dependencies (4)Versions (52)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 59 — FairBetter than 98% of packages Maintenance93 Actively maintained with recent releases Popularity38 Limited adoption so far Community23 Small or concentrated contributor base Maturity70 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 ~23 days Total 52 Last Release 18d 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 (52 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] (10 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/dependency-injection Allows you to standardize and centralize the way objects are constructed in your application 4.2k455.6M9.6k](/packages/symfony-dependency-injection)[symfony/config Helps you find, load, combine, autofill and validate configuration values of any kind 4.3k479.6M8.4k](/packages/symfony-config)[symfony/service-contracts Generic abstractions related to writing services 2.6k914.7M606](/packages/symfony-service-contracts)[symfony/options-resolver Provides an improved replacement for the array\_replace PHP function 3.2k525.7M2.0k](/packages/symfony-options-resolver)[symfony/framework-bundle Provides a tight integration between Symfony components and the Symfony full-stack framework 3.6k251.7M11.6k](/packages/symfony-framework-bundle)[easycorp/easyadmin-bundle Admin generator for Symfony applications 4.3k17.9M388](/packages/easycorp-easyadmin-bundle) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)