A tiny web template system for the browser.
Compose your HTML in <template> elements. Use placeholders (${…}) to mark dynamic content. Call fill to generate a new HTML string which interpolates the template's content with the given properties.
npm install @domchristie/composite/* rendered somewhere in the DOM */
<template id="hello">
<h1>${greeting}, ${name}!</h1>
</template>import { fill } from '@domchristie/composite'
const Hello = document.getElementById('hello')
fill(Hello, { greeting: 'Hello', name: 'World' }) // '<h1>Hello, World!</h1>'Renders a template with given properties.
template(HTMLTemplateElement | string) The HTML template to be rendered.propsObject An object containing properties to be interpolated into the template.
Returns string The rendered HTML string with properties interpolated.
A tag function for template literals that escapes HTML special characters in values unless they are marked as raw.
stringsTemplateStringsArray An array of string literals.values...any The values to be interpolated into the template.
Returns string The final string with values safely interpolated.
Escapes special characters in a string for use in HTML. The characters escaped are: & < > " ' ` = /
stringstring The input string to escape.
Returns string The escaped string.
Unescapes a given HTML-encoded string.
stringstring The HTML-encoded string to unescape.
Returns string The unescaped string.
Marks a string as raw HTML to prevent escaping of special characters.
htmlstring The HTML string to wrap.
Returns RawString The wrapped HTML string as a RawString object.
Composite uses new Function to generate HTML from templates. This approach can fail when using strict Content Security Policies (CSPs).
Copyright © 2024+ Dom Christie and released under the MIT license.