htb - Craft websites effortlessly with Htb.js's simple JavaScript templates.

htb

7 views

Craft websites effortlessly with Htb.js's simple JavaScript templates.

Pitch

Htb.js is a concise and intuitive HTML template engine that enhances your web development experience with just 50 lines of JavaScript syntax. It offers a straightforward way to create dynamic and structured web pages, allowing you to focus on content while efficiently managing layout and design. Simplify your coding and unleash your creativity.

Description

Htb.js is a lightweight HTML template engine that elegantly combines the power of HTML and JavaScript in just 50 lines of code. Inspired by Ruby's Jbuilder and JavaScript's json2html, Htb.js offers a unique approach to generating dynamic HTML content seamlessly.

Key Features

Simplicity: With Htb.js, you can create complex HTML structures effortlessly using JavaScript syntax.
Flexible Syntax: Generate HTML without the hassle of traditional templating systems.
Dynamic Content: Include conditionals and loops to create dynamic web pages that adapt to your data.

Quick Examples

Basic Usage

Here's how you can create a simple HTML document:

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)

Using Conditionals

Display user-specific messages easily:

const user = { isAdmin: false, isMember: true, name: 'John Doe' };
const htb = Htb
  ('!DOCTYPE', { html: true })
  ('html', {}, () => [
    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)

Nesting Loops

Effortlessly generate lists:

const categories = [{ name: 'Fruits', items: ['Apple', 'Banana', 'Orange'] }, { name: 'Vegetables', items: ['Carrot', 'Broccoli', 'Spinach'] }];
const htb = Htb
  ('!DOCTYPE', { html: true })
  ('html', {}, () => [
    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)

FAQs

Is this JSX?
Htb.js resembles React.createElement() but does not incorporate React.
Is a JSX to Htb.js compiler planned?
No, such a compiler is not in development.
Should I use this in production?
Only if you dare to embrace the unconventional!
How to integrate this in my project?
You can copy the htb.ts file into your repository or use it via npm from NPM.
Can I convert HTML to Htb.js code?
Use the LLM prompt provided in llm-prompt.txt.

Unlock the potential of HTML generation with Htb.js – where clean syntax meets dynamic web development!