{"id":23399592,"url":"https://github.com/canpacis/pacis","last_synced_at":"2025-04-08T19:53:04.984Z","repository":{"id":285093606,"uuid":"956699198","full_name":"canpacis/pacis","owner":"canpacis","description":"An SSR UI library for Go with Tailwind for styling and Alpine.js for interactivity.","archived":false,"fork":false,"pushed_at":"2025-04-06T08:44:18.000Z","size":4030,"stargazers_count":17,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-06T09:20:02.282Z","etag":null,"topics":["alpinejs","go","golang","html","tailwind","tailwindcss","templating","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://ui.canpacis.com","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/canpacis.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-03-28T17:48:02.000Z","updated_at":"2025-04-06T08:39:58.000Z","dependencies_parsed_at":"2025-04-06T09:39:14.458Z","dependency_job_id":null,"html_url":"https://github.com/canpacis/pacis","commit_stats":null,"previous_names":["canpacis/pacis","canpacis/pacis-ui"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canpacis%2Fpacis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canpacis%2Fpacis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canpacis%2Fpacis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canpacis%2Fpacis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/canpacis","download_url":"https://codeload.github.com/canpacis/pacis/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247918936,"owners_count":21018043,"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":["alpinejs","go","golang","html","tailwind","tailwindcss","templating","ui","ui-components"],"created_at":"2024-12-22T10:14:48.892Z","updated_at":"2025-04-08T19:53:04.977Z","avatar_url":"https://github.com/canpacis.png","language":"Go","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Introduction\n\nPacisUI is a set of utilities that are mainly UI components that help you build beautiful web interfaces with the Go programming language.\n\nI plan to make PacisUI a part of a bigger set of tools that is Pacis, but for now I only have this documentation.\n\n## What this is\n\nThis is a UI library built with [Go](https://go.dev/), [TailwindCSS](https://tailwindcss.com/) and [Alpine.js](https://alpinejs.dev/) and it comes in two pieces:\n\n### The Renderer\n\nPacisUI comes with its own html renderer for html elements and their attributes. Think of it like [templ](https://templ.guide/) or [gomponents](https://www.gomponents.com/). If you are familiar with the latter, you will find the PacisUI renderer familiar as well. It looks something like this;\n\n```go\nDiv(\n  ID(\"my-div\") // An attribute\n\n  P(Text(\"Hello, World!\")) // A child with a child\n)\n```\n\nYou compose your html with go functions with PacisUI. If you are not sure about writing your html with Go functions, give it a try anyway, it might be for you and I believe you will find it very expressive and liberating. \n\n\u003e Visit the [Syntax \u0026 Usage](/docs/syntax-usage) page to dive deep in this subject.\n\n### The Components\n\nThe second piece and the focal point of this library is the components. These are, styled, interactive components that you would mainly be using.\n\nA web app built with PacisUI ideally would use both these components and the builtin html elements along with some custom styling with tailwind. \n\n\u003e The truth about frontend development is that these libraries are not a 'be all' solution. It will still require a considerable effort to create something beautiful.\n\n### Icons\n\nA *secret* third piece of the puzzle is the icons. PacisUI comes with a prebuilt icon library that is [Lucide](https://lucide.dev/). Icons are an essential part of UI development and I believe an out of the box solution is always needed.\n\nThat being said, you can always bring your own icons in the form of fonts, SVGs or plain images (although I recommend SVGs). I plan to create a better API to interact with *your* custom SVG icons in the future.\n\n## How it works\n\nA simple overview of this library is that it has nothing more than a bunch of functions that create a meaninful UI's.\n\nThe renderer provides some primitive interfaces and other stuff around it (like the components, icons or your own stuff) consume them.\n\nThese primitives are:\n\n- `renderer.Renderer`: an interface that any renderer implements. If you have worked with [templ](https://templ.guide/) before, the signature will look familiar.\n\n\n```go\ntype Renderer interface {\n  Render(context.Context, io.Writer) error\n}\n```\n\n- `rendereh.I`: an alias to `renderer.Renderer` for ease of use.\n\n```go\ntype I = Renderer\n```\n\n- `renderer.Node`: represents an HTML node that is renderable, this can be anything from an element to a text node.\n\n```go\ntype NodeType int\n\nconst (\n\tNodeText = NodeType(iota)\n\tNodeElement\n\tNodeFragment\n)\n\ntype Node interface {\n  Renderer\n  NodeType() NodeType\n}\n```\n\n- `renderer.Element`: represents and HTML element but not attributes or texts.\n\n```go\ntype Element interface {\n\tNode\n\tGetTag() string\n\n\tGetAttributes() []Attribute\n\tGetAttribute(string) (Attribute, bool)\n\tAddAttribute(Attribute)\n\tRemoveAttribute(string)\n\n\tGetNodes() []Node\n\tGetNode(int) (Node, bool)\n\tAddNode(Node)\n\tRemoveNode(int)\n\n\tGetElement(int) (Element, bool)\n\tGetElements() []Element\n}\n```\n\n- `renderer.Attribute`: represents any kind of element attribute.\n\n```go\ntype Attribute interface {\n\tRenderer\n\tGetKey() string\n\tIsEmpty() bool\n}\n```\n\nBy composing these primitives and building up on them, you can create very well designed UI's with great developer experience. If you love Go like I do, building user interfaces with PacisUI should feel like a breath of fresh air.\n\n\u003e PacisUI is neither complete nor production ready yet but I am working on it. But this documentation site it built with it so it should give you an idea.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanpacis%2Fpacis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcanpacis%2Fpacis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanpacis%2Fpacis/lists"}