Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/noway/htb
Htb.js — a 50-line HTML template engine that uses JavaScript syntax.
https://github.com/noway/htb
ejs handlebars html html-templates jbuilder json2html mustache pug template-engine templates templating
Last synced: 25 days ago
JSON representation
Htb.js — a 50-line HTML template engine that uses JavaScript syntax.
- Host: GitHub
- URL: https://github.com/noway/htb
- Owner: noway
- License: mit
- Created: 2024-05-15T10:56:34.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-05-15T11:24:29.000Z (6 months ago)
- Last Synced: 2024-10-01T06:32:25.633Z (about 1 month ago)
- Topics: ejs, handlebars, html, html-templates, jbuilder, json2html, mustache, pug, template-engine, templates, templating
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/htb
- Size: 10.7 KB
- Stars: 13
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HTML Template Builder [![latest version badge]][npm] [![license badge]][license] [![downloads badge]][npm]
[latest version badge]: https://img.shields.io/npm/v/htb
[license badge]: https://img.shields.io/npm/l/htb
[downloads badge]: https://img.shields.io/npm/dw/htb
[npm]: https://www.npmjs.com/package/htb
[license]: https://github.com/noway/htb/blob/main/LICENSE
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'.
## Examples
### Getting started
```typescript
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)
```
```html
Simple Example
p {
font-family: Arial, Helvetica, sans-serif;
}
Hello, John Doe!
This is bold text.This is italic text.This is underlined text.
```
### Conditionals & variables
```typescript
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)
```
```html
Conditionals Example
p {
font-family: Arial, Helvetica, sans-serif;
}
User Profile
Welcome, Member John Doe!
```
### Nested Loops
```typescript
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)
```
```html
Nested Loops Example
p {
font-family: Arial, Helvetica, sans-serif;
}
Categories and Items
Fruits
- Apple
- Banana
- Orange
Vegetables
- Carrot
- Broccoli
- Spinach
```
### Partial Templates
```typescript
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)
```
```html
Partial Templates Example
p {
font-family: Arial, Helvetica, sans-serif;
}
My Website
HomeAboutContact
Page Content
Welcome to the page!
Made with <3 and coffee.
```
### Numbers
```typescript
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)
```
```html
Arithmetic Operations Example
p {
font-family: Arial, Helvetica, sans-serif;
}
Basic Arithmetic
Sum of 10 and 5: 15
Product of 7 and 3: 21
Division of 20 by 4: 5
```
## FAQ
### 1. Is this JSX?
JSX is a syntactic extension of JavaScript. Htb.js is closer to `React.createElement()`, although without the React part.
### 2. Is JSX to Htb.js compiler planned?
No.
### 3. Should I use this in production?
Fortune favours the brave.
### 4. How to use this in my project?
It's best to copy paste the [`htb.ts`](https://github.com/noway/htb/blob/main/htb.ts) file into your repo. Although an [NPM package](https://www.npmjs.com/package/htb) is also available.
### 5. Is there a way to generate Htb.js code from HTML?
Use this LLM prompt: [`llm-prompt.txt`](https://github.com/noway/htb/raw/main/llm-prompt.txt)