gomponents

以纯 Go 语言编写的视图组件,并可渲染为 HTML 5。「View components in pure Go, that render to HTML 5.」

Github星跟踪图







Tired of complex template languages?

GoDoc
Go
codecov
Go Report Card

Try view components in pure Go.

gomponents are view 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.

Check out www.gomponents.com for an introduction.

Made in 🇩🇰 by maragu, maker of online Go courses.

Features

  • Build reusable view components
  • Write declarative HTML5 in Go without all the strings, so you get
    • Type safety
    • Auto-completion
    • Nice formatting with gofmt
  • 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, Map for mapping data to components,
    and If for conditional rendering.
  • No external dependencies

Usage

Get the library using go get:

go get github.com/maragudk/gomponents

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

package main

import (
	"net/http"

	g "github.com/maragudk/gomponents"
	c "github.com/maragudk/gomponents/components"
	. "github.com/maragudk/gomponents/html"
)

func main() {
	_ = http.ListenAndServe("localhost:8080", http.HandlerFunc(handler))
}

func handler(w http.ResponseWriter, r *http.Request) {
	_ = Page("Hi!", r.URL.Path).Render(w)
}

func Page(title, currentPath string) g.Node {
	return Doctype(
		HTML(
			Lang("en"),
			Head(
				TitleEl(g.Text(title)),
				StyleEl(Type("text/css"), g.Raw(".is-active{ font-weight: bold }")),
			),
			Body(
				Navbar(currentPath),
				H1(g.Text(title)),
				P(g.Textf("Welcome to the page at %v.", currentPath)),
			),
		),
	)
}

func Navbar(currentPath string) g.Node {
	return Nav(
		NavbarLink("/", "Home", currentPath),
		NavbarLink("/about", "About", currentPath),
	)
}

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

Some people don't like dot-imports, and luckily it's completely optional.
If you don't like dot-imports, just use regular imports.

You could also use the provided HTML5 document template to simplify your code a bit:

package main

import (
	"net/http"

	g "github.com/maragudk/gomponents"
	c "github.com/maragudk/gomponents/components"
	. "github.com/maragudk/gomponents/html"
)

func main() {
	_ = http.ListenAndServe("localhost:8080", http.HandlerFunc(handler))
}

func handler(w http.ResponseWriter, r *http.Request) {
	_ = Page("Hi!", r.URL.Path).Render(w)
}

func Page(title, currentPath string) g.Node {
	return c.HTML5(c.HTML5Props{
		Title:    title,
		Language: "en",
		Head: []g.Node{
			StyleEl(Type("text/css"), g.Raw(".is-active{ font-weight: bold }")),
		},
		Body: []g.Node{
			Navbar(currentPath),
			H1(g.Text(title)),
			P(g.Textf("Welcome to the page at %v.", currentPath)),
		},
	})
}

func Navbar(currentPath string) g.Node {
	return Nav(
		NavbarLink("/", "Home", currentPath),
		NavbarLink("/about", "About", currentPath),
	)
}

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

For more complete examples, see the examples directory.

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

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

  • data (DataEl/DataAttr)
  • form (FormEl/FormAttr)
  • style (StyleEl/StyleAttr)
  • title (TitleEl/TitleAttr)

主要指标

概览
名称与所有者maragudk/gomponents
主编程语言Go
编程语言Go (语言数: 2)
平台
许可证MIT License
所有者活动
创建于2020-09-12 07:01:22
推送于2025-05-23 07:26:31
最后一次提交
发布数34
最新版本名称v1.1.0 (发布于 )
第一版名称v0.1.0 (发布于 )
用户参与
星数1.6k
关注者数13
派生数49
提交数181
已启用问题?
问题数77
打开的问题数2
拉请求数139
打开的拉请求数0
关闭的拉请求数21
项目设置
已启用Wiki?
已存档?
是复刻?
已锁定?
是镜像?
是私有?