XSLT Visualizer

<xsl:apply-templates mode="#current"/>

<xsl:value-of select="string(.)"/>

    <html>
      <head>
        <xsl:apply-templates select="/doc/heading"/>
      </head>
      <body>
        <xsl:apply-templates select="/doc/para"/>
      </body>
    </html>

    <title>
      <xsl:value-of select="."/>
    </title>

    <p>
      <xsl:apply-templates mode="inline"/>
    </p>

<xsl:apply-templates mode="#current"/>

<xsl:value-of select="string(.)"/>

    <em>
      <xsl:apply-templates mode="#current"/>
    </em>

Drag the slider to inspect the transformation.
Hover over the center column's match patterns (grouped by mode) to see the invoked XSLT.

Cumulative?
Breadth first?

Source:

Ⓓ
<doc>
  <heading>
    This is the title
  </heading>
  <para>
    This is the first paragraph.
  </para>
  <para>
    This is the 
    <emphasis>
      second
    </emphasis>
     paragraph.
  </para>
</doc>

Stylesheet:

#default
- /
- heading
- para
inline
- text()|@*
- emphasis

Result:


▼

<html>
  <head>
    ▼
    
    <title>This is the title</title>
    ▲►<xsl:apply-templates select="/doc/heading"/> (1 of 1)
  </head>
  <body>
    ▼
    
    <p>
      ▼
      This is the first paragraph.
      ▲►<xsl:apply-templates mode="inline/> (1 of 1)
    </p>
    ▲►<xsl:apply-templates select="/doc/para"/> (1 of 2)
    ▼
    
    <p>
      ▼
      This is the 
      ▲►<xsl:apply-templates mode="inline/> (1 of 3)
      ▼
      
      <em>
        ▼
        second
        ▲►<xsl:apply-templates mode="inline/> (1 of 1)
      </em>
      ▲►<xsl:apply-templates mode="inline/> (2 of 3)
      ▼
       paragraph.
      ▲►<xsl:apply-templates mode="inline/> (3 of 3)
    </p>
    ▲►<xsl:apply-templates select="/doc/para"/> (2 of 2)
  </body>
</html>
▲►<xsl:apply-templates select="/"/> (1 of 1)