lit-xml

Lit XML 🔥

Burning your XML documents to the ground? Yes please. In the mean time, let's use lit-xml.

A small utility to help construction of XML documents using a simple tagged template. Because you sometimes have to use XML 🤷‍♀️.

🗺️ Installation

Install lit-xml locally within your project folder, like so:

npm i lit-xml

Or with yarn:

yarn add lit-xml

🎁 Usage

A simple example:

import { xml } from 'lit-xml';

const xmlFragment = xml`<foo bar="${41 + 1}">Some ${'<content>'}</foo>`.toString();
// => '<foo bar="42">Some &lt;content&gt;</foo>'

Importing xml will give you the default xml template literal. It will sanitize values, but not validate on well formed xml for performance reasons.

A more advanced scenario:

import { createLitXml } from 'lit-xml';
const xml = createLitXml({
  format: true,
  validators: [validators.isWellFormed],
  indent: 2,
});

xml`<foo bar="${41 + 1}"><baz></baz></foo>`.toString();
// => `<foo bar="42">
//       <baz/>
//     </foo>`

xml`<foo><foo>`.toString();
// InvalidXmlError! Error on line 1: Closing tag 'foo' is expected inplace of 'bar'.

const people = [{ name: 'foo' }, { name: 'bar' }];
xml`<people>${people.map((p) => xml`<person>${p.name}</person>`)}</people>`.toString();
// => `<people>
//      <person>foo</person>
//      <person>bar</person>
//    </people>`

In this example, the createLitXml factory method is used to create a custom xml template literal. In this case it will validate that the XML document is well-formed and it will be formatted (with an indent of 2 spaces).

🚀 Features

🧩 Construct xml documents using plain JS like conditional operators and Array.prototype.map
💄 vscode plugin for syntax highlighting
🚿 Interpolated values are sanitized
📐 Configurable well formed validation using fast-xml-parser
👓 Configurable formatting output using fast-xml-parser

💭 Motivation

JavaScript is not-XML friendly. We're missing good libraries to construct larger XML documents without relying on template libraries like ejs or handlebars.

This library is an attempt to solve this problem using the simple feature of tagged templates. It is inspired by the awesome lit-html.