{"id":21690900,"url":"https://github.com/reiver/html-include","last_synced_at":"2026-05-18T03:02:52.255Z","repository":{"id":148331273,"uuid":"316033963","full_name":"reiver/html-include","owner":"reiver","description":"A web component for doing HTML includes: \u003chtml-include src=\"...\"\u003e\u003c/html-include\u003e","archived":false,"fork":false,"pushed_at":"2020-11-26T01:27:21.000Z","size":6,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-17T20:40:33.571Z","etag":null,"topics":["edge-side-include","esi","web-component"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/reiver.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":"2020-11-25T19:22:05.000Z","updated_at":"2020-11-26T16:04:38.000Z","dependencies_parsed_at":"2023-05-19T19:30:21.535Z","dependency_job_id":null,"html_url":"https://github.com/reiver/html-include","commit_stats":{"total_commits":9,"total_committers":1,"mean_commits":9.0,"dds":0.0,"last_synced_commit":"22dbe051b1bae8f42ea57069103af2b233ae22fb"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/reiver/html-include","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reiver%2Fhtml-include","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reiver%2Fhtml-include/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reiver%2Fhtml-include/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reiver%2Fhtml-include/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/reiver","download_url":"https://codeload.github.com/reiver/html-include/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/reiver%2Fhtml-include/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278820735,"owners_count":26051767,"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","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["edge-side-include","esi","web-component"],"created_at":"2024-11-25T17:34:50.778Z","updated_at":"2025-10-07T18:10:26.327Z","avatar_url":"https://github.com/reiver.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `\u003chtml-include\u003e`\n\n`\u003chtml-include\u003e` is a **web component** that lets you _include_ HTML at one URI into another HTML page.\n\nYou can think of this as a web-browser-side edge-side-include (ESI) — if you are familar with the server side `\u003cesi:include\u003e`.\n\n## Example\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\t\u003chead\u003e\n\t\t\u003cmeta charset=\"utf-8\" /\u003e\n\t\t\u003ctitle\u003eExample\u003c/title\u003e\n\n\t\t\u003cscript src=\"components/html-include.js\"\u003e\u003c/script\u003e\n\t\u003c/head\u003e\n\n\t\u003cbody\u003e\n\t\t\u003chtml-include title=\"footer\" src=\"partials/header.html\"\u003e\u003c/html-include\u003e\n\n\t\t\u003cp\u003e\n\t\t\tHello world!\n\t\t\u003c/p\u003e\n\n\t\t\u003chtml-include title=\"footer\" src=\"partials/footer.html\"\u003e\u003c/html-include\u003e\n\t\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Basic Usage\n\nThe most basic way of using `\u003chtml-include\u003e` is:\n\n```html\n\u003chtml-include src=\"footer.html\"\u003e\u003c/html-include\u003e\n```\n\n```html\n\u003chtml-include src=\"includes/header.html\"\u003e\u003c/html-include\u003e\n```\n\n```html\n\u003chtml-include src=\"path/to/the/file.html\"\u003e\u003c/html-include\u003e\n```\n\nNote that in this _basic usage_ we just set the `src` attribute to point to the URI we want to include.\n\n## Advanced Usage\n\nA more advanced way using `\u003chtml-include\u003e` is:\n\n```html\n\u003chtml-include title=\"footer\" src=\"footer.html\" /\u003e\n```\nNote the addition of the ‘title’ attribute.\n\nThis usage will show a more informative loading message.\nI.e., instead of showing:\n\u003e Loading…\n\n… it will show:\n\u003e Loading “footer”…\n\nI.e., it includes whatever is in the ‘title’ attribute in the loading-message.\n\n## Debugging\n\nIf you need to debug what `\u003chtml-include\u003e` is doing you can use the `debug=\"true\"` attribute. For example:\n\n```html\n\u003chtml-include debug=\"true\" src=\"footer.html\" /\u003e\n```\n\n```html\n\u003chtml-include debug=\"true\" title=\"footer\" src=\"footer.html\" /\u003e\n```\n\nNote the addition of the ‘debug’ attribute, with the value set to the string \"true\".\n\nThis will call console.log() with logs that try to provide inside into what \u003chtml-include\u003e is doing internally.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freiver%2Fhtml-include","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freiver%2Fhtml-include","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freiver%2Fhtml-include/lists"}