{"id":15779228,"url":"https://github.com/jaredkrinke/literal-html","last_synced_at":"2025-07-30T03:32:56.279Z","repository":{"id":62422417,"uuid":"427450318","full_name":"jaredkrinke/literal-html","owner":"jaredkrinke","description":"Simple and unsafe HTML/XML templates for TypeScript, using tagged template literals","archived":false,"fork":false,"pushed_at":"2021-12-08T05:24:57.000Z","size":17,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-11T00:11:33.184Z","etag":null,"topics":["deno","tagged-literals","templates"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit-0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaredkrinke.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":"2021-11-12T17:53:51.000Z","updated_at":"2021-12-22T04:36:13.000Z","dependencies_parsed_at":"2022-11-01T17:31:56.460Z","dependency_job_id":null,"html_url":"https://github.com/jaredkrinke/literal-html","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/jaredkrinke/literal-html","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredkrinke%2Fliteral-html","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredkrinke%2Fliteral-html/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredkrinke%2Fliteral-html/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredkrinke%2Fliteral-html/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaredkrinke","download_url":"https://codeload.github.com/jaredkrinke/literal-html/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaredkrinke%2Fliteral-html/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267803983,"owners_count":24146527,"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-07-30T02:00:09.044Z","response_time":70,"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":["deno","tagged-literals","templates"],"created_at":"2024-10-04T18:03:26.874Z","updated_at":"2025-07-30T03:32:56.229Z","avatar_url":"https://github.com/jaredkrinke.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# literal-html\nSimple and unsafe HTML/XML templates for TypeScript, using [tagged template literals](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#tagged_templates).\n\n**This library should not be used with untrusted strings!**\n\n## Syntax\nTagged template literals in JavaScript start with a tag (`html` or `xml` for this library) and are enclosed in backticks (e.g. `` html`text goes here` ``).\n\nValues are inserted as JavaScript expressions enclosed in braces, prefixed by a dollar sign (e.g. `` html`\u003cp\u003e${value}\u003c/p\u003e` ``).\n\nFor literal-html, if the expression evaluates to an object with a single key, the key indicates the type of escaping that is required. For example, `{attr: \"\u0026\"}` is an object with `attr` as its key and `\"\u0026\"` as its (string) value. This tells literal-html to escape the value as an attribute value. For example, `` html`\u003cimg alt=\"${{attr: \"\u0026\"}}\" /\u003e` `` would be escaped as `\u003cimg alt=\"\u0026amp;\" /\u003e`.\n\nSupported types and keys:\n\n| Format | Escapes | Notes |\n|---|---|---|\n| `${...}` | \u0026\u003c\u003e'\" | Supports `number` in addition to `string` |\n| `${{content: ...}}` | \u0026\u003c\u003e | |\n| `${{attr: ...}}` | \u0026\u003c\u003e'\" | |\n| `${{scriptString: ...}}` | \u003c\"\\ | Namely for use in JSON-LD |\n| `${{param: ...}}` | `encodeURIComponent()` | For URL query parameters |\n| `${{verbatim: ...}}` | (none) | Only use with previously escaped strings |\n\n## Examples\n### General usage\n```javascript\nimport { html, xml } from \"https://deno.land/x/literal_html/mod.ts\";\n\nconst value = ...; // Some string to be inserted\n\n// Strings are escaped conservatively by default:\nconst fragmentHTML = html`\u003cp\u003e${value}\u003c/p\u003e`;\nconst fragmentXML = xml`\u003ctext\u003e${value}\u003c/text\u003e`;\n\n// You can specify the type of escaping required using an object with a single key, e.g. {attr: ...} for an attribute`:\nconst fragment3 = html`\u003cimg alt=\"${{attr: value}}\" /\u003e`;\n\n// To eliminate escaping altogether use the \"verbatim\" key:\nconst fragment4 = html`\u003cp\u003e${{verbatim: \"This will NOT be escaped at all!\"}}\u003c/p\u003e`;\n```\n\nExamples of each type of escape follow.\n\n### Default escaping (escapes: \u0026\u003c\u003e'\")\n```javascript\nconst value = \"what's \u003cthis\u003e do? this \u0026 \\\"that\\\"!\";\nconst result = html`\u003chtml\u003e\u003cbody\u003e\u003cp\u003e${value}\u003c/p\u003e\u003c/body\u003e\u003c/html\u003e`;\n\n// Result: \u003chtml\u003e\u003cbody\u003e\u003cp\u003ewhat\u0026#39;s \u0026lt;this\u0026gt; do? this \u0026amp; \u0026quot;that\u0026quot;!\u003c/p\u003e\u003c/body\u003e\u003c/html\u003e\n```\n\n### Content between start and end tags (escapes: \u0026\u003c)\n```javascript\nconst value = \"what's \u003cthis\u003e do? this \u0026 \\\"that\\\"!\";\nconst result = html`\u003chtml\u003e\u003cbody\u003e\u003cp\u003e${{content: value}}\u003c/p\u003e\u003c/body\u003e\u003c/html\u003e`;\n\n// Result: \u003chtml\u003e\u003cbody\u003e\u003cp\u003ewhat's \u0026lt;this\u0026gt; do? this \u0026amp; \"that\"!\u003c/p\u003e\u003c/body\u003e\u003c/html\u003e\n```\n\n### Attribute value (escapes: \u0026\u003c\")\n```javascript\nconst value = \"what's \u003cthis\u003e do? this \u0026 \\\"that\\\"!\";\nconst result = html`\u003chtml\u003e\u003cbody\u003e\u003cimg alt=\"${{attr: value}}\" /\u003e\u003c/body\u003e\u003c/html\u003e`;\n\n// Result: \u003chtml\u003e\u003cbody\u003e\u003cimg alt=\"what\u0026#39;s \u0026lt;this\u0026gt; do? this \u0026amp; \u0026quot;that\u0026quot;!\" /\u003e\u003c/body\u003e\u003c/html\u003e\n```\n\n### HTML/JSON script string (escapes: \u003c\"\\\\)\n```javascript\nconst value = 'A \u003c \"B\" \\\\ C';\nconst result = html`\u003cscript type=\"application/ld+json\"\u003e{ \"name\": \"${{scriptString: value}}\" }\u003c/script\u003e`;\n\n// Result: \u003cscript type=\"application/ld+json\"\u003e{ \"name\": \"A \\x3C \\\"B\\\" \\\\ C\" }\u003c/script\u003e\n```\n\n### Query parameters/URI components (escapes using `encodeURIComponent()` and escaping \u0026\u003c\u003e'\")\n```javascript\nconst value = \"what's \u003cthis\u003e do? 'this' \u0026 \\\"that\\\"!\";\nconst result = html`\u003chtml\u003e\u003cbody\u003e\u003cp\u003e\u003ca href=\"https://www.bing.com/search?q=${{param: value}}\"\u003eLink\u003c/a\u003e\u003c/p\u003e\u003c/body\u003e\u003c/html\u003e`;\n\n// Result: \u003chtml\u003e\u003cbody\u003e\u003cp\u003e\u003ca href=\"https://www.bing.com/search?q=what\u0026#39;s%20%3Cthis%3E%20do%3F%20\u0026#39;this\u0026#39;%20%26%20%22that%22!\"\u003eLink\u003c/a\u003e\u003c/p\u003e\u003c/body\u003e\u003c/html\u003e\n```\n\n### Verbatim strings (no escaping)\nThis should only be used with strings that have already been properly escaped.\n\n```javascript\nconst result = html`\u003cp\u003e${{verbatim: \"Line 1\u003cbr/\u003eLine 2\u003cbr/\u003e\"}}\u003c/p\u003e`;\n\n// Result: \u003cp\u003eLine 1\u003cbr/\u003eLine 2\u003cbr/\u003e\u003c/p\u003e\n```\n\nThis is especially useful for conditional inclusion:\n\n```javascript\nconst alt = \"An image\";\nconst result = html`\u003cimg ${{verbatim: alt ? html`alt=\"${alt}\"` : \"\"}}/\u003e`;\n\n// Result: \u003cimg alt=\"An image\"/\u003e\n```\n\nOr applying templates to arrays of values:\n\n```javascript\nconst listItems = [\"\u003c\", \"\u003e\", \"\u0026\"];\nconst result = html`\u003cul\u003e${{\n    verbatim: listItems\n        .map(x =\u003e html`\u003cli\u003e${x}\u003c/li\u003e`)\n        .join(\"\")\n}}\u003c/ul\u003e`;\n\n// Result: \u003cul\u003e\u003cli\u003e\u0026lt;\u003c/li\u003e\u003cli\u003e\u0026gt;\u003c/li\u003e\u003cli\u003e\u0026amp;\u003c/li\u003e\u003c/ul\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredkrinke%2Fliteral-html","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaredkrinke%2Fliteral-html","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaredkrinke%2Fliteral-html/lists"}