{"id":26172768,"url":"https://github.com/dobschal/html.js","last_synced_at":"2025-12-25T05:14:15.025Z","repository":{"id":279916139,"uuid":"940444390","full_name":"dobschal/html.js","owner":"dobschal","description":"A simple HTML in Javascript implementation with Model View Binding.","archived":false,"fork":false,"pushed_at":"2025-02-28T13:51:44.000Z","size":122,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-28T13:54:39.965Z","etag":null,"topics":["html-css-javascript","html-in-javascript","javascript","mvvm","reactive"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dobschal.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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-02-28T07:25:25.000Z","updated_at":"2025-02-28T13:51:35.000Z","dependencies_parsed_at":"2025-02-28T13:56:55.338Z","dependency_job_id":"ed4178a6-5184-4c75-98dc-f4b839a30b3b","html_url":"https://github.com/dobschal/html.js","commit_stats":null,"previous_names":["dobschal/html.js"],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dobschal%2Fhtml.js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dobschal%2Fhtml.js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dobschal%2Fhtml.js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dobschal%2Fhtml.js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dobschal","download_url":"https://codeload.github.com/dobschal/html.js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243104055,"owners_count":20236944,"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-css-javascript","html-in-javascript","javascript","mvvm","reactive"],"created_at":"2025-03-11T19:58:50.899Z","updated_at":"2025-12-25T05:14:15.018Z","avatar_url":"https://github.com/dobschal.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# HTML.js\n\nA simple HTML in Javascript implementation featuring Model View Binding. It allows you to create HTML elements using\ntemplate literals and bind them to your model.\n\n![Test](https://github.com/dobschal/HTML/actions/workflows/test.yml/badge.svg)\n[![NPM](https://img.shields.io/npm/v/@dobschal/html.js)](https://www.npmjs.com/package/@dobschal/html.js)\n\n## Installation\n\n```bash\nnpm install --save @dobschal/html.js\n```\n\n## Examples\n\n### Hello World\n\nThe example below creates a simple div element with the text \"Hello World\" and appends it to the body.\n\n```javascript\nimport {html} from '@dobschal/html.js';\n\ndocument.body.append(\n    html`\u003cdiv\u003eHello World\u003c/div\u003e`\n);\n```\n\n### Model View Binding\n\nThe created `view` is bound to the `count` observable. When the count changes, the view is updated:\n\n```javascript\nimport {html} from '@dobschal/html.js';\nimport {Observable} from '@dobschal/observable';\n\nconst count = Observable(0);\n\nconst view = html`\n    \u003cp\u003e👉 ${count}\u003c/p\u003e\n    \u003cbutton onclick=\"${() =\u003e count.value++}\"\u003eCount Up 🚀\u003c/button\u003e\n`;\n\ndocument.body.append(...view);\n```\n\n**Example for binding input values:**\n```javascript\nconst name = Observable(\"Sascha\");\n\nconst view = html`\n    \u003cp\u003e👉 ${name}\u003c/p\u003e\n    \u003cinput type=\"text\" value=\"${name}\" /\u003e\n`;\n```\n## API\n\n### html\n\n`html` is a tagged template literal function that creates an HTML element or elements from a template string.\n\n```javascript\n// Create a div element with the text \"Hello World\"\nconst element = html`\u003cdiv\u003eHello World\u003c/div\u003e`;\nconsole.log(element instanceof HTMLElement); // true\n```\n\nIn case the HTML template contains multiple elements, an array of elements is returned!\nWhen appending to the DOM, you can use the spread operator to append all elements at once.\n```javascript\ndocument.body.append(...html`\n    \u003cdiv\u003eHello World 1\u003c/div\u003e\n    \u003cdiv\u003eHello World 2\u003c/div\u003e\n`);\n```\n\n### Components\n\nYou can create components by defining a function that returns an HTML element.\n\n```javascript\nfunction MyComponent() {\n    return html`\u003cdiv\u003eHello World\u003c/div\u003e`;\n}\n\nfunction App() {\n    return html`\n        \u003cdiv\u003e\n            ${MyComponent()}\n        \u003c/div\u003e\n    `;\n}\n\ndocument.body.append(App());\n```\n\n### Event Listeners\n\nYou can add event listeners to elements by using the standard HTML event attributes.\n\n```javascript\nhtml`\n    \u003cbutton onclick=\"${() =\u003e console.log('Clicked')}\"\u003eClick Me\u003c/button\u003e\n`;\n```\n\n### Model View Binding\n\nYou can bind an observable to an element by using the observable directly in the template.\n\n```javascript\nimport {Observable} from '@dobschal/observable';\n\nconst count = Observable(0);\n\nconst view = html`\n    \u003cp\u003e👉 ${count}\u003c/p\u003e\n    \u003cbutton onclick=\"${() =\u003e count.value++}\"\u003eCount Up 🚀\u003c/button\u003e\n`;\n```\n\n### Conditional Rendering\n\nYou can conditionally render elements by using the ternary operator or the custom `if` attribute.\n\n```javascript\nconst show = Observable(true);\n\n// With the ternary operator\nconst view = html`\n    ${show ? html`\u003cdiv\u003eHello World\u003c/div\u003e` : null}\n`;\n\n// With the if attribute\nconst view = html`\n    \u003cdiv if=\"${show}\"\u003eHello World\u003c/div\u003e\n`;\n```\n\n### List Rendering\n\nYou can render lists by using the `map` function on an array or observable array.\n\n```javascript\nconst items = Observable([1, 2, 3]);\n\nconst view = html`\n    \u003cul\u003e\n        ${items.map(item =\u003e html`\u003cli\u003e${item}\u003c/li\u003e`)}\n    \u003c/ul\u003e\n`;\n```\n\n# Author\n\n![👋](https://avatars.githubusercontent.com/u/15888400?s=48\u0026v=4)\n\nSascha Dobschal\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdobschal%2Fhtml.js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdobschal%2Fhtml.js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdobschal%2Fhtml.js/lists"}