{"id":19346801,"url":"https://github.com/juicy/juicy-html","last_synced_at":"2025-06-22T00:03:13.620Z","repository":{"id":57286849,"uuid":"14489520","full_name":"Juicy/juicy-html","owner":"Juicy","description":"A custom element that lets you load HTML partials into your Web page. Declarative way for client-side includes.","archived":false,"fork":false,"pushed_at":"2020-03-29T12:32:02.000Z","size":2812,"stargazers_count":62,"open_issues_count":6,"forks_count":11,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-06-22T00:02:42.869Z","etag":null,"topics":["plain-js","used-in-starcounter-app"],"latest_commit_sha":null,"homepage":"http://juicy.github.io/juicy-html/","language":"HTML","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/Juicy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-11-18T10:38:52.000Z","updated_at":"2024-07-12T18:15:28.000Z","dependencies_parsed_at":"2022-09-08T11:34:10.297Z","dependency_job_id":null,"html_url":"https://github.com/Juicy/juicy-html","commit_stats":null,"previous_names":[],"tags_count":25,"template":false,"template_full_name":null,"purl":"pkg:github/Juicy/juicy-html","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Juicy%2Fjuicy-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Juicy%2Fjuicy-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Juicy%2Fjuicy-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Juicy%2Fjuicy-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Juicy","download_url":"https://codeload.github.com/Juicy/juicy-html/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Juicy%2Fjuicy-html/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261212279,"owners_count":23125577,"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":["plain-js","used-in-starcounter-app"],"created_at":"2024-11-10T04:12:32.829Z","updated_at":"2025-06-22T00:03:08.606Z","avatar_url":"https://github.com/Juicy.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u0026lt;juicy-html\u0026gt; [![Build Status](https://travis-ci.org/Juicy/juicy-html.svg?branch=master)](https://travis-ci.org/Juicy/juicy-html)\n==============\n\u003e Declarative way for client-side includes\n\n`\u003cjuicy-html\u003e` is a custom element that lets you load HTML partials from JS objects and external files into your DOM. It acts more or less, as `include` statement known in many other languages. It also provides a simple data binding, that works for native JS/HTML as well as for Polymer's `dom-bind`.\n\n### External files\nTo load HTML from external file all you need is:\n```html\n\u003cjuicy-html href=\"./path/to/file.html\"\u003e\u003c/juicy-html\u003e\n```\n\n### Markup provided by attribute\n```html\n\u003cjuicy-html html=\"\u003ch1\u003eHello World\u003c/h1\u003e\"\u003e\u003c/juicy-html\u003e\n```\n\n### Data Binding\n`juicy-html` may forward given model object to stamped elements.\n\n```html\n\u003cjuicy-html\n  html='\n    All those nodes will get \u003ccode\u003e.model\u003c/code\u003e property\n    with the reference to the object given in model attribute.\n    \u003cdom-bind\u003e\n      \u003ctemplate is=\"dom-bind\"\u003e\n        \u003cp\u003ewhich can be used by \u003cspan\u003e{{model.polymer}}\u003c/span\u003e\u003c/p\u003e\n      \u003c/template\u003e\n    \u003c/dom-bind\u003e\n    \u003ccustom-element\u003ethat uses `.model` property\u003ccustom-element\u003e\n    \u003cscript\u003e\n      // script that may use\n      alert( document.currentScript.model );\n    \u003c/script\u003e'\n  model='{\n    \"polymer\": \"Polymer\u0026apos;s dom-bind\",\n    \"vanilla\": \"as well as by native JS \u003ccode\u003e\u0026amp;lt;script\u0026amp;gt;\u003c/code\u003e or custom elements\"\n  }'\u003e\u003c/juicy-html\u003e\n```\nHTML may naturally be provided from external file, and `model` can be provided using Polymer's/or any other data-binding as real object (not a string)\n\n\n## Demo\n\n[Live examples](http://Juicy.github.io/juicy-html)\n\n### Rationale\n\n`juicy-html` provides a way to extend native [`\u003ctemplate\u003e`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)'s feature to be able to load content from outside (external file, data server, etc.).\n\nIt was started as an addition to [Polymer](http://www.polymer-project.org/)'s template binding, as there is no built-in way to insert a `\u003ctemplate\u003e`'s model variable as HTML (Polymer inserts every string as plain text), AngularJS has a way to do it ([ngBindHtml](http://docs.angularjs.org/api/ng.directive:ngBindHtml)) so we found it convenient to do so in Polymer.\n\nCurrently it plain JavaScript, library agnostic custom element, that should work fine with any kind of binding, or none - as simple way to include HTML content from outside.\n\n### Features\n\nYour HTML partials can contain:\n - regular HTML\n - inline scripts using `\u003cscript\u003e//JS code here\u003c/script\u003e`\n - inline styles using `\u003cstyle\u003e/*CSS code here*/\u003c/style\u003e`\n - external stylesheets using `\u003clink rel=\"stylesheet\" href=\"path/to/file.css\"\u003e`, with `href` value relative to the document\n - external scripts using `\u003cscript src=\"path/relative/to/main/document.js\"\u003e\u003c/script\u003e`\n\nOf course, the 2-way data binding attached within your partials will work as desired.\n\nPlease note, that loaded `\u003cscript\u003e` and `\u003cstyle\u003e` will be executed every time HTML content is stamped to your document.\n\n\n## Usage\n\n1. Import Web Components' polyfill (if needed):\n\n    ```html\n    \u003cscript src=\"bower_components/webcomponentsjs/webcomponents-lite.js\"\u003e\u003c/script\u003e\n    ```\n\n2. Import Custom Element:\n\n    ```html\n    \u003clink rel=\"import\" href=\"bower_components/juicy-html/juicy-html.html\"\u003e\n    ```\n\n3. Start using it!\n\n\tLoad HTML partial from a string:\n\n\t```html\n\t\u003cjuicy-html html=\"\u003cb\u003esome\u003c/b\u003e HTML\"\u003e\u003c/juicy-html\u003e\n\t\u003c!-- Or \u003cjuicy-html html=\"{{var}}\"\u003e\u003c/juicy-html\u003e where {{ var }} equals \"\u003cb\u003esome\u003c/b\u003e HTML\" --\u003e\n\t```\n\n\tLoad HTML partial from a URL:\n\n\t```html\n\t\u003cjuicy-html href=\"./path/to/file.html\"\u003e\u003c/juicy-html\u003e\n\t\u003c!-- Or \u003cjuicy-html href=\"{{var}}\"\u003e\u003c/juicy-html\u003e\n\t     where {{var}} equals \"./path/to/file.html\", a path relative to the document that must start with / or ./ --\u003e\n\t```\n\n## Attributes\n\nAttribute           | Options         | Default     | Description\n---                 | ---             | ---         | ---\n`html`              | *String*\t\t  | `\"\"`\t    | Safe HTML code to be stamped. Setting this one will skip any pending request for `href` and remove `href` attribute.\n`href`              | *String*\t\t  | `\"\"`\t    | Path of a partial to be loaded. Setting this one will remove `html` attribute.\n`model`(_optional_) | *Object/String* | `undefined` | Object (or `JSON.stringify`'ied Object) to be attached to every root node of loaded document\n\n## Properties\n\nProperty       | Type              | Default     | Description\n---            | ---               | ---         | ---\n`model`        | *Object*          | `undefined` | See [attributes](#Attributes), plays nice with Polymer data-binding\n`html`         | *String*          | `\"\"`\t     | See [attributes](#Attributes)\n`href`         | *String*          | `\"\"`\t     | See [attributes](#Attributes)\n`pending`      | *XMLHttpRequest*  |             | pending XHR if any\n`stampedNodes` | *Array*           | `[]`        | Array of stamped nodes.\n\nPlease note, that properties are available after element is upgraded.\nTo provide a state before element is upgraded, please use attributes.\n\n## Events\n\nName      | details             | Description\n---       | ---                 | ---\n`stamped` | *Array* of *Node* s | Trigger every time content is (re-)stamped, with array of stamped nodes in `event.detail`\n\n## Methods\n\nName                      | Description\n---                       | ---\n`skipStampingPendingFile` | Call to disregard currently pending request\n\n### Dependencies\n\n`\u003cjuicy-html\u003e` is framework agnostic custom element, so all you need is Web Components support.\nHowever, it plays really nice with [Polymer](http://www.polymer-project.org/) [Auto-binding templates](https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-bind), or any other binding library, that sets HTML elements' properties and/or attributes. Check our demos and examples.\n\n## Browser compatibility\n\nName         | Support    | Comments\n-------------|------------|---------\nChrome 48    | yes        |\nFirefox 43   | yes        |\nEdge 25      | yes        |\nSafari 10-11 | yes        |\nSafari 9-    | not tested |\n\n## Contributing\n\n1. Fork it!\n2. Create your feature branch: `git checkout -b my-new-feature`\n3. Commit your changes: `git commit -m 'Add some feature'`\n4. Push to the branch: `git push origin my-new-feature`\n5. Submit a pull request :D\n\n## History\n\nFor detailed changelog, check [Releases](https://github.com/Juicy/juicy-element/releases).\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuicy%2Fjuicy-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuicy%2Fjuicy-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuicy%2Fjuicy-html/lists"}