PHPackages aqua/blade-emerald - 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. [Templating & Views](/categories/templating) 4. / 5. aqua/blade-emerald ActiveLibrary[Templating & Views](/categories/templating) aqua/blade-emerald ================== Emmet like Abbreviation to generate and wrap Laravel Blade Component with markup v1.2.0(3y ago)31631MITPHPPHP ^7.3|^8.0 Since Oct 2Pushed 3y ago2 watchersCompare [ Source](https://github.com/aqquaa/blade-emerald)[ Packagist](https://packagist.org/packages/aqua/blade-emerald)[ Docs](https://github.com/aqquaa/blade-emerald)[ RSS](/packages/aqua-blade-emerald/feed)WikiDiscussions master Synced today READMEChangelog (4)Dependencies (6)Versions (6)Used By (0) Laravel Blade Emerald ===================== [](#laravel-blade-emerald) > [Emmet](http://emmet.io/) like Abbreviation to generate and wrap [Laravel](https://laravel.com/) [Blade Component](https://laravel.com/docs/master/blade#components) with markup [![Latest Version on Packagist](https://camo.githubusercontent.com/7bf2eb04160a5ca1e9b07cda800527db94e6d94e1585e15d38a79b19c69ac1fb/68747470733a2f2f62616467656e2e6e65742f7061636b61676973742f762f617175612f626c6164652d656d6572616c643f6c6162656c3d6c617465737426636f6c6f723d6379616e)](https://packagist.org/packages/aqua/blade-emerald)[![Total Downloads](https://camo.githubusercontent.com/3280ea75c436720e57cc327cd77c834dc3fa9e6936ac8493622c116905dcc9be/68747470733a2f2f62616467656e2e6e65742f7061636b61676973742f64742f617175612f626c6164652d656d6572616c64)](https://packagist.org/packages/aqua/blade-emerald)[![GitHub Tests Action Status](https://github.com/aqquaa/blade-emerald/actions/workflows/test.yaml/badge.svg)](https://github.com/aqquaa/blade-emerald/actions/workflows/test.yaml)[![Open Issues](https://camo.githubusercontent.com/0bfd9e43cc034d2546a572490f4591824f6a66dbe91512837a1c6ce48b96d183/68747470733a2f2f62616467656e2e6e65742f6769746875622f6f70656e2d6973737565732f6171717561612f626c6164652d656d6572616c643f636f6c6f723d726564)](https://github.com/aqquaa/blade-emerald/issues?q=is%3Aopen+is%3Aissue)[![License](https://camo.githubusercontent.com/10ccf9a669c2be6192ddcd3167aa5b646b24496228635eac474f83916782fd48/68747470733a2f2f62616467656e2e6e65742f6769746875622f6c6963656e73652f6171717561612f626c6164652d656d6572616c64)](https://github.com/aqquaa/blade-emerald/blob/master/LICENSE.md) [![example static markup](https://camo.githubusercontent.com/31a71c7fd988892d111e6b07afd3feeb011e03ac05b82a43c6edc2f86fd34450/68747470733a2f2f62696e6172796d6573682e6465762f6173736574732f7061636b6167652f7374617469635f6d61726b75702d312e706e67)](https://camo.githubusercontent.com/31a71c7fd988892d111e6b07afd3feeb011e03ac05b82a43c6edc2f86fd34450/68747470733a2f2f62696e6172796d6573682e6465762f6173736574732f7061636b6167652f7374617469635f6d61726b75702d312e706e67) [![example blade component](https://camo.githubusercontent.com/73448a84bc71d07ce1cae775ca4501eb9f8fa04dbcfaf869af828bc16f785335/68747470733a2f2f62696e6172796d6573682e6465762f6173736574732f7061636b6167652f626c6164655f636f6d706f6e656e742d312e706e67)](https://camo.githubusercontent.com/73448a84bc71d07ce1cae775ca4501eb9f8fa04dbcfaf869af828bc16f785335/68747470733a2f2f62696e6172796d6573682e6465762f6173736574732f7061636b6167652f626c6164655f636f6d706f6e656e742d312e706e67) 🌈 Features ---------- [](#-features) - Generate HTML in a Blade file via package provided component: `` - Emmet style syntax to produce nested markup - Wrap around any content / other component with markup - Make any Blade Component accept abbreviation to wrap itself with markup ( *doesn't work for Anonymous Components* ) πŸ›Έ Compatibility --------------- [](#-compatibility) Package VersionLaravel versionPHP versionCompatible^1.210.\*8.1 - 8.2🟒^1.09.\*8.0 - 8.1🟒^1.08.\*7.3 - 8.0🟒7.\*7.3 - 7.4πŸ”΄πŸ“₯ Installation -------------- [](#-installation) ``` composer require aqua/blade-emerald ``` πŸ“– Usage ------- [](#-usage) πŸ’‘ The package provides a Blade Component ``, This component can be used like `` as an alias. The component support one prop named `make` which accept the abbreviation #### 🏷️ Generate static nested markup [](#️-generate-static-nested-markup) ``` ``` > produced html ``` ``` #### 🏷️ Wrap some content [](#️-wrap-some-content) ``` Success ! give it a click if you like. ``` produced html``` Success ! give it a click if you like. ``` #### 🏷️ Accept abbreviation in your Blade Component [](#️-accept-abbreviation-in-your-blade-component) > this feature doesn't support *Anonymous Components* 1. use `Aqua\Emerald\Traits\Markup` trait in your Component Class ``` class YourComponent extends Component { use Markup; ... ``` 2. the `Markup` trait assumes the prop name to be `wrap`, so lets add this as a class property & instantiate ``` public function __construct(public $wrap) {...} // using php 8.0 constructor property promotion ``` [read more](https://php.watch/versions/8.0/constructor-property-promotion) about constructor property promotion 3. accept abbreviation ``` ``` produced html``` Laravel... The PHP Framework for Web Artisans ``` 4. accept abbreviation using prop of your choise to customize the prop name that receives the abbreviation create a static property `$wrapby` and set its value to your prop name ``` class YourComponent extends Component { use Markup; protected static $wrapby = 'markup'; πŸ‘ˆ public function __construct(public $markup, ...) { πŸ‘† } ... ``` ``` πŸ‘† ``` 🧰 Useful Examples ----------------- [](#-useful-examples) Bootstrap grid``` Hello world! ``` Breadcrumb``` Home Library ``` Bootstrap card with links``` Active Link Disabled With supporting text below as a natural lead-in to additional content. ``` Bootstrap form-group``` Email address ``` Self closing tag``` ``` Alpine x-for``` ``` > equivalent to ``` ``` πŸ“š Abbreviation Guide -------------------- [](#-abbreviation-guide) checkout [spatie/html-element](https://github.com/spatie/html-element#examples) to get more idea. SyntaxExampleDescription`#id``p#foo`ID attribute`.class``p.foo`Class attribute`>``div.row>div.col`Nesting with child`[style='color:green;']``div[style='color:green;']`Single attribute`[title=Hello world][data-foo=bar]`Multiple attributesπŸ“… Changelog ----------- [](#-changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. πŸ† Credits --------- [](#-credits) This package is actually a wrapper around [spatie/html-element](https://github.com/spatie/html-element), all the hard work has been done by Team Spatie so they deserve all the credits. All I did is make it work with Laravel Blade Components. - [![Follow](https://camo.githubusercontent.com/119607dd12b1d43c2bc6c5748b4c425c72a42c3764bbc2400948677af515e08c/68747470733a2f2f62616467656e2e6e65742f747769747465722f666f6c6c6f772f737276726b73683f69636f6e3d74776974746572266c6162656c3d536f7572617625323052)](https://twitter.com/srvrksh) - [All Contributors](../../contributors) 🎫 License --------- [](#-license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 30 β€” LowBetter than 62% of packages Maintenance20 Infrequent updates β€” may be unmaintained Popularity19 Limited adoption so far Community11 Small or concentrated contributor base Maturity59 Maturing project, gaining track record Bus Factor1 Top contributor holds 86.3% of commits β€” single point of failure 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 ~181 days Total 4 Last Release 1191d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/5fb90778ac78e788c7f9da4166540bc1b162984b5476efb968d707a819efad6a?d=identicon)[aqua](/maintainers/aqua) --- Top Contributors [![devsrv](https://avatars.githubusercontent.com/u/26733312?v=4)](https://github.com/devsrv "devsrv (63 commits)")[![aqquaa](https://avatars.githubusercontent.com/u/89101089?v=4)](https://github.com/aqquaa "aqquaa (10 commits)") --- Tags emmet-abbreviationslaravellaravel-bladelaravel-blade-componentmarkuplaravelhtmlBlade componentBlade HTML Markup Generate ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/aqua-blade-emerald/health.svg) ``` [![Health](https://phpackages.com/badges/aqua-blade-emerald/health.svg)](https://phpackages.com/packages/aqua-blade-emerald) ``` ### Alternatives [moonshine/moonshine Laravel administration panel 1.3k253.1k81](/packages/moonshine-moonshine)[psalm/plugin-laravel Psalm plugin for Laravel 3355.3M345](/packages/psalm-plugin-laravel)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 725173.0k14](/packages/tallstackui-tallstackui)[blade-ui-kit/blade-icons A package to easily make use of icons in your Laravel Blade views. 2.5k42.5M404](/packages/blade-ui-kit-blade-icons)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9762.4M131](/packages/roots-acorn)[hasinhayder/tyro-dashboard Tyro Dashboard - Beautiful admin dashboard for managing Tyro roles, privileges, users, and settings 5443.8k](/packages/hasinhayder-tyro-dashboard) PHPackages Β© 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)