# inline Demos
## Basic Inline Grid Display
Parses sprite grid and displays tokens with column alignment.
<div class="demo-source">
```jsonl
{"type": "palette", "name": "character", "colors": {"{_}": "#00000000", "{skin}": "#FFD599", "{hair}": "#8B4513", "{eye}": "#2244AA", "{shirt}": "#CC3333"}}
{"type": "sprite", "name": "face", "palette": "character", "grid": ["{_}{hair}{hair}{hair}{_}", "{hair}{skin}{skin}{skin}{hair}", "{skin}{eye}{skin}{eye}{skin}", "{skin}{skin}{skin}{skin}{skin}", "{_}{skin}{shirt}{skin}{_}"]}
```
</div>
<div class="demo-container" data-demo="basic">
</div>
## Token Names Preserved
Full token names are preserved in inline display (not aliased).
<div class="demo-source">
```jsonl
{"type": "palette", "name": "character", "colors": {"{_}": "#00000000", "{skin}": "#FFD599", "{hair}": "#8B4513", "{eye}": "#2244AA", "{shirt}": "#CC3333"}}
{"type": "sprite", "name": "face", "palette": "character", "grid": ["{_}{hair}{hair}{hair}{_}", "{hair}{skin}{skin}{skin}{hair}", "{skin}{eye}{skin}{eye}{skin}", "{skin}{skin}{skin}{skin}{skin}", "{_}{skin}{shirt}{skin}{_}"]}
```
</div>
<div class="demo-container" data-demo="token_preservation">
</div>