eleventy-plugin-create-element
An Eleventy paired shortcode for building HTML elements, with support for dynamic tag names and attributes.
Inspired by
React.createElement()
Setup
Run the following command at the root of your Eleventy project
npm install @aaashur/eleventy-plugin-create-element
then include it in your .eleventy.js
config file:
const createElement = require("@aaashur/eleventy-plugin-create-element");
module.exports = (eleventyConfig) => {
eleventyConfig.addPlugin(createElement);
};
Usage
{% createElement <name>, [<attributes>] %}
<innerHTML>
{% endcreateElement %}
Attributes with null
or undefined
values are omitted:
{% createElement "article", {
class: "card",
href: undefined,
"data-example": null,
"aria-hidden": false
} %}
<p>Hello, world.</p>
{% endcreateElement %}
<article class="card" aria-hidden="false">
<p>Hello, world.</p>
</article>
If attributes
contains a class
property whose value is an array, classnames
will be used automatically to return a space-delimited string containing only truthy, non-duplicate values:
{% createElement "div", {
class: [
"block",
"block__element",
"block__element--modifier" if false,
"block"
]
} %}
<p>Hello, world.</p>
{% endcreateElement %}
<div class="block block__element">
<p>Hello, world.</p>
</div>
If attributes
contains a style
property whose value is an object, styles
will be used automatically to return a semicolon-delimited string containing only truthy values:
{% createElement "div", {
style: {
"--custom-property": "10px",
"--false-property": false,
"--null-property": null,
"--undefined-property": undefined,
"background-color": "red"
}
} %}
<p>Hello, world.</p>
{% endcreateElement %}
<div style="--custom-property: 10px; background-color: red"></div>
<p>Hello, world.</p>
</div>
Empty elements will build self-closing tags automatically:
{% createElement "input", { type: "button" } %}
<p>innerHTML is ignored when building empty elements</p>
{% endcreateElement %}
<input type="button">
If name
is undefined, createElement
will return innerHTML
only:
{% createElement "a" if link, { href: link } -%}
<p>Hello, world</p>
{%- endcreateElement %}
<p>Hello, world</p>