Home

Awesome

<img src="screnshots/logo.jpg" width="100%" />

HTML Builder <a href="https://gitpod.io/#https://github.com/gouniverse/hb" style="float:right:"><img src="https://gitpod.io/button/open-in-gitpod.svg" alt="Open in Gitpod" loading="lazy"></a>

tests Go Report Card PkgGoDev

Unpretentious short and sweet declarative HTML Builder.

Demos can be found on: https://golangui.com

Benefits

Example

// imported to global namespace, to avoid typing hb.* each time
import . "github.com/gouniverse/hb"

// or, regular import, and type hb.* before using it each time
// import "github.com/gouniverse/hb"
	
// 1. Create a div container with "Hello world" message
div := Div().Class("container").Text("Hello world")

// 2. Create a section with padding of 40px containing the container
section := Section().Style("padding:40px;").Child(div)

// 3. Render to HTML to display
html := section.ToHTML()

!!! For more examples look below in the README

Installation

go get -u github.com/gouniverse/hb

Implemented Tag Shortcuts

Examples can be found on: https://golangui.com

Tag Methods

Examples can be found on: https://golangui.com

Utility

Tag HTMX Attributes

HTMX (https://htmx.org/reference/) is a great match for Golang, therefore here is a shortcut for working with HTMX.

Examples can be found on: https://golangui.com

Tag Alpine.js Attributes

Alpine.js (https://alpinejs.dev/) is a great match for Golang, therefore here is a shortcut for working with HTMX.

Examples can be found on: https://golangui.com

Webpage Methods

Border Layout Methods

Usage example:

bl := NewBorderLayout()
	bl.AddTop(NewSpan().Text("TOP"), BORDER_LAYOUT_ALIGN_CENTER, BORDER_LAYOUT_ALIGN_MIDDLE)
	bl.AddCenter(NewSpan().Text("CENTER"), BORDER_LAYOUT_ALIGN_CENTER, BORDER_LAYOUT_ALIGN_MIDDLE)
	bl.AddBottom(NewSpan().Text("BOTTOM"), BORDER_LAYOUT_ALIGN_CENTER, BORDER_LAYOUT_ALIGN_MIDDLE)
	bl.AddLeft(NewSpan().Text("LEFT"), BORDER_LAYOUT_ALIGN_CENTER, BORDER_LAYOUT_ALIGN_MIDDLE)
	bl.AddRight(NewSpan().Text("RIGHT"), BORDER_LAYOUT_ALIGN_CENTER, BORDER_LAYOUT_ALIGN_MIDDLE)
blHtml := bl.ToHTML()

Swal

Usage example in a form:

form.
	ChildIf(data.formErrorMessage != "", hb.Swal(swal.SwalOptions{
		Icon:              "error",
		Title:             "Oops...",
		Text:              data.formErrorMessage,
		ShowCancelButton:  false,
		ConfirmButtonText: "OK",
		ConfirmCallback:   "window.location.href = window.location.href",
	})).
	ChildIf(data.formSuccessMessage != "", hb.Swal(swal.SwalOptions{
		Icon:              "success",
		Title:             "Saved",
		Text:              data.formSuccessMessage,
		ShowCancelButton:  false,
		ConfirmButtonText: "OK",
		ConfirmCallback:   "window.location.href = window.location.href",
	}))

Working with Raw Tags

tag := &Tag{
	TagName: "custom-element",
}
tag.toHTML()

Safe Escaping HTML

For safeguarding HTML, always use the .Text(text) method of the tags, it will automatically escape any HTML tags in the output.

Using the .HTML(html) method of the tags, will output the raw HTML, and leaves you vulnerable to XSS attacks.

You can escape the HTML yourself by using the EscapeString method from the standard HTML library Link with example: https://golang.org/pkg/html/#EscapeString

Examples

// Elements for the form
header := Heading3().text("Please sign in").Style("margin:0px;")
emailLabel := Label().Text("E-mail Address")
emailInput := Input().Class("form-control").Name("email").Placeholder("Enter e-mail address")
emailFormGroup := Div().Class("form-group").Child(emailLabel).Child(emailInput)
passwordLabel := Label().Child(hb.Text("Password"))
passwordInput := Input().Class("form-control").Name("password").Type("password").Placeholder("Enter password")
passwordFormGroup := Div().Class("form-group").Child(passwordLabel).Child(passwordInput)
buttonLogin := Button().Class("btn btn-lg btn-success btn-block").Text("Login")
buttonRegister := Hyperlink().Class("btn btn-lg btn-info float-left").Text("Register").Href("auth/register")
buttonForgotPassword := Hyperlink().Class("btn btn-lg btn-warning float-right").Text("Forgot password?").Href("auth/password-restore")

// Add elements in a card
cardHeader := Div().
	Class("card-header").
	Child(header)

cardBody := Div().
	Class("card-body").
	Children([]*hb.Tag{
		emailFormGroup,
		passwordFormGroup,
		buttonLogin,
	})

cardFooter := Div().
	Class("card-footer").
	Children([]*hb.Tag{
		buttonRegister,
		buttonForgotPassword,
	})

card := Div().
	Class("card card-default").
	Style("margin:0 auto;max-width: 360px;").
	Children([]*hb.Tag{
		cardHeader,
		cardBody,
		cardFooter
	})

// Convert to HTML to display
html := card.ToHTML()

Result:

<img src="https://github.com/gouniverse/html/blob/master/screnshots/html-builder-form-login.png" /> 
// 1. Webpage Title
title := "Title"

// 2. Webpage Favicon
favicon := "data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAABNTU0AVKH/AOPj4wDExMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACIiAREQEREAIiIBERAREQAiIgIiICIiACIiAiIgIiIAMzMDMzAzMwAzMwMzMDMzACIiAiIgIiIAIiICIiAiIgAzMwMzMDMzADMzAzMwMzMAIiICIiAiIgAiIgIiICIiAAAAAAAAAAAAIiICIiAiIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"

// 3. Webpage
webpage := NewWebpage().
	SetTitle(title).
	SetFavicon(favicon).
	AddStyleURLs([]string{
		"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
		"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css",
	}).
	AddScriptURLs([]string{
		"https://code.jquery.com/jquery-3.2.1.min.js",
		"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js",
	}).
	AddStyle(`html,body{height:100%;font-family: Ubuntu, sans-serif;}`).AddChild(NewDiv().Text("Hello"))

// Webpage returns the webpage template for the website
func Webpage(title, content string) *hb.Webpage {
	faviconImgCms := `data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAmzKzAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABEQEAAQERAAEAAQABAAEAAQABAQEBEQABAAEREQEAAAERARARAREAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//wAA//8AAP//AAD//wAA//8AAP//AAD//wAAi6MAALu7AAC6owAAuC8AAIkjAAD//wAA//8AAP//AAD//wAA`
	webpage := hb.Webpage()
	webpage.SetTitle(title)
	webpage.SetFavicon(faviconImgCms)

	webpage.AddStyleURLs([]string{
		"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css",
	})
	webpage.AddScriptURLs([]string{
		"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js",
		"http://code.jquery.com/jquery-3.5.1.min.js",
		"https://unpkg.com/vue@next",
		"https://cdn.jsdelivr.net/npm/sweetalert2@9",
	})
	webpage.AddScripts([]string{})
	webpage.AddStyle(`html,body{height:100%;font-family: Ubuntu, sans-serif;}`)
	webpage.AddStyle(`body {
		font-family: "Nunito", sans-serif;
		font-size: 0.9rem;
		font-weight: 400;
		line-height: 1.6;
		color: #212529;
		text-align: left;
		background-color: #f8fafc;
	}`)
	webpage.AddChild(hb.HTML(content))
	return webpage
}

// Generate HTML
html := webpage("Home", "Hello world").ToHTML()

HTMX Example

Here is an HTMX example which submits the content of all the inputs in a div to the server (no need to be in a form) and then replaces the content of the webpage with the result.

input := NewButton().
		Text("Submit")
		Hx("post", "http://test.com").
		Hx("include", "#DivID").
		Hx("target", "#PageID").
		Hx("swap", "outerHTML")

How to Add a Redirection?

webpage.Meta(hb.Meta().Attr("http-equiv", "refresh").Attr("content", "2; url = https://www.yahoo.com"))

Stargazers over time

Stargazers over time

Similar

Changelog

2024.11.26 - Added Aria, Readonly, Required, Selected

2024.10.05 - Added HxIndicator

2024.10.01 - Added additional shortcuts for more concise declaration

2023.12.17 - Added ToTags, Ternary, Text

2023.12.10 - Added Swal method for quickly adding Sweetalert

2023.09.16 - Added special case for empty "value" attribute

2023.07.26 - Added NewCaption function and Alpine.js, HTMX functions

2023.07.02 - Added NewHeader function

2023.06.09 - Added functional conditions AttrIfF, AttrsIfF, ChildIfF, ChildrenIfF

2023.05.08 - Added Alt attribute shortcut

2023.05.01 - Added NewWrap function

2023.04.27 - Added OnDblClick, OnInput, OnKeyPress, OnMouseDown, OnMouseUp, and conditionals for data

2023.04.25 - Added Placeholder, and conditionals for attributes

2023.04.15 - Added AddStyle, Src, and conditionals for style

2023.04.14 - Added Type attribute shortcut, conditionals for children and class names

2023.03.26 - Added Hx attribute shortcut for working with HTMX

2023.03.26 - Added OnBlur, OnChange, OnFocus, OnKeyDown, OnKeyUp, attribute shortcuts

2023.03.26 - Added Enctype, Href, Method, Name, target, Value attribute shortcuts

2023.01.22 - Added shortcut for <footer> tag

2023.01.14 - Flow pattern applied to BorderLayout methods

2022.09.07 - Added Child and Children shortcuts

2022.08.29 - Added default favicon to Webpage to fix 404 if missing

2022.01.07 - Added Attrs shortcut for setting multiple attributes

2021.07.30 - Added shortcut for <hr> tag

2021.03.20 - Renamed package name to hb to not conflict/confuse with the standard html package

2021.03.18 - Added shortcuts for <template> tag

2021.02.26 - Added shortcuts for <sub>, <sup> tags

2021.01.03 - Added example for webpage layout, and screenshot

2020.12.28 - Added shortcuts for <code>, <pre> tags, shortcuts sorted alphabetically

2020.12.27 - Added shortcuts for <table>, <thead>, <tbody>, <tr>, <th>, <td> tags

2020.12.26 - Fix for attribute escapes, added tests

2020.09.16 - Added shortcuts for <nav>, <navbar>, <ol>, <ul>, <li> tags

2020.06.16 - Initial commit

Aternatives