{"id":13395338,"url":"https://github.com/spatie/html-element","last_synced_at":"2025-04-13T07:51:05.436Z","repository":{"id":45966979,"uuid":"52864946","full_name":"spatie/html-element","owner":"spatie","description":"Html rendering in php inspired by hyperscript","archived":false,"fork":false,"pushed_at":"2024-06-24T06:58:03.000Z","size":98,"stargazers_count":184,"open_issues_count":1,"forks_count":24,"subscribers_count":14,"default_branch":"main","last_synced_at":"2024-09-24T14:04:57.274Z","etag":null,"topics":["html","php"],"latest_commit_sha":null,"homepage":"https://spatie.be/opensource","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spatie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"spatie"}},"created_at":"2016-03-01T09:33:45.000Z","updated_at":"2024-09-10T21:35:25.000Z","dependencies_parsed_at":"2024-10-25T11:34:45.974Z","dependency_job_id":"abd3a949-32fe-4a67-b5d4-9cb32fc2892d","html_url":"https://github.com/spatie/html-element","commit_stats":{"total_commits":83,"total_committers":15,"mean_commits":5.533333333333333,"dds":"0.42168674698795183","last_synced_commit":"0f0a5c6f0de2cf44e178e01a4d73a3883e5678f0"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fhtml-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fhtml-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fhtml-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spatie%2Fhtml-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spatie","download_url":"https://codeload.github.com/spatie/html-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248681494,"owners_count":21144700,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["html","php"],"created_at":"2024-07-30T17:01:53.009Z","updated_at":"2025-04-13T07:51:05.389Z","avatar_url":"https://github.com/spatie.png","language":"PHP","funding_links":["https://github.com/sponsors/spatie"],"categories":["PHP"],"sub_categories":[],"readme":"\n[\u003cimg src=\"https://github-ads.s3.eu-central-1.amazonaws.com/support-ukraine.svg?t=1\" /\u003e](https://supportukrainenow.org)\n\n# HtmlElement\n\n[![Latest Version on Packagist](https://img.shields.io/packagist/v/spatie/html-element.svg?style=flat-square)](https://packagist.org/packages/spatie/html-element)\n[![Tests](https://github.com/spatie/html-element/actions/workflows/run-tests.yml/badge.svg)](https://github.com/spatie/html-element/actions/workflows/run-tests.yml)\n[![GitHub Code Style Action Status](https://img.shields.io/github/workflow/status/spatie/html-element/Check%20\u0026%20fix%20styling?label=code%20style)](https://github.com/spatie/html-element/actions?query=workflow%3A\"Check+%26+fix+styling\"+branch%3Amaster)\n[![Total Downloads](https://img.shields.io/packagist/dt/spatie/html-element.svg?style=flat-square)](https://packagist.org/packages/spatie/html-element)\n\nHtmlElement is a library to make dynamic HTML rendering more managable. The syntax is based on [Hyperscript](https://github.com/dominictarr/hyperscript), and adds some [Emmet](http://emmet.io/)-style syntactic sugar too.\n\nElements are rendered using the static `HtmlElement::render` method (which I recommend wrapping in a plain function for readability).\n\n```php\nel('div.container \u003e div.row \u003e div.col-md-6',\n    el('a', ['href' =\u003e '#'], 'Hello world!')\n);\n```\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-md-6\"\u003e\n      \u003ca href=\"#\"\u003eHello world!\u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Support us\n\n[\u003cimg src=\"https://github-ads.s3.eu-central-1.amazonaws.com/html-element.jpg?t=1\" width=\"419px\" /\u003e](https://spatie.be/github-ad-click/html-element)\n\nWe invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support us by [buying one of our paid products](https://spatie.be/open-source/support-us).\n\nWe highly appreciate you sending us a postcard from your hometown, mentioning which of our package(s) you are using. You'll find our address on [our contact page](https://spatie.be/about-us). We publish all received postcards on [our virtual postcard wall](https://spatie.be/open-source/postcards).\n\n## Postcardware\n\nYou're free to use this package (it's [MIT-licensed](LICENSE.md)), but if it makes it to your production environment you are required to send us a postcard from your hometown, mentioning which of our package(s) you are using.\n\nOur address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.\n\nThe best postcards will get published on the open source page on our website.\n\n## Usage\n\nI recommend adding an `el` function to your application to improve readability over the static method.\n\n```php\nfunction el(string $tag, $attributes = null, $content = null) : string\n{\n    return \\Spatie\\HtmlElement\\HtmlElement::render($tag, $attributes, $content);\n}\n```\n\n## Examples\n\nAn empty tag:\n\n```php\nel('div');\n```\n```html\n\u003cdiv\u003e\u003c/div\u003e\n```\n\nA plain tag with text contents:\n\n```php\nel('p', 'Hello world!');\n```\n```html\n\u003cp\u003eHello world!\u003c/p\u003e\n```\n\nA tag with an attribute:\n\n```php\nel('p', ['style' =\u003e 'color: red;'], 'Hello world!');\n```\n```html\n\u003cp style=\"color: red;\"\u003eHello world!\u003c/p\u003e\n```\n\nA tag with an ID set emmet-style:\n\n```php\nel('p#introduction', 'Hello world!');\n```\n```html\n\u003cp id=\"introduction\"\u003eHello world!\u003c/p\u003e\n```\n\nA tag with an emmet-style ID and class:\n\n```php\nel('p#introduction.red', 'Hello world!');\n```\n```html\n\u003cp id=\"introduction\" class=\"red\"\u003eHello world!\u003c/p\u003e\n```\n\nA tag with emmet-style attributes:\n\n```php\nel('a[href=#][title=Back to top]', 'Back to top');\n```\n```html\n\u003ca href=\"#\" title=\"Back to top\"\u003eBack to top\u003c/a\u003e\n```\n\nA more complex emmet-style abbreviation:\n\n```php\nel('div.container \u003e div.row \u003e div.col-md-6', 'Hello world!');\n```\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-md-6\"\u003e\n      Hello world!\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nLimited support of [implicit tag names](https://docs.emmet.io/abbreviations/implicit-names/) (`div`s only):\n\n```php\nel('.container \u003e .row \u003e .col-md-6', 'Hello world!');\n```\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-md-6\"\u003e\n      Hello world!\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nManually nested tags:\n\n```php\nel('div', ['class' =\u003e 'container'],\n    el('nav', ['aria-role' =\u003e 'navigation'], '...')\n);\n```\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cnav aria-role=\"navigation\"\u003e...\u003c/nav\u003e\n\u003c/div\u003e\n```\n\nMultiple children:\n\n```php\nel('ul', [el('li'), el('li')]);\n```\n```html\n\u003cul\u003e\n  \u003cli\u003e\u003c/li\u003e\n  \u003cli\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\nSelf-closing tags:\n\n```php\nel('img[src=/background.jpg]');\n```\n```html\n\u003cimg src=\"background.jpg\"\u003e\n```\n\n```php\nel('img', ['src' =\u003e '/background.jpg'], '');\n```\n```html\n\u003cimg src=\"background.jpg\"\u003e\n```\n\n## Arguments\n\nThe `el` function behaves differently depending on how many arguments are passed in.\n\n#### `el(string $tag) : string`\n\nWhen one argument is passed, only a tag will be rendered.\n\n```php\nel('p');\n```\n```html\n\u003cp\u003e\u003c/p\u003e\n```\n\n---\n\n#### `el(string $tag, string|array $contents) : string`\n\nWhen two arguments are passed, they represent a tag and it's contents.\n\nString example:\n\n```php\nel('p', 'Hello world!');\n```\n```html\n\u003cp\u003eHello world!\u003c/p\u003e\n```\n\nArray example:\n\n```php\nel('ul', [el('li'), el('li')]);\n```\n```html\n\u003cul\u003e\n  \u003cli\u003e\u003c/li\u003e\n  \u003cli\u003e\u003c/li\u003e\n\u003c/ul\u003e\n```\n\n---\n\n#### `el(string $tag, array $attributes, string|array $contents) : string`\n\nWhen three arguments are passed, the first will be the tag name, the second an array of attributes, and the third a string or an array of contents.\n\n```php\nel('div', ['class' =\u003e 'container'],\n    el('nav', ['aria-role' =\u003e 'navigation'], '...')\n);\n```\n```html\n\u003cdiv\u003e\n  \u003cnav aria-role=\"navigation\"\u003e...\u003c/nav\u003e\n\u003c/div\u003e\n```\n\n## Changelog\n\nPlease see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.\n\n## Testing\n\n``` bash\n$ composer test\n```\n\n## Contributing\n\nPlease see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details.\n\n## Security\n\nIf you've found a bug regarding security please mail [security@spatie.be](mailto:security@spatie.be) instead of using the issue tracker.\n\n## Credits\n\n- [Sebastian De Deyne](https://github.com/sebastiandedeyne)\n- [All Contributors](../../contributors)\n\n## About Spatie\nSpatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects [on our website](https://spatie.be/opensource).\n\n## License\n\nThe MIT License (MIT). Please see [License File](LICENSE.md) for more information.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Fhtml-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspatie%2Fhtml-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspatie%2Fhtml-element/lists"}