> For the complete documentation index, see [llms.txt](https://docs.merlinchain.io/brc-420/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.merlinchain.io/brc-420/brc-420-metaverse-standard/1.1-2d-inscription/1.1.1-2d-preview-template.md).

# 1.1.1   2D Preview Template

This is the display template for 2D Inscriptions engraving. This template serves as a sample reference that can be directly used. You can also modify its source code for customization, or write a new template according to your needs and upload it to the blockchain.

{% hint style="info" %}
The on-chain inscription script for this template is

```html
5d1bc794cc8a7e2c0c1b104f5c10f5319b68796ac57eba02fe39b10761334192i0
```

You can view its related [source code](https://ordinals.com/content/5a24d6d8d12794e88d2c76e321081939295ad73add3820834757b7914a34acfai0) or directly reference it. Related rules are described below.
{% endhint %}

## Example:

We will use the last animation resource of 2D Inscriptions as an example to provide a detailed explanation of the attributes of this 2D Preview Template:

<div><figure><img src="/files/xfMvJBP4Pxl8OshHCzos" alt=""><figcaption></figcaption></figure> <figure><img src="/files/i5GjAYVCuj0VIxufNRPC" alt=""><figcaption></figcaption></figure></div>

```xml
<metaverse 
	name="CuteDoge"
	description="This is a cute dog with animation, you can use it anywhere"
	src = "/content/4acc4304ab4b62855ad8540c4effd6f70410ce3gg50e7886109ad985dc2ba2642"
	srctype="PNG"
	issheetanimate="true"
	sheetlayout="[8,5]"
>
	<animate name="idle-down" range="[0, 0]" duration="0.9" />
    	<animate name="idle-up" range="[1, 1]" duration="0.9" />
    	<animate name="idle-right" range="[2, 2]" duration="0.9" />
	<animate name="idle-left" range="[3, 3]" duration="0.9" />
	<animate name="move-right" range="[8, 15]" duration="0.9" />
    	<animate name="move-up" range="[16, 23]" duration="0.9" />
    	<animate name="move-down" range="[24, 31]" duration="0.9" />
	<animate name="move-left" range="[32, 39]" duration="0.9" />
</metaverse>

<metaversepreview
	backgroundcolor="0b9db7"
	>
	<previewimg 
		src="/content/4acc4304ab4b62855ad8540c4effd6f70410ce3gg50e7886109ad985dc2ba2642"
		issheetanimate="true"
		sheetlayout="[8,5]"
		sheetindex="14"
	/>
	<previewimg 
		src="/content/6f7c28ce0f87f498ab4be1dc4e498c206b85a2646285609fd4392i0178090cf70d"
	/>
	<previewimg 
		src="/content/2c777cc0756d5bb198153cdde9f00c779edi0ef0594ffa692ec18c4e5522a40c12"
		size="[1,1]"
		position="[0.5,0.25]"
	/>
	<previewimg 
		src="/content/1d98ab4bc17826462e8786f7c28806b5609fd4392i0090cf70df45ace0f4e498c2"
		size="[0.4,0.4]"
		position="[0.8,0.8]"
		rotation="-30"
	/>
</metaversepreview>
<script  src="/content/5a24d6d8d12794e88d2c76e321081939295ad73add3820834757b7914a34acfai0"></script>
```

Preview display-related attributes are included within the \<metaversepreview> block of attributes. Single basic attributes are written between \<metaversepreview and >, separated by spaces or line breaks.

&#x20;

Multiple repeated attributes (recursive image overlays) are written between \<metaversepreview ... > and \</metaversepreview>. Each recursively overlaid image is drawn on the display image in sequence, with later images overlaying earlier ones specified in previewimg.

&#x20;

### Single Basic Attributes:

<table><thead><tr><th width="237">key</th><th width="116.33333333333331">required?</th><th>description</th></tr></thead><tbody><tr><td>backgroundcolor</td><td>No</td><td>Background color, the default is "ffffff" for pure white.</td></tr><tr><td>any other keys you want</td><td>No</td><td>If you are using your own template script, you can define any keys you need that are referenced in your script.</td></tr></tbody></table>

### Multiple Attributes previewimg :

{% hint style="info" %}
The image resources used in these examples have not actually been placed on the blockchain, the listed addresses are fictitious. Please manually upload any recursive image resources you need for referencing.
{% endhint %}

{% hint style="danger" %}
In this template, when there is no 'previewimg' property, the display template will automatically fetch the original image for display based on the [**metaverse** ](/brc-420/brc-420-metaverse-standard.md#metaverse)configuration. When 'previewimg' exists, <mark style="color:red;">**the default image will not be used**</mark>, and developers need to manually insert the original image into 'previewimg' following the recursive order.
{% endhint %}

Here, we use other three on-chain resource images as the recursively overlaid images for preview display. They are as follows:

<figure><img src="/files/1sAShTEqC45B4qsd1FJH" alt=""><figcaption><p>6f7c28ce0f87f498ab4be1dc4e498c206b85a2646285609fd4392i0178090cf70d</p></figcaption></figure>

<figure><img src="/files/rDZIe1kTow2gXu8dGV67" alt=""><figcaption><p>2c777cc0756d5bb198153cdde9f00c779edi0ef0594ffa692ec18c4e5522a40c12</p></figcaption></figure>

<figure><img src="/files/lF1zQHafbCMNBwLqElPB" alt="" width="200"><figcaption><p>1d98ab4bc17826462e8786f7c28806b5609fd4392i0090cf70df45ace0f4e498c2</p></figcaption></figure>

The attributes for recursive images are written between , separated by spaces or line breaks.

<table><thead><tr><th width="168.33333333333331">key</th><th width="131">required?</th><th>description</th></tr></thead><tbody><tr><td>src</td><td>Yes</td><td>The on-chain address of the recursive image</td></tr><tr><td>size</td><td>No</td><td>The scaling size of the recursive image, default is [1,1]</td></tr><tr><td>position</td><td>No</td><td>The default position of the recursive image, default is [0.5,0.5]</td></tr><tr><td>rotation</td><td>No</td><td>The default rotation of the recursive image, value range is 0-360, default is 0</td></tr><tr><td>isatlas</td><td>No</td><td>Whether it is an image atlas</td></tr><tr><td>atlasrange</td><td>No</td><td>This attribute marks a specific area in the image atlas, [x,y,z,w]. x,y: are the pixel coordinates for the beginning of the area being referenced; z,w: are the dimensions of the area. See the atlas attribute key in <a href="/pages/QyPZvpfLw1kdIgKp1GNV#atlas-image-resource">2D Res Inscriptions</a> for details</td></tr><tr><td>issheet</td><td>No</td><td>Whether it is an evenly divided image atlas (sheet)</td></tr><tr><td>sheetlayout</td><td>No</td><td>The horizontal and vertical tiling divisions of the sheet [x,y], x: number of horizontal divisions, y: number of vertical divisions</td></tr><tr><td>sheetindex</td><td>No</td><td>The display image index number in the sheet image atlas</td></tr></tbody></table>