Categorygithub.com/maragudk/gomponents
modulepackage
0.22.0
Repository: https://github.com/maragudk/gomponents.git
Documentation: pkg.go.dev

# README

Tired of complex template languages?

Logo

GoDoc Go codecov Go Report Card

Try HTML components in pure Go.

gomponents are HTML components written in pure Go. They render to HTML 5, and make it easy for you to build reusable components. So you can focus on building your app instead of learning yet another templating language.

The API may change until version 1 is reached.

Made with ✨sparkles✨ by maragu.

Does your company depend on this project? Contact me at [email protected] to discuss options for a one-time or recurring invoice to ensure its continued thriving.

Features

Check out www.gomponents.com for an introduction.

  • Build reusable HTML components
  • Write declarative HTML 5 in Go without all the strings, so you get
    • Type safety from the compiler
    • Auto-completion from the IDE
    • Easy debugging with the standard Go debugger
    • Automatic formatting with gofmt/goimports
  • Simple API that's easy to learn and use (you know most already if you know HTML)
  • Useful helpers like
    • Text and Textf that insert HTML-escaped text,
    • Raw and Rawf for inserting raw strings,
    • Map for mapping data to components and Group for grouping components,
    • and If/Iff for conditional rendering.
  • No external dependencies

Usage

go get github.com/maragudk/gomponents

The preferred way to use gomponents is with so-called dot-imports (note the dot before the imports), to give you that smooth, native HTML feel:

package main

import (
	. "github.com/maragudk/gomponents"
	. "github.com/maragudk/gomponents/components"
	. "github.com/maragudk/gomponents/html"
)

func Navbar(authenticated bool, currentPath string) Node {
	return Nav(
		NavbarLink("/", "Home", currentPath),
		NavbarLink("/about", "About", currentPath),
		If(authenticated, NavbarLink("/profile", "Profile", currentPath)),
	)
}

func NavbarLink(href, name, currentPath string) Node {
	return A(Href(href), Classes{"is-active": currentPath == href}, g.Text(name))
}

Some people don't like dot-imports, and luckily it's completely optional.

For a more complete example, see the examples directory.

What's up with the specially named elements and attributes?

Unfortunately, there are six main name clashes in HTML elements and attributes, so they need an El or Attr suffix, to be able to co-exist in the same package in Go.

I've chosen one or the other based on what I think is the common usage. In either case, the less-used variant also exists in the codebase:

  • cite (Cite/CiteAttr, CiteEl also exists)
  • data (DataEl/Data, DataAttr also exists)
  • form (Form/FormAttr, FormEl also exists)
  • label (Label/LabelAttr, LabelEl also exists)
  • style (StyleEl/Style, StyleAttr also exists)
  • title (TitleEl/Title, TitleAttr also exists)

# Packages

Package components provides high-level components and helpers that are composed of low-level elements and attributes.
Package html provides common HTML elements and attributes.
Package http provides adapters to render gomponents in http handlers.

# Functions

Attr creates an attribute DOM [Node] with a name and optional value.
El creates an element DOM [Node] with a name and child Nodes.
If condition is true, return the given [Node].
Iff condition is true, call the given function.
Map a slice of anything to a [Group] (which is just a slice of [Node]-s).
Raw creates a text DOM [Node] that just Renders the unescaped string t.
Rawf creates a text DOM [Node] that just Renders the interpolated and unescaped string format.
Text creates a text DOM [Node] that Renders the escaped string t.
Textf creates a text DOM [Node] that Renders the interpolated and escaped string format.

# Constants

# Interfaces

Node is a DOM node that can Render itself to a [io.Writer].

# Type aliases

Group a slice of [Node]-s into one Node, while still being usable like a regular slice of [Node]-s.
NodeFunc is a render function that is also a [Node] of [ElementType].
NodeType describes what type of [Node] it is, currently either an [ElementType] or an [AttributeType].