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:

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:

<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.

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

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

The name of the variable is the name or id of the element.

Example Project

xd-examples/web-export/examples/export-as-string at master · velara3/xd-examplesGitHub