XSLT Playground

Loading editor…

Tree

Output initialises when this pane is visible.

How to use

Step-by-step guide for XSLT Playground. Everything runs locally in your browser.

Quick start preview a transform

Your source XML stays in the main input pane.
Edit the XSLT 1.0 stylesheet in the playground panel.
Output refreshes in the preview — copy or inspect the result.

Stylesheet tips XSLT 1.0

Use xsl:template match="/" and xsl:apply-templates for typical transforms. Output is HTML or XML depending on your stylesheet — all evaluation runs locally in the browser.

Need tree view, schema validation, or other modes? Open XML Editor Pro for the full guide with Diff examples and workflows.

Features

What this XSLT Playground page offers — processed locally in your browser.

XSLT 1.0 playground

Edit stylesheets and preview transformation output live.

Copyable output

Copy transformed markup from the preview panel.

100% private

All processing runs in your browser. Nothing is uploaded.

FAQ

Common questions about XSLT Playground.

Is my XML data safe?

Yes. Parsing, formatting, diffing, validation, XPath, transforms, and XSLT all run inside your browser. Data is not sent to a server. The only local storage is your session in localStorage, which you can clear in browser settings.

Does it work offline?

After the first visit (when Monaco and assets are cached), you can edit, format, diff, and transform without a network connection. “Load from URL” still needs network access and a CORS-friendly server.

Can I compare two XML files with elements in a different order?

Yes. Open Diff mode (Ctrl/⌘+D), paste the second file on side B, and keep Sort enabled on both sides. Sibling elements are reordered using a stable canonical ordering so equivalent documents align. Turn Sort off when sequence matters (e.g. ordered event lists).

Quick try: load the sample catalog, open Diff, paste the same XML on B but swap the two <book> blocks. With Sort on, the diff should be empty; with Sort off, you will see the blocks highlighted as changed lines.

Walkthrough: comparing two config exports step by step

Paste your production config in the left editor.
Press Ctrl/⌘+D to enter Diff — that becomes side A.
Copy the staging export and click Paste on the B toolbar — that becomes side B.
Confirm Sort and Ignore WS are active on both toolbars (blue).
Scan for red/green lines. No highlights? The exports are equivalent for compare purposes.
Still noisy from indentation? Click Format on A and B.
See a difference in a list of items? Turn Sort OFF — if it disappears when you turn Sort back on, only order differed; if it stays, content or structure really changed.

Why do Sort or Ignore WS change what I see in the diff?

Those options rebuild the view from your source text: Sort reorders elements; Ignore WS normalises whitespace in text nodes and tells the diff engine to ignore leading/trailing spaces on each line. Your stored source is kept separately so toggling options updates the display without losing the original unless you edit the diff pane itself.

Do comments survive diff normalization?

When Sort or Ignore WS is on, the file is parsed with DOMParser and comments are not preserved in the diff view. For comment-sensitive compares, turn both off on that side — Format/Minify still work on the raw text.

Which XPath version is supported?

XPath 1.0 (browser document.evaluate). Unprefixed names match local element names; the sample catalog avoids a default namespace so paths like /catalog/book/title work as expected.

What transform outputs are available?

JSON, YAML, CSV, Markdown, and HTML table. Pick a target in Transform mode and click Convert. Conversion uses the browser DOM — very large documents may take a moment.

Other tools

JSON Editor Pro JSON Formatter JSON Diff YAML Diff JSON to CSV JSON to YAML JSON to TOON XML Editor Pro XML Formatter XML Diff & Compare Validate XML XPath Studio XSLT Playground XML to JSON XML to YAML XML to CSV XML to Markdown XML to HTML table Free Image Tools