Introducing Brackethtml

Consider this variable declaration:

const btn = `button[Click me!]`;

This syntax is called “Brackethtml” it reduces the redundancy of HTML and still can be easily understood as HTML, in addition to supporting HTML normally.

Brackethtml + CSS-in-JS (goober)

Brackethtml already comes with a built-in CSS-in-JS library. In the previous examples, if we wanted to add some style to our button we could do:

const btn = `button[color:blue; ~ Click me!]`;

Usage rules

The list below describes the usage rules:

• The HTML tag name must be followed by square brackets:

const btn = `button[]`;

• The ~ symbol must be used inside tags that may contain children to separate attributes and CSS-in-JS from their children, and must be used between whitespace:

const btn = `h1[color:blue; ~ Hey!] img[src="my-avatar.png"]`;

• Tag attributes must always come before CSS-in-JS and use only double quotes ":

const btn = `button[data-username = "Bemtv" padding:50px; ~ Hello!]`;

• CSS-in-JS must only use single quotes ':

const btn = `button[class="hello" font-family:'Courier New'; ~ Click me!]`;

Special characters

Some characters should be escaped to be used without Brackethtml interpreting them: ~, [, ], #, @, and $.

To escape them just wrap them in parentheses ( ):

const btn = `button[Click (~) me!]`;