XSLT Transform

Apply transformations to convert XML data

⚡ XSLT Transformation Process

XSLT transformation applies stylesheet rules to XML documents, converting them into different formats. The processor reads XML input, applies templates, and generates the transformed output automatically using pattern matching. 


<!-- XML Input -->
<message>Hello World</message>

<!-- After XSLT Transform -->
<h1>Hello World</h1>

Output:

Hello World

Transformation Methods

🌐

Browser

Transform XML in web browsers 

<?xml-stylesheet type="text/xsl"?>
💻

Server-Side

Transform on the server 

processor.transform()
🔧

Command Line

Use XSLT processors 

xsltproc style.xsl data.xml
📱

JavaScript

Transform with JS APIs 

XSLTProcessor()

🔹 Browser-Based Transformation

Link an XSLT stylesheet directly to your XML document using a processing instruction. Modern browsers will automatically apply the transformation and display the result when the XML file is opened. 

<!-- data.xml -->
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
<catalog>
    <book>
        <title>XML Basics</title>
        <author>Jane Doe</author>
        <price>29.99</price>
    </book>
</catalog>

<!-- style.xsl -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <body>
                <h2><xsl:value-of select="catalog/book/title"/></h2>
                <p>Author: <xsl:value-of select="catalog/book/author"/></p>
                <p>Price: $<xsl:value-of select="catalog/book/price"/></p>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Browser Output:

XML Basics

Author: Jane Doe

Price: $29.99

🔹 JavaScript XSLT Transformation

Use the XSLTProcessor API in JavaScript to transform XML documents dynamically in the browser. This method gives you programmatic control over when and how transformations occur. 

// Load XML and XSLT
const xml = new DOMParser().parseFromString(`
    <products>
        <item>Laptop</item>
        <item>Phone</item>
    </products>
`, 'text/xml');

const xslt = new DOMParser().parseFromString(`
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <xsl:template match="/">
            <ul>
                <xsl:for-each select="products/item">
                    <li><xsl:value-of select="."/></li>
                </xsl:for-each>
            </ul>
        </xsl:template>
    </xsl:stylesheet>
`, 'text/xml');

// Transform
const processor = new XSLTProcessor();
processor.importStylesheet(xslt);
const result = processor.transformToFragment(xml, document);

// Add to page
document.body.appendChild(result);

Output:

  • Laptop
  • Phone

🔹 Server-Side Transformation (Node.js)

Transform XML on the server using Node.js libraries. This approach is ideal for generating static HTML files or processing XML data before sending it to clients. 

// Using xslt4node library
const xslt4node = require('xslt4node');

const xml = `
    <library>
        <book>Learning XSLT</book>
    </library>
`;

const xslt = `
    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <xsl:template match="/">
            <html>
                <body>
                    <h1><xsl:value-of select="library/book"/></h1>
                </body>
            </html>
        </xsl:template>
    </xsl:stylesheet>
`;

// Transform
xslt4node.transform({
    xslt: xslt,
    source: xml,
    result: (err, result) => {
        console.log(result);
    }
});

Console Output:

<html><body><h1>Learning XSLT</h1></body></html>

🔹 Command Line Transformation

Use command-line XSLT processors for batch processing and automation. Tools like xsltproc and Saxon are powerful options for transforming multiple XML files efficiently. 

# Using xsltproc (Linux/Mac)
xsltproc stylesheet.xsl input.xml > output.html

# Using Saxon (Java-based, cross-platform)
java -jar saxon.jar -s:input.xml -xsl:stylesheet.xsl -o:output.html

# Transform multiple files
for file in *.xml; do
    xsltproc style.xsl "$file" > "${file%.xml}.html"
done

Example:

$ xsltproc books.xsl catalog.xml > catalog.html

Transformation complete!

🔹 Complete Transformation Example

This comprehensive example shows a complete XSLT transformation workflow from XML data to formatted HTML output with styling and multiple elements. 

<!-- employees.xml -->
<?xml version="1.0"?>
<company>
    <employee id="101">
        <name>Alice Johnson</name>
        <position>Developer</position>
        <salary>75000</salary>
    </employee>
    <employee id="102">
        <name>Bob Smith</name>
        <position>Designer</position>
        <salary>70000</salary>
    </employee>
</company>

<!-- employees.xsl -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <style>
                    table { border-collapse: collapse; width: 100%; }
                    th, td { border: 1px solid #ddd; padding: 8px; }
                    th { background-color: #4CAF50; color: white; }
                </style>
            </head>
            <body>
                <h2>Employee Directory</h2>
                <table>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Salary</th>
                    </tr>
                    <xsl:for-each select="company/employee">
                        <tr>
                            <td><xsl:value-of select="@id"/></td>
                            <td><xsl:value-of select="name"/></td>
                            <td><xsl:value-of select="position"/></td>
                            <td>$<xsl:value-of select="salary"/></td>
                        </tr>
                    </xsl:for-each>
                </table>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

HTML Output:

Employee Directory

ID Name Position Salary
101 Alice Johnson Developer $75000
102 Bob Smith Designer $70000

🧠 Test Your Knowledge

Which processing instruction links an XSLT stylesheet to XML?