HTML Template Builder (Htb.js) is a 50-line HTML template engine that uses JavaScript syntax.
Htb.js was not invented. Htb.js was discovered at the intersection of HTML and JavaScript. Htb.js takes inspiration from Ruby's Jbuilder and JavaScript's json2html, and can be seen as a synthesis of the two, or a 'what if Jbuilder and json2html were combined'.
const htb = Htb
('!DOCTYPE', { html: true })
('html', {}, () => [
Htb('head', {}, () => [
Htb('title', {}, 'Simple Example'),
Htb('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }),
Htb('style', { type: 'text/css' }, 'p { font-family: Arial, Helvetica, sans-serif; }')
]),
Htb('body', {}, () => [
Htb('h1', {}, () =>
'Hello, John Doe!'
),
Htb('p', {}, () => [
Htb('b', {}, 'This is bold text. '),
Htb('i', {}, 'This is italic text. '),
Htb('u', {}, 'This is underlined text.')
])
])
]);
console.log(htb.html)<!DOCTYPE html>
<html>
<head>
<title>Simple Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
p {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Hello, John Doe!</h1>
<p><b>This is bold text.</b><i>This is italic text.</i><u>This is underlined text.</u></p>
</body>
</html>const user = {
isAdmin: false,
isMember: true,
name: 'John Doe'
};
const htb = Htb
('!DOCTYPE', { html: true })
('html', {}, () => [
Htb('head', {}, () => [
Htb('title', {}, 'Conditionals Example'),
Htb('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }),
Htb('style', { type: 'text/css' }, 'p { font-family: Arial, Helvetica, sans-serif; }')
]),
Htb('body', {}, () => [
Htb('h1', {}, 'User Profile'),
user.isAdmin
? Htb('p', {}, `Welcome, Admin ${user.name}!`)
: user.isMember
? Htb('p', {}, `Welcome, Member ${user.name}!`)
: Htb('p', {}, 'Welcome, Guest!')
])
]);
console.log(htb.html)<!DOCTYPE html>
<html>
<head>
<title>Conditionals Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
p {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>User Profile</h1>
<p>Welcome, Member John Doe!</p>
</body>
</html>const categories = [
{ name: 'Fruits', items: ['Apple', 'Banana', 'Orange'] },
{ name: 'Vegetables', items: ['Carrot', 'Broccoli', 'Spinach'] }
];
const htb = Htb
('!DOCTYPE', { html: true })
('html', {}, () => [
Htb('head', {}, () => [
Htb('title', {}, 'Nested Loops Example'),
Htb('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }),
Htb('style', { type: 'text/css' }, 'p { font-family: Arial, Helvetica, sans-serif; }')
]),
Htb('body', {}, () => {
const elements = [Htb('h1', {}, 'Categories and Items')];
for (const category of categories) {
elements.push(Htb('h2', {}, category.name)
('ul', {}, () =>
category.items.map(item =>
Htb('li', {}, item)
)
));
}
return elements;
})
]);
console.log(htb.html)<!DOCTYPE html>
<html>
<head>
<title>Nested Loops Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
p {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Categories and Items</h1>
<h2>Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<h2>Vegetables</h2>
<ul>
<li>Carrot</li>
<li>Broccoli</li>
<li>Spinach</li>
</ul>
</body>
</html>const headerTemplate = Htb
('header', {}, () => [
Htb('h1', {}, 'My Website'),
Htb('nav', {}, () => [
Htb('a', { href: '/' }, 'Home'),
Htb('a', { href: '/about' }, 'About'),
Htb('a', { href: '/contact' }, 'Contact')
])
]);
const footerTemplate = Htb
('footer', {}, () => [
Htb('p', {}, 'Made with <3 and coffee.')
]);
const htb = Htb
('!DOCTYPE', { html: true })
('html', {}, () => [
Htb('head', {}, () => [
Htb('title', {}, 'Partial Templates Example'),
Htb('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }),
Htb('style', { type: 'text/css' }, 'p { font-family: Arial, Helvetica, sans-serif; }')
]),
Htb('body', {}, () => [
headerTemplate,
Htb('main', {}, () => [
Htb('h2', {}, 'Page Content'),
Htb('p', {}, 'Welcome to the page!')
]),
footerTemplate
])
]);
console.log(htb.html)<!DOCTYPE html>
<html>
<head>
<title>Partial Templates Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
p {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<header>
<h1>My Website</h1>
<nav><a href="/">Home</a><a href="/about">About</a><a href="/contact">Contact</a></nav>
</header>
<main>
<h2>Page Content</h2>
<p>Welcome to the page!</p>
</main>
<footer>
<p>Made with <3 and coffee.</p>
</footer>
</body>
</html>const htb = Htb
('!DOCTYPE', { html: true })
('html', {}, () => [
Htb('head', {}, () => [
Htb('title', {}, 'Arithmetic Operations Example'),
Htb('meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }),
Htb('style', { type: 'text/css' }, 'p { font-family: Arial, Helvetica, sans-serif; }')
]),
Htb('body', {}, () => [
Htb('h1', {}, 'Basic Arithmetic'),
Htb('p', {}, [
'Sum of ', Htb('span', {}, '10'), ' and ', Htb('span', {}, '5'), ': ',
Htb('span', {}, `${10 + 5}`) // a number
]),
Htb('p', {}, [
'Product of ', Htb('span', {}, '7'), ' and ', Htb('span', {}, '3'), ': ',
Htb('span', {}, `${7 * 3}`) // a number
]),
Htb('p', {}, [
'Division of ', Htb('span', {}, '20'), ' by ', Htb('span', {}, '4'), ': ',
Htb('span', {}, `${20 / 4}`) // a number
])
])
]);
console.log(htb.html)<!DOCTYPE html>
<html>
<head>
<title>Arithmetic Operations Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
p {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>Basic Arithmetic</h1>
<p>Sum of <span>10</span> and <span>5</span>: <span>15</span></p>
<p>Product of <span>7</span> and <span>3</span>: <span>21</span></p>
<p>Division of <span>20</span> by <span>4</span>: <span>5</span></p>
</body>
</html>JSX is a syntactic extension of JavaScript. Htb.js is closer to React.createElement(), although without the React part.
No.
Fortune favours the brave.
It's best to copy paste the htb.ts file into your repo. Although an NPM package is also available.
Use this LLM prompt: llm-prompt.txt