# How Exporting Works

Exporting takes your artboard and elements and exports it to the web.&#x20;

Each element is translated into a HTML or SVG code counter part.&#x20;

**Artboards** are exported as a div. In the documentation Artboards are referred to as ***views***.&#x20;

**Artboard layers** and **groups** are exported as [HTMLElements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement). HTMLElement is the base class for HTML elements like div, img, span, etc. In the documentation layers and groups are referred to as ***elements***.&#x20;

#### Exported Elements

Layers are converted to the default HTML and CSS at this time. &#x20;

You can add or subtract to the exported HTML and CSS.&#x20;

{% hint style="info" %}
The code you see here is subject to change.&#x20;

The first goal has been to get an accurate representation.&#x20;

The second phase is to improve the code quality from the feedback of the community.&#x20;
{% endhint %}

{% hint style="info" %}
The code you see here is ***able*** to be changed by ***you*** using the tools provided.&#x20;
{% endhint %}

{% hint style="info" %}
Any layer can be exported as an image. Use the [Export as Image](/web-export/element-options/convert-to-image.md) option.&#x20;
{% endhint %}

#### Page template

```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><!--page_title--></title>
    <!--styles_content-->
    <!--scripts-->
</head>
<body>
    <!--application_content-->
</body>
</html>
```

#### Artboard

```
<body>
	<div id="Home_Page">...</div>
</body>
```

#### Artboards

```
<body>
	<div id="Home">...</div>
	<div id="Products">...</div>
	<div id="Services">...</div>
	<div id="About">...</div>
	<div id="Contact">...</div>
</body>
```

#### Group

```
<div id="Group_76">
	...
</div>
```

#### Text&#x20;

```
<div id="My_summer_vacation">
	<span>My summer vacation</span>
</div>
```

#### Rectangle

```
<svg class="Rectangle_452">
	<rect id="Rectangle_452" fill="rgba(209,17,17,1)" rx="0" ry="0" x="0" y="0" width="624" height="16">
	</rect>
</svg>
```

#### Ellipse

```
<svg class="Ellipse_1">
	<ellipse id="Ellipse_1" fill="rgba(99,214,103,1)" stroke="rgba(34,44,65,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" rx="42.5" ry="42.5" cx="42.5" cy="42.5">
	</ellipse>
</svg>
```

#### Line

```
<svg class="Line_86" viewBox="0 0 574.5 1">
	<path fill="transparent" stroke="rgba(112,112,112,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Line_86" d="M 0 0 L 574.5 0">
	</path>
</svg>
```

#### Path

```
<svg class="Path_1" viewBox="0 34.487 85 50.513">
	<path fill="rgba(99,214,103,1)" stroke="rgba(34,44,65,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Path_1" d="M 42.5 54.592529296875 C 65.97209930419922 54.592529296875 85 19.02790069580078 85 42.5 C 85 65.97209930419922 65.97209930419922 85 42.5 85 C 19.02790069580078 85 0 65.97209930419922 0 42.5 C 0 19.02790069580078 19.02790069580078 54.592529296875 42.5 54.592529296875 Z">
	</path>
</svg>
```

#### Polygon

```
<svg class="Polygon_1" viewBox="0 0 127 110">
	<path fill="rgba(99,214,103,1)" stroke="rgba(74,153,195,1)" stroke-width="1px" stroke-linejoin="miter" stroke-linecap="butt" stroke-miterlimit="4" shape-rendering="auto" id="Polygon_1" d="M 95.25 0 L 127 55 L 95.25 110 L 31.74999618530273 110 L 0 54.99999618530273 L 31.75000762939453 0 Z">
	</path>
</svg>
```

#### Image

```
<img id="Group_1" src="Group_1.png" srcset="Group_1.png 1x, Group_1@2x.png 2x">
```

{% hint style="info" %}
If you are new to web development or want a well rounded review read [Getting Started with the Web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web).&#x20;
{% endhint %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img>" %}

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://velara-3.gitbook.io/web-export/how-exporting-works.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
