HtmlElement is a library to make dynamic HTML rendering more managable. The syntax is based on Hyperscript, and adds some Emmet-style syntactic sugar too.
Elements are rendered using the static HtmlElement::render
method (which I recommend wrapping in a plain function for readability).
el('div.container > div.row > div.col-md-6',
el('a', ['href' => '#'], 'Hello world!')
);
<div class="container">
<div class="row">
<div class="col-md-6">
<a href="#">Hello world!</a>
</div>
</div>
</div>
You're free to use this package (it's MIT-licensed), 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, Samberstraat 69D, 2060 Antwerp, Belgium.
The best postcards will get published on the open source page on our website.
I recommend adding an el
function to your application to improve readability over the static method.
function el(string $tag, $attributes = null, $content = null) : string
{
return \Spatie\HtmlElement\HtmlElement::render(...func_get_args());
}
An empty tag:
el('div');
<div></div>
A plain tag with text contents:
el('p', 'Hello world!');
<p>Hello world!</p>
A tag with an attribute:
el('p', ['style' => 'color: red;'], 'Hello world!');
<p style="color: red;">Hello world!</p>
A tag with an ID set emmet-style:
el('p#introduction', 'Hello world!');
<p id="introduction">Hello world!</p>
A tag with an emmet-style ID and class:
el('p#introduction.red', 'Hello world!');
<p id="introduction" class="red">Hello world!</p>
A tag with emmet-style attributes:
el('a[href=#][title=Back to top]', 'Back to top');
<a href="#" title="Back to top">Back to top</a>
A more complex emmet-style abbreviation:
el('div.container > div.row > div.col-md-6', 'Hello world!'));
<div class="container">
<div class="row">
<div class="col-md-6">
Hello world!
</div>
</div>
</div>
Manually nested tags:
el('div', ['class' => 'container'],
el('nav', ['aria-role' => 'navigation'], '...')
);
<div>
<nav aria-role="navigation">...</nav>
</div>
Multiple children:
el('ul', [el('li'), el('li')]);
<ul>
<li></li>
<li></li>
</ul>
Self-closing tags:
el('img[src=/background.jpg]');
<img src="background.jpg">
el('img', ['src' => '/background.jpg'], '');
<img src="background.jpg">
The el
function behaves differently depending on how many arguments are passed in.
When one argument is passed, only a tag will be rendered.
el('p');
<p></p>
When two arguments are passed, they represent a tag and it's contents.
String example:
el('p', 'Hello world!');
<p>Hello world!</p>
Array example:
el('ul', [el('li'), el('li')]);
<ul>
<li></li>
<li></li>
</ul>
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.
el('div', ['class' => 'container'],
el('nav', ['aria-role' => 'navigation'], '...')
);
<div>
<nav aria-role="navigation">...</nav>
</div>
Please see CHANGELOG for more information what has changed recently.
$ composer test
Please see CONTRIBUTING for details.
If you discover any security related issues, please email freek@spatie.be instead of using the issue tracker.
Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.
The MIT License (MIT). Please see License File for more information.