{"id":16032713,"url":"https://github.com/threez/html-builder.cr","last_synced_at":"2025-07-17T21:33:08.897Z","repository":{"id":158825302,"uuid":"634264450","full_name":"threez/html-builder.cr","owner":"threez","description":"Build HTML using a crystal DSL","archived":false,"fork":false,"pushed_at":"2023-05-11T19:00:05.000Z","size":18,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-01T13:16:23.719Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Crystal","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/threez.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":"2023-04-29T15:15:22.000Z","updated_at":"2023-04-29T15:34:34.000Z","dependencies_parsed_at":null,"dependency_job_id":"55fd3e4a-7ca3-44c1-aa2a-d037d25f43a8","html_url":"https://github.com/threez/html-builder.cr","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/threez/html-builder.cr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threez%2Fhtml-builder.cr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threez%2Fhtml-builder.cr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threez%2Fhtml-builder.cr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threez%2Fhtml-builder.cr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/threez","download_url":"https://codeload.github.com/threez/html-builder.cr/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/threez%2Fhtml-builder.cr/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265663011,"owners_count":23807465,"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-10-08T21:40:24.875Z","updated_at":"2025-07-17T21:33:08.853Z","avatar_url":"https://github.com/threez.png","language":"Crystal","funding_links":[],"categories":[],"sub_categories":[],"readme":"# html-builder [![.github/workflows/ci.yml](https://github.com/threez/html-builder.cr/actions/workflows/ci.yml/badge.svg)](https://github.com/threez/html-builder.cr/actions/workflows/ci.yml) [![https://threez.github.io/html-builder.cr/](https://badgen.net/badge/api/documentation/green)](https://threez.github.io/html-builder.cr/)\n\nBuild HTML using a crystal DSL. The dsl strictly checks the attributes\nusing the compiler at build time.\n\n## Installation\n\n1. Add the dependency to your `shard.yml`:\n\n   ```yaml\n   dependencies:\n     html-builder:\n       github: threez/html-builder.cr\n   ```\n\n2. Run `shards install`\n\n## Usage\n\n```crystal\nrequire \"html-builder\"\n\nclass Page\n  include HTML::Builder\n\n  def initialize(@io : IO)\n  end\n\n  def render\n    doctype\n    html lang: :en do\n      head do\n        meta name: :robots, content: :nofollow\n        title do\n          style { raw \"h1 \u003e span { font-size: 10px; }\" }\n        end\n      end\n      body do\n        h1 style: {\"font-family\": \"Helvetica\"}, id: :title do\n          text \"Hello \u003e World\"\n        end\n        para aria: {label: \"Example\"} do\n          a data: {sample: \"foobar\"}, on: {click: \"event.preventDefault()\"} { text \"Click me!\" }\n        end\n      end\n    end\n  end\nend\n\n# Then simply render the page\nputs Page.new(STDOUT).render\n```\n\n## Special attributes\n\nThere are a few special attributes:\n\n* `:on` hash of event handlers\n* `:style` hash or string of style configuration\n* `:data` hash of data values\n* `:aria` hash of aria attributes\n\n## Special tags\n\n* `para` instead of `p`\n* `select_tag` instead of `select`\n\n## Related projects\n\n* [Lucky Framework](https://luckyframework.org/guides/frontend/rendering-html)\n* [Water](https://github.com/shootingfly/water)\n\n## HTML to code\n\nThe [converter](https://luckyframework.org/html) of the lucky project can\nbe used to handle most of the conversion.\n\n## Contributing\n\n1. Fork it (\u003chttps://github.com/threez/html-builder.cr/fork\u003e)\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create a new Pull Request\n\n## Contributors\n\n- [Vincent Landgraf](https://github.com/threez) - creator and maintainer\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreez%2Fhtml-builder.cr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthreez%2Fhtml-builder.cr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthreez%2Fhtml-builder.cr/lists"}