{"id":20565840,"url":"https://github.com/phenax/h","last_synced_at":"2025-04-14T15:35:37.286Z","repository":{"id":60723326,"uuid":"110346137","full_name":"phenax/h","owner":"phenax","description":"Html templating library for kotlin","archived":false,"fork":false,"pushed_at":"2020-08-22T13:59:31.000Z","size":103,"stargazers_count":18,"open_issues_count":2,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T04:30:46.602Z","etag":null,"topics":["html","kotlin","template-engine"],"latest_commit_sha":null,"homepage":"","language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/phenax.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}},"created_at":"2017-11-11T13:07:30.000Z","updated_at":"2024-05-13T18:21:30.000Z","dependencies_parsed_at":"2022-10-03T21:33:47.654Z","dependency_job_id":null,"html_url":"https://github.com/phenax/h","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/phenax%2Fh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/phenax","download_url":"https://codeload.github.com/phenax/h/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248907005,"owners_count":21181258,"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":["html","kotlin","template-engine"],"created_at":"2024-11-16T04:39:16.892Z","updated_at":"2025-04-14T15:35:37.260Z","avatar_url":"https://github.com/phenax.png","language":"Kotlin","funding_links":[],"categories":[],"sub_categories":[],"readme":"# h\n[![Build Status](https://img.shields.io/circleci/project/github/RedSparr0w/node-csgo-parser.svg?style=for-the-badge)](https://circleci.com/gh/phenax/h)\n[![Codecov branch](https://img.shields.io/codecov/c/github/phenax/h/master.svg?style=for-the-badge)](https://codecov.io/gh/phenax/h)\n[![release](http://github-release-version.herokuapp.com/github/phenax/h/release.svg?style=for-the-badge)](https://github.com/phenax/h/releases/latest)\n[![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg?style=for-the-badge)](https://opensource.org/licenses/Apache-2.0)\n\nHtml templating library for kotlin.\n\n\n## Get started\n\n#### Download\n* Download  the latest release. ([View releases](https://github.com/phenax/h/releases))\n* Clone the repo for the source code `git clone https://github.com/phenax/h`.\n* Test it with `./gradlew test`. Generated test report -\u003e `build/reports/tests/test`.\n\n#### Examples\nSimple component examples in `/examples`\n\n\n#### Create a component\n\n```kotlin\nimport io.github.phenax.h.Component\nimport io.github.phenax.h.Layout\nimport io.github.phenax.h.node.DOMNode\nimport io.github.phenax.h.layouts.EmptyLayout\n\nclass CardComponent(val myTitle: String): Component() {\n\n  // Layout(EmptyLayout is no wrapper. You can use a custom layout)\n  override val layout = EmptyLayout()\n\n  // This renders a div card component\n  // \u003cdiv class=\"card\"\u003e\n  //   \u003ch1 class=\"card--title\"\u003eCard title\u003c/h1\u003e\n  //   \u003cp class=\"card--description\"\u003eCard description\u003c/p\u003e\n  // \u003c/div\u003e\n  override fun render(): DOMNode {\n    return div( mapOf( \"class\" to \"card\" ),\n      listOf(\n        h1( mapOf( \"class\" to \"card--title\" ), myTitle),\n        p( mapOf( \"class\" to \"card--description\" ), \"Card description\" )\n      )\n    )\n  }\n}\n\nval helloWorldCard = CardComponent(\"Hello world\")\n```\n\nOR\n\n```kotlin\nimport io.github.phenax.h.*\n\nfun createCard(myTitle: String) = component {\n  div( mapOf( \"class\" to \"card\" ),\n    listOf(\n      h1( mapOf( \"class\" to \"card--title\" ), myTitle),\n      p( mapOf( \"class\" to \"card--description\" ), \"Card description\")\n    )\n  )\n}\n\nval helloWorldCard = createCard(\"Hello world\")\n```\n\n#### Create a layout\n```kotlin\nimport io.github.phenax.h.Component\nimport io.github.phenax.h.Layout\nimport io.github.phenax.h.node.DOMNode\n\nclass HtmlLayout(val title: String = \"Moosic\"): Layout() {\n  override fun render(component: AbstractComponent): DOMNode {\n    return (\n      html(null, listOf(\n        head(null, listOf(\n          h(\"title\", null, listOf( text(title) ) ),\n          style(\"/css/style.css\"),                               // External stylesheet\n          style(null, \"html, body { background-color: red; }\")   // Inline style\n        )),\n        body(null, listOf(\n          div(null, h(component)),\n          script(\"/js/script.js\", mapOf( \"defer\" to \"defer\", \"async\" to \"async\" ))\n        ))\n      ))\n    )\n  }\n}\n```\n\n\n#### Use components inside other components\n```kotlin\nclass UserCardComponent(user: User): Component() {\n  override val layout = EmptyLayout()\n  override fun render(): DOMNode {\n    return div(null, listOf(\n      div(null, listOf( text(user.name) )),\n      div(null, listOf( text('@' + user.nickname) )),\n    ))\n  }\n}\n\nclass UserListComponent(usersList: List\u003cUser\u003e): Component() {\n  override val layout = EmptyLayout()\n  override fun render(): DOMNode {\n    return div(null,\n      usersList.map { user -\u003e\n        div(null, listOf( h(UserCardComponent(user)) ))\n      }\n    )\n  }\n}\n```\n\n\n#### Render to html string\n```kotlin\nval component = CardComponent()\nprintln(component.renderToHtml())\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenax%2Fh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fphenax%2Fh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fphenax%2Fh/lists"}