XML contract
Overview + local generator
The same XML bundle drives the rendered card, the local WebGPU generator, and the live XPath query tools.
Canonical source
XML payload
The full XML bundle includes the card data, presentation instructions, and embedded SVG assets. CSS and SVG stay collapsed by default.
CSS + SVG collapsed
<?xml version="1.0" encoding="UTF-8"?>
<pokemonCard id="base1-58" schemaVersion="1.0">
<meta>
<name>Pikachu</name>
<purpose>Queryable XML card playground</purpose>
<note>One XML bundle powers rendering, styling, local generation, and querying.</note>
</meta>
<data>
<pokemon>
<artist>Mitsuhiro Arita</artist>
<attacks>
<convertedEnergyCost>1</convertedEnergyCost>
<cost>Colorless</cost>
<damage>10</damage>
<name>Gnaw</name>
<text></text>
</attacks>
<attacks>
<convertedEnergyCost>2</convertedEnergyCost>
<cost>Lightning</cost>
<cost>Colorless</cost>
<damage>30</damage>
<name>Thunder Jolt</name>
<text>Flip a coin. If tails, Pikachu does 10 damage to itself.</text>
</attacks>
<convertedRetreatCost>1</convertedRetreatCost>
<evolvesFrom/>
<flavorText>When several of these Pokémon gather, their electricity can cause lightning storms.</flavorText>
<hp>40</hp>
<id>base1-58</id>
<images>
<large>https://images.pokemontcg.io/base1/58_hires.png</large>
<small>https://images.pokemontcg.io/base1/58.png</small>
</images>
<pokedexData>
<category>Mouse Pokémon</category>
<length>1' 4"</length>
<weight>13 lbs.</weight>
</pokedexData>
<legalities>
<unlimited>Legal</unlimited>
</legalities>
<level>12</level>
<name>Pikachu</name>
<nationalPokedexNumbers>25</nationalPokedexNumbers>
<number>58</number>
<rarity>Common</rarity>
<resistances/>
<retreatCost>Colorless</retreatCost>
<rules/>
<set>
<id>base1</id>
<images>
<logo>https://images.pokemontcg.io/base1/logo.png</logo>
<symbol>https://images.pokemontcg.io/base1/symbol.png</symbol>
</images>
<legalities>
<unlimited>Legal</unlimited>
</legalities>
<name>Base Set</name>
<printedTotal>102</printedTotal>
<ptcgoCode>BS</ptcgoCode>
<releaseDate>1999/01/09</releaseDate>
<series>Base</series>
<total>102</total>
<updatedAt>2022/10/10 15:12:00</updatedAt>
</set>
<subtypes>Basic</subtypes>
<supertype>Pokémon</supertype>
<types>Lightning</types>
<weaknesses>
<type>Fighting</type>
</weaknesses>
</pokemon>
</data>
<presentation>
<xslt><![CDATA[
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="UTF-8" omit-xml-declaration="yes" />
<xsl:template match="/pokemon">
<article class="pokemon">
<div class="pokemon__frame">
<div class="pokemon__body">
<div class="pokemon__header">
<div class="pokemon__subtypes">
<xsl:value-of select="subtypes" />
</div>
<div class="pokemon__identity">
<h1 class="pokemon__name"><xsl:value-of select="name" /></h1>
<div class="pokemon__hp">
<span class="hp__value"><xsl:value-of select="hp" /></span>
<span class="hp__label">HP</span>
</div>
</div>
</div>
<div class="pokemon__images">
<div class="images__large">
<img class="images__large-img" src="{images/large}" alt="{name}" />
</div>
</div>
<div class="pokemon__evolvesFrom">
<span class="pokemon__evolvesFrom-text">
<xsl:if test="evolvesFrom">Evolves from <xsl:value-of select="evolvesFrom" /></xsl:if>
</span>
<span class="pokemon__evolvesFrom-details">
<span class="pokemon__pokedexData-category"><xsl:value-of select="pokedexData/category" /></span>,
<span class="pokemon__pokedexData-length">Length: <xsl:value-of select="pokedexData/length" /></span>,
<span class="pokemon__pokedexData-weight">Weight: <xsl:value-of select="pokedexData/weight" /></span>
</span>
<span class="pokemon__level">LV.<xsl:value-of select="level" /></span>
</div>
<div class="pokemon__attacks">
<xsl:for-each select="attacks">
<div class="pokemon__attacks__item">
<div class="attack__cost">
<xsl:value-of select="cost" />
</div>
<div class="attack__info">
<div class="attack__line attack__line--text">
<div class="attack__main-text">
<span class="attack__name"><xsl:value-of select="name" /></span>
<span class="attack__text"><xsl:value-of select="text" /></span>
</div>
<span class="attack__damage"><xsl:value-of select="damage" /></span>
</div>
</div>
</div>
</xsl:for-each>
</div>
<div class="pokemon__spacer"></div>
<div class="pokemon__defenses">
<div class="pokemon__weaknesses defense">
<div class="defense__label">weakness</div>
<div class="defense__value"><span data-icon="fighting"></span></div>
</div>
<div class="pokemon__resistances defense">
<div class="defense__label">resistance</div>
<div class="defense__value"><xsl:value-of select="resistances/type" /> <xsl:value-of select="resistances/value" /></div>
</div>
<div class="pokemon__retreatCost defense">
<div class="defense__label">retreat cost</div>
<div class="defense__value"><xsl:value-of select="retreatCost" /></div>
</div>
</div>
<div class="pokemon__flavorText"><xsl:value-of select="flavorText" /></div>
<div class="pokemon__footer">
<span class="artist">Illus. <xsl:value-of select="artist" /></span>
<span class="copyright">©1995, 96, 98, 99 Nintendo, Creatures, GAMEFREAK. ©1999 Wizards.</span>
<span class="number"><xsl:value-of select="number" />/<xsl:value-of select="set/total" /></span>
</div>
</div>
</div>
</article>
</xsl:template>
</xsl:stylesheet>
]]></xslt>
<css><![CDATA[CSS hidden by default. Expand it to see it.]]></css>
</presentation>
<renderMap>
<root html-tag="div" html-class="pokemon theme-base-set" data-layout="standard" data-format-version="1" data-theme="base-set">
<block html-class="pokemon__frame">
<block html-class="pokemon__body">
<block html-class="pokemon__header">
<field xml-path="subtypes" html-tag="span" html-class="pokemon__subtypes" />
<block html-class="pokemon__identity">
<field xml-path="name" html-tag="h1" html-class="pokemon__name" />
<block html-class="pokemon__hp">
<field xml-path="hp" html-tag="span" html-class="hp__value" />
<literal html-tag="span" html-class="hp__label">HP</literal>
</block>
</block>
</block>
<block html-class="pokemon__images">
<block html-class="images__large">
<field xml-path="images/large" html-tag="img" html-class="images__large-img" html-attr="src" />
</block>
</block>
<block html-class="pokemon__evolvesFrom">
<field xml-path="evolvesFrom" html-tag="span" html-class="pokemon__evolvesFrom-text" />
<block html-class="pokemon__evolvesFrom-details">
<field xml-path="pokedexData/category" html-tag="span" html-class="pokemon__pokedexData-category" />
<literal html-tag="span">, Length: </literal>
<field xml-path="pokedexData/length" html-tag="span" html-class="pokemon__pokedexData-length" />
<literal html-tag="span">, Weight: </literal>
<field xml-path="pokedexData/weight" html-tag="span" html-class="pokemon__pokedexData-weight" />
</block>
<field xml-path="level" html-tag="span" html-class="pokemon__level" />
</block>
<list xml-path="attacks" html-class="pokemon__attacks__item">
<block html-class="attack__cost">
<field xml-path="cost" icon-set="lightning,colorless" />
</block>
<block html-class="attack__info">
<block html-class="attack__line attack__line--text">
<block html-class="attack__main-text">
<field xml-path="name" html-tag="span" html-class="attack__name" />
<field xml-path="text" html-tag="span" html-class="attack__text" />
</block>
<field xml-path="damage" html-tag="span" html-class="attack__damage" />
</block>
</block>
</list>
<block html-class="pokemon__spacer" />
<block html-class="pokemon__defenses">
<block html-class="defense pokemon__weaknesses">
<literal html-tag="div" html-class="defense__label">weakness</literal>
<block html-class="defense__value">
<field xml-path="weaknesses/type" html-tag="span" icon-set="fighting" />
</block>
</block>
<block html-class="defense pokemon__resistances">
<literal html-tag="div" html-class="defense__label">resistance</literal>
<block html-class="defense__value">
<field xml-path="resistances/type" html-tag="span" />
<field xml-path="resistances/value" html-tag="span" />
</block>
</block>
<block html-class="defense pokemon__retreatCost">
<literal html-tag="div" html-class="defense__label">retreat cost</literal>
<block html-class="defense__value">
<field xml-path="retreatCost" icon-set="colorless" />
</block>
</block>
</block>
<field xml-path="flavorText" html-tag="div" html-class="pokemon__flavorText" />
<footer html-class="pokemon__footer">
<field xml-path="artist" html-tag="span" html-class="artist" prefix="Illus. " />
<literal html-tag="span" html-class="copyright">©1995, 96, 98, 99 Nintendo, Creatures, GAMEFREAK. ©1999 Wizards.</literal>
<block html-class="number">
<field xml-path="number" html-tag="span" />
<literal html-tag="span">/</literal>
<field xml-path="set/total" html-tag="span" />
</block>
</footer>
</block>
</block>
</root>
</renderMap>
<icons>
<type name="lightning">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">[svg hidden by default]</svg>
</type>
<type name="fighting">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">[svg hidden by default]</svg>
</type>
<type name="colorless">
<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">[svg hidden by default]</svg>
</type>
</icons>
</pokemonCard>XPath / XQuery
Query XML
The query UI posts the same XML bundle and lets you inspect it live.
Query navigator
6 sections