{"id":20913088,"url":"https://github.com/tbe/godom","last_synced_at":"2025-06-19T04:08:30.039Z","repository":{"id":200357356,"uuid":"705338523","full_name":"tbe/godom","owner":"tbe","description":"GoDOM is a Go library that allows for the creation and rendering of HTML elements in a type-safe and idiomatic manner.","archived":false,"fork":false,"pushed_at":"2023-10-15T18:36:08.000Z","size":36,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-19T04:08:22.397Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Go","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tbe.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-15T18:31:39.000Z","updated_at":"2023-10-15T18:33:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"57e8c0f0-90b0-4783-9dfc-d5e51d4739be","html_url":"https://github.com/tbe/godom","commit_stats":null,"previous_names":["tbe/godom"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/tbe/godom","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbe%2Fgodom","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbe%2Fgodom/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbe%2Fgodom/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbe%2Fgodom/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tbe","download_url":"https://codeload.github.com/tbe/godom/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tbe%2Fgodom/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260684179,"owners_count":23046103,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T14:34:47.434Z","updated_at":"2025-06-19T04:08:25.014Z","avatar_url":"https://github.com/tbe.png","language":"Go","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GoDOM\n\nGoDOM is a Go library that allows for the creation and rendering of HTML elements in a type-safe and idiomatic manner.\nIt draws inspiration from the [gomponents](https://github.com/maragudk/gomponents) library,\nproviding an alternative approach for constructing HTML in Go.\n\n## Features\n\n1. **Type-Safe Elements and Attributes:** GoDOM offers a strong typing system to prevent runtime errors due to incorrect\n   usage of elements or attributes.\n2. **Easily Extensible:** Use custom elements and attributes, or extend the existing ones.\n3. **Conditional Rendering:** GoDOM supports conditional attributes and elements, which allows elements or attributes to\n   be included or excluded based on certain conditions.\n4. **Delayed Rendering:** Elements and attributes can be constructed immediately before rendering, allowing for dynamic\n   changes between the time of construction and the rendering phase.\n5. **html/template integration:** GoDOM can be used together with\n\n## Differences from Gomponents\n\nWhile both GoDOM and gomponents provide tools for constructing HTML in Go, there are notable differences:\n\n- **Design Philosophy:** While gomponents focuses on creating a pure-functional way of building HTML, GoDOM provides a\n  more direct way of working with elements and attributes.\n- **Additional Features:** GoDOM offers features like delayed and conditional rendering out of the box.\n\n## When to use which?\n\nIf you're looking for a purely functional approach, gomponents might be more suitable.\nIf you want a direct way of manipulating and rendering HTML with additional utilities or want to implement a reusable\nset of advanced components, GoDOM is the way to go.\n\n## Basic Usage\n\nHere's a basic example of using GoDOM:\n\nImagine you're building a blog post page. The blog post might have an optional author bio, and if the blog post is\nfeatured, it might have special stylings.\n\n```go\npackage main\n\nimport (\n\t\"bytes\"\n\t\"fmt\"\n\t. \"github.com/tbe/godom\"\n\t\"github.com/tbe/godom/helpers\"\n\t\"github.com/tbe/godom/util\"\n)\n\nfunc main() {\n\tisFeatured := true // this can be dynamically set based on data\n\tshowAuthorBio := true\n\n\t// Conditional class for featured post\n\tfeaturedClass := util.IfAttr(isFeatured, Class(\"featured\"))\n\n\t// Conditional author bio\n\tauthorBio := util.IfElem(showAuthorBio, Div(Class(\"author-bio\"))(\n\t\tP()(Content(\"This is the author's bio. It provides information about the author.\")),\n\t))\n\n\t// Delayed attribute example: A function that decides the attribute based on some condition\n\tdynamicAttribute := util.DelayedAttribute(func(attrs map[string]string, _ *[]string, _ *[]types.Attribute) {\n\t\tif isFeatured {\n\t\t\tattrs[\"data-highlight\"] = \"true\"\n\t\t}\n\t})\n\n\t// Delayed element: Maybe we decide to render a special note for featured articles\n\tfeaturedNote := util.DelayedElement(func() types.Element {\n\t\tif isFeatured {\n\t\t\treturn P(Class(\"featured-note\"))(Content(\"This is a featured article!\"))\n\t\t}\n\t\treturn util.IfElem(false, nil) // returns an empty group if not featured\n\t})\n\n\t// Construct the full document\n\tdoc := Group(\n\t\tDoctype(),\n\t\tHTML()(\n\t\t\tHeader()(\n\t\t\t\tMeta(Charset(\"utf-8\")),\n\t\t\t\tTitle()(Content(\"Blog Post Title\")),\n\t\t\t),\n\t\t\tBody()(\n\t\t\t\tDiv(Class(\"blog-post\"), featuredClass, dynamicAttribute)(\n\t\t\t\t\tH1()(Content(\"Blog Post Title\")),\n\t\t\t\t\tP()(Content(\"This is the introduction of the blog post.\")),\n\t\t\t\t\tfeaturedNote,\n\t\t\t\t\tauthorBio,\n\t\t\t\t),\n\t\t\t),\n\t\t),\n\t)\n\n\tvar buf bytes.Buffer\n\tdoc.Render(\u0026buf)\n\n\tfmt.Println(buf.String())\n}\n```\n\n## Integration with GoDOM's template package\n\nThe template package within GoDOM provides a powerful bridge between GoDOM elements and traditional HTML templating.\nIt offers a seamless way to combine static template constructs with dynamic GoDOM elements, enabling efficient and\noptimized rendering.\n\n### Example\n\nConsider a scenario where you have a GoDOM element for an article, but you want the article's content and attributes to\nbe populated dynamically:\n\n```go\npackage main\n\nimport (\n\t\"bytes\"\n\t. \"github.com/tbe/godom\"\n\t\"github.com/tbe/godom/helpers\"\n\t\"github.com/tbe/godom/template\"\n)\n\nfunc main() {\n\t// Create a new template\n\ttmpl := template.New(\"article\")\n\n\t// Define the structure using GoDOM and the template placeholders\n\tarticleElement := Div(Class(\"article\"), tmpl.Attribute(\"data-id\"))(\n\t\tH2()(tmpl.Placeholder(\"title\")),\n\t\tP()(tmpl.Placeholder(\"content\")),\n\t)\n\n\t// Parse the GoDOM element into the template\n\ttemplate.Must(tmpl.Parse(articleElement))\n\n\t// Render the template with dynamic content\n\tvar buf bytes.Buffer\n\ttmpl.Execute(\u0026buf, \u0026template.Context{\n\t\tPlaceholders: map[string]types.Element{\n\t\t\t\"title\":   helpers.NewStringElement(\"Dynamic Article Title\"),\n\t\t\t\"content\": helpers.NewStringElement(\"This is the dynamically inserted content for our article.\"),\n\t\t},\n\t\tAttributes: map[string]types.Attribute{\n\t\t\t\"data-id\": Data_(\"id\", \"12345\"),\n\t\t},\n\t})\n\n\t// Output will be:\n\t// \u003cdiv class=\"article\" data-id=\"12345\"\u003e\n\t//     \u003ch2\u003eDynamic Article Title\u003c/h2\u003e\n\t//     \u003cp\u003eThis is the dynamically inserted content for our article.\u003c/p\u003e\n\t// \u003c/div\u003e\n}\n```\n\n## Contribute\n\nContributions to GoDOM are welcome! Feel free to open issues or submit pull requests.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftbe%2Fgodom","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftbe%2Fgodom","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftbe%2Fgodom/lists"}