Skip to main content

​
Filters

Maizzle includes filters that enable you to do anything you want to text nodes inside elements that you mark with custom attributes.

​
Usage

Add a filters object to your Maizzle config:
config.js
export default {
  filters: {},
}
Each entry in this object is made up of a key: value pair.
  • key represents a custom HTML attribute name
  • value is a function that accepts two arguments, and must return a string
Example:
config.js
export default {
  filters: {
    uppercase: str => str.toUpperCase(),
  }
}
Used in a Template:
emails/example.html
<p uppercase>Here is some foo.</p>
Result: 
<p>HERE IS SOME FOO BAR.</p>
Of course, this is just a dumb example - you could imagine more complex scenarios where you pull in packages and do stuff like:
  • compile CSS in some <style> tag with Sass or others
  • normalize html whitespace in parts of your code
  • create various content filters
  • …

​
Disabling

You may disable all filters by setting the option to false:
config.js
export default {
  filters: false,
}

​
Default filters

The following filters are included by default.

​
append

Append text to the end of the string.
example.html
<p append=" bar">foo</p>
<!-- <p>foo bar</p> -->

​
prepend

Prepend text to the beginning of the string.
example.html
<p prepend="foo ">bar</p>
<!-- <p>foo bar</p> -->

​
uppercase

Uppercase the string.
example.html
<p uppercase>foo</p>
<!-- <p>FOO</p> -->

​
lowercase

Lowercase the string.
example.html
<p lowercase>FOO</p>
<!-- <p>foo</p> -->

​
capitalize

Uppercase the first letter of the string.
example.html
<p capitalize>foo</p>
<!-- <p>Foo</p> -->

​
ceil

Round up to the nearest integer.
example.html
<p ceil>1.2</p>
<!-- <p>2</p> -->

​
floor

Round down to the nearest integer.
example.html
<p ceil>1.2</p>
<!-- <p>1</p> -->

​
round

Round to the nearest integer.
example.html
<p round>1234.567</p>
<!-- <p>1235</p> -->

​
escape

Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example).
example.html
<p escape>"&'<></p>
<!-- <p>&#34;&amp;&#39;&lt;&gt;</p> -->

​
escape-once

Escapes a string without changing existing escaped entities.
example.html
<p escape-once>1 &lt; 2 &amp; 3</p>
<!-- <p>1 &lt; 2 &amp; 3</p> -->

​
lstrip

Remove leading whitespace from the string.
example.html
<p lstrip> test </p>
<!-- <p>test </p> -->

​
rstrip

Remove trailing whitespace from the string.
example.html
<p rstrip> test </p>
<!-- <p> test</p> -->

​
trim

Remove leading and trailing whitespace from the string.
example.html
<p trim> test </p>
<!-- <p>test</p> -->

​
minus

Subtracts one number from another.
example.html
<p minus="2">3</p>
<!-- <p>1</p> -->

​
plus

Adds one number to another.
example.html
<p plus="2">3</p>
<!-- <p>5</p> -->

​
multiply

Alias: times
example.html
<p multiply="2">1.2</p>
<!-- <p>2.4</p> -->

​
divide-by

Alias: divide
example.html
<div divide-by="2">1.2</div>
<!-- <p>0.6</p> -->

​
modulo

Returns the remainder of one number divided by another.
example.html
<p modulo="2">3</p>
<!-- <p>1</p> -->

​
newline-to-br

Insert an HTML line break (<br />) in front of each newline (\n) in a string.
example.html
<p newline-to-br>
  test
  test
</p>
<!-- <p><br>  test<br>  test<br></p> -->

​
strip-newlines

Remove any newline characters (line breaks) from the string.
example.html
<p strip_newlines>
  test
  test
</p>
<!-- <p>  test  test</p> -->

​
remove

Remove every occurrence of text from the string.
example.html
<p remove="rain">I strained to see the train through the rain</p>
<!-- <p>I sted to see the t through the </p> -->

​
remove-first

Remove the first occurrence of text from the string.
example.html
<p remove-first="rain">I strained to see the train through the rain</p>
<!-- <p>I sted to see the train through the rain</p> -->

​
replace

Replace every occurrence of the first argument with the second argument. You must separate arguments with a pipe character (|).
example.html
<p replace="1|test">test</p>
<!-- <p>1es1</p> -->

​
replace-first

Replace the first occurrence of the first argument with the second argument. You must separate arguments with a pipe character (|).
example.html
<p replace-first="t|b">test</p>
<!-- <p>best</p> -->

​
size

Return the number of characters in the string.
example.html
<p size>one</p>
<!-- <p>3</p> -->

​
slice

Return a slice of the string starting at the provided index.
example.html
<p slice="1">test</p>
<!-- <p>est</p> -->
You may pass a startIndex and endIndex:
example.html
<p slice="0,-1">test</p>
<!-- <p>tes</p> -->

​
truncate

Shorten a string down to the number of characters passed as the argument.
example.html
<p truncate="17">Ground control to Major Tom.</p>
<!-- <p>Ground control to...</p> -->
You may pass a custom ellipsis as the second argument. Separate arguments with a comma:
example.html
<p truncate="17, no one">Ground control to Major Tom.</p>
<!-- <p>Ground control to no one</p> -->

​
truncate-words

Shorten a string down to the number of words passed as the argument.
example.html
<p truncate-words="2">Ground control to Major Tom.</p>
<!-- <p>Ground control...</p> -->
You may pass a custom ellipsis as the second argument. Separate arguments with a comma:
example.html
<p truncate-words="2, over and out">Ground control to Major Tom.</p>
<!-- <p>Ground control over and out</p> -->

​
url-decode

Decode a string that has been encoded as a URL.
example.html
<p url-decode>%27Stop%21%27+said+Fred</p>
<!-- <p>'Stop!' said Fred</p> -->

​
url-encode

Convert any URL-unsafe characters in a string into percent-encoded characters.
example.html
<p url-encode>[email protected]</p>
<!-- <p>user%40example.com</p> -->

Build docs developers (and LLMs) love

Get started for freeTalk to us