XSLT Won’t Render on Local Files

March 27, 2020 Ryan Perry Comments 0 Comment

The Problem

When attempting to view locally saved XML files with an XSL stylesheet, the browser either displays a blank page, or raw, unstylized XML data.

Reference Material

W3Schools XSLT Tutorial
Stack Overflow: Can Chrome Perform XSLT on a Local file?
Mozilla: Why is my XSL file no longer being applied to my XML file?

EXtensible Stylesheet Language is the language used to stylize XML, similar to the way CSS is used to style HTML. You can learn more about it on W3School’s XSLT tutorial, but the in-browser demos don’t work.

Unfortunately, whether you are just learning or professionally developing an XSL file, opening the file directly in your browser will likely not work. For security reasons, modern browsers now disable XSLT on local files, although this was not always the case. While you can change the settings on your browser, this will compromise your security. The files can be uploaded to a web hosting service and accessed over HTTP, but this is a bit tedious. So, how do you render XSL on local files?

The Helpful Bit

The files can be stored and accessed on your machine, through a locally run server. Two options require very little effort to configure or run.

Visual Studio Code: Live Server

If you are editing your XML and XSL files in Visual Studio Code (VSC), there is an extension called Live Server.

Within VSC, install the Live Server extension.
Restart VSC.
Open your project folder.
In the lower right status bar, click “Go Live.”
That was TOO easy!

Apache on Xampp

Another option is to use use a local instance of Apache web server, which most web developers likely have installed already. For Individuals just learning web development, Xampp is a free and easy way to set it up.

Download and install Xampp.
In the Xampp Control Panel, click Start on the Apache server.
If Apache fails to start, one of the most common issues is a port conflict. Try opening the Config > Appache.conf file and changing the port from 80 to 8080).
Place your folder containing the XML and XSL files in the web server folder, typically C:/Xampp/htdocs/yourfolder.
Point your browser to localhost/yourfolder. If you had to change the port number, the URL will be localhost:8080/yourfolder

Conclusion

Instead of compromising your browser security settings, or uploading your XML/XSL files to a remote web host, XSLT can easily be rendered on local files by accessing them via these easy-to-use webservers. If you run into any hiccups, please feel free to reach out with questions or comments.