Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/spatie/html-element
Html rendering in php inspired by hyperscript
https://github.com/spatie/html-element
html php
Last synced: 1 day ago
JSON representation
Html rendering in php inspired by hyperscript
- Host: GitHub
- URL: https://github.com/spatie/html-element
- Owner: spatie
- License: mit
- Created: 2016-03-01T09:33:45.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2024-06-24T06:58:03.000Z (7 months ago)
- Last Synced: 2024-09-24T14:04:57.274Z (3 months ago)
- Topics: html, php
- Language: PHP
- Homepage: https://spatie.be/opensource
- Size: 95.7 KB
- Stars: 184
- Watchers: 14
- Forks: 24
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
[
](https://supportukrainenow.org)
# HtmlElement
[](https://packagist.org/packages/spatie/html-element)
[](https://github.com/spatie/html-element/actions/workflows/run-tests.yml)
[](https://github.com/spatie/html-element/actions?query=workflow%3A"Check+%26+fix+styling"+branch%3Amaster)
[](https://packagist.org/packages/spatie/html-element)
HtmlElement 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.
Elements are rendered using the static `HtmlElement::render` method (which I recommend wrapping in a plain function for readability).
```php
el('div.container > div.row > div.col-md-6',
el('a', ['href' => '#'], 'Hello world!')
);
```
```html
```
## Support us
[
](https://spatie.be/github-ad-click/html-element)
We 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).
We 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).
## Postcardware
You'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.
Our address is: Spatie, Kruikstraat 22, 2018 Antwerp, Belgium.
The best postcards will get published on the open source page on our website.
## Usage
I recommend adding an `el` function to your application to improve readability over the static method.
```php
function el(string $tag, $attributes = null, $content = null) : string
{
return \Spatie\HtmlElement\HtmlElement::render($tag, $attributes, $content);
}
```
## Examples
An empty tag:
```php
el('div');
```
```html
```
A plain tag with text contents:
```php
el('p', 'Hello world!');
```
```html
Hello world!
```
A tag with an attribute:
```php
el('p', ['style' => 'color: red;'], 'Hello world!');
```
```html
Hello world!
```
A tag with an ID set emmet-style:
```php
el('p#introduction', 'Hello world!');
```
```html
Hello world!
```
A tag with an emmet-style ID and class:
```php
el('p#introduction.red', 'Hello world!');
```
```html
Hello world!
```
A tag with emmet-style attributes:
```php
el('a[href=#][title=Back to top]', 'Back to top');
```
```html
Back to top
```
A more complex emmet-style abbreviation:
```php
el('div.container > div.row > div.col-md-6', 'Hello world!');
```
```html
Hello world!
```
Limited support of [implicit tag names](https://docs.emmet.io/abbreviations/implicit-names/) (`div`s only):
```php
el('.container > .row > .col-md-6', 'Hello world!');
```
```html
Hello world!
```
Manually nested tags:
```php
el('div', ['class' => 'container'],
el('nav', ['aria-role' => 'navigation'], '...')
);
```
```html
...
```
Multiple children:
```php
el('ul', [el('li'), el('li')]);
```
```html
```
Self-closing tags:
```php
el('img[src=/background.jpg]');
```
```html
```
```php
el('img', ['src' => '/background.jpg'], '');
```
```html
```
## Arguments
The `el` function behaves differently depending on how many arguments are passed in.
#### `el(string $tag) : string`
When one argument is passed, only a tag will be rendered.
```php
el('p');
```
```html
```
---
#### `el(string $tag, string|array $contents) : string`
When two arguments are passed, they represent a tag and it's contents.
String example:
```php
el('p', 'Hello world!');
```
```html
Hello world!
```
Array example:
```php
el('ul', [el('li'), el('li')]);
```
```html
```
---
#### `el(string $tag, array $attributes, string|array $contents) : string`
When 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.
```php
el('div', ['class' => 'container'],
el('nav', ['aria-role' => 'navigation'], '...')
);
```
```html
...
```
## Changelog
Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
## Testing
``` bash
$ composer test
```
## Contributing
Please see [CONTRIBUTING](https://github.com/spatie/.github/blob/main/CONTRIBUTING.md) for details.
## Security
If you've found a bug regarding security please mail [[email protected]](mailto:[email protected]) instead of using the issue tracker.
## Credits
- [Sebastian De Deyne](https://github.com/sebastiandedeyne)
- [All Contributors](../../contributors)
## About Spatie
Spatie 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).
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.