> For the complete documentation index, see [llms.txt](https://velara-3.gitbook.io/web-export/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://velara-3.gitbook.io/web-export/element-options/export-as-string.md).

# Export as String

Export an element markup into a variable

When this option is checked the HTML markup that would be exported is wrapped in quotes inside of a script block and assigned to a JavaScript variable. 

For example, let's say you have a Rectangle: 

![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-MDXXYYVlZrwKebklO8t%2F-MDXYO_4XPrL53hmTl89%2Fimage.png?alt=media\&token=6fe4bada-3a52-4337-b118-0210301599ce)

if you export a Rectangle this is the code that is exported: 

```
<svg class="Rectangle_1">
		<rect id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="56" height="56">
		</rect>
</svg>
```

If you enable the **Export as String** option this is the code that is exported:&#x20;

```
<script type="text/javascript">
	var Rectangle_1 = `
	<svg class="Rectangle_1">
		<rect id="Rectangle_1" rx="0" ry="0" x="0" y="0" width="56" height="56">
		</rect>
	</svg>
`;
</script>
```

The rectangle will not be shown on the page but the page will contain a variable that contains that code. The CSS of the rectangle is still defined in the stylesheet.&#x20;

This comes in handy when you have an unknown number of items in a list, repeat grid or in a grid layout.&#x20;

Having access to the HTML markup of an item in JavaScript allows you to create more copies of it.&#x20;

The name of the variable is the name or [id](/web-export/element-options/id-field.md) of the element.&#x20;

#### Example Project

{% embed url="<https://github.com/velara3/xd-examples/tree/master/web-export/examples/export-as-string>" %}