# Export the Artboard After you have a project opened you need to export it. Exporting creates the HTML, CSS and JavaScript that are the basic building blocks of a web page. Web Export exports these resources to the folder you select. There are multiple export types: * Exporting an artboard to a single page (this page) * Exporting multiple artboards to multiple pages [go](https://velara-3.gitbook.io/web-export/export-types/export-multiple-artboards) * Exporting artboards to a single page [go](https://velara-3.gitbook.io/web-export/export-types/export-to-a-single-page) * Exporting artboards to a slideshow [go](https://velara-3.gitbook.io/web-export/export-types/slideshow) * Exporting artboards show by size [go](https://velara-3.gitbook.io/web-export/export-types/media-query) #### Exporting a single artboard This page describes how to export a single artboard and includes some videos. The videos only show the process. The page has more detailed information. Export a single artboard in **basic** view video: {% embed url="" %} Export a single artboard in **advanced** view video: {% embed url="" %} #### Exporting an Artboard To export a single artboard to a single page select the artboard you would like to export ![](https://lh5.googleusercontent.com/K1XLCzdMF0S4qwOARZpluTc8ANjiJv25ZWgu2rVfzPreH2pLNmL2riKxtMKwjiUR1d4BbYUhyk-3EFulppd_X2xWvktPYt3LQzuzFQkkfVknqLJDbhdK7qQo6Nz7mViyx9XjsqkU) * Go to the Plugins menu and choose Web Export > Export Artboard\ ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmKoLqX3V4pkfuoIEbq%2F-LmKsJiTWsvoK3vQIwmK%2Fimage.png?alt=media\&token=50fdf52a-8aea-4b57-96de-e7da837225f0) This will open the Export Artboard dialog. Initially the basic export screen is shown. ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LrKeeMcPYnmT-kr9coW%2F-LrKewUp7ev-PizxYefx%2Fimage.png?alt=media\&token=0e4f3fcd-e067-414a-a6c0-3ae8f1220052) Click the Export button. You will be prompted to select a folder. Select the folder and click export. For now, click on the **Advanced** link button to switch it into advanced mode. ![Export Artboard dialog](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LrKeeMcPYnmT-kr9coW%2F-LrKfQYGc057s25IFLe8%2Fimage.png?alt=media\&token=ab654809-8c65-46be-8e65-abbc128d27f4) To export an artboard you need to set the folder to export to. On the basic screen pressing any of the images or pressing the Export button will prompt you to select the export folder. ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LrKeeMcPYnmT-kr9coW%2F-LrKfwuepJFc4IzA8fXs%2Fimage.png?alt=media\&token=1f63ea2a-a54a-48d7-b959-e15d9c0d917b) On the advanced screen clicking on the folder icon will prompt you to select the export folder. ![Export folder field](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmKoLqX3V4pkfuoIEbq%2F-LmKt70EaxmOlOFL09ut%2Fimage.png?alt=media\&token=1cb0a46d-a395-4ea7-a70f-46efc96da63c) ![Export folder icon](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQ48mc-n2Nj_8QaPNh%2F-LmQ6Q89osQSpFvLNTN7%2Fimage.png?alt=media\&token=31e6455c-8c5d-47e9-9424-a54e9334d884) You can also press the Enter key to browse for a folder. When the folder dialog appears select the folder to export to. ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQ48mc-n2Nj_8QaPNh%2F-LmQ6cTqhMrm8kaBpgA0%2Fimage.png?alt=media\&token=1df89f1c-7f45-415d-8352-7e595b954c8f) When you've selected a folder you'll see it's path in the Export Folder field ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQ48mc-n2Nj_8QaPNh%2F-LmQ6zQDjngeHchiFa2p%2Fimage.png?alt=media\&token=8a8c1049-c85f-425d-b5f7-eccee555e30c) {% hint style="info" %} Due to existing limitations you must select the folder each session even if you have selected in the past. A session is created when you open an existing project or create a new project. If you reload the plugin you will have to select the folder. {% endhint %} After you select a folder to export to click the Export button in the lower right hand (or press enter). This will start the export process. ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmKoLqX3V4pkfuoIEbq%2F-LmKu6afN0QNDugwyYaw%2Fimage.png?alt=media\&token=0027f37b-01f3-4ebc-9681-140d7afbd642) Since everything always goes as expected the first time your page will now be created with no issues whatsoever! ;) Ok not really. Exporting is the first step. We still have to **verify** that the export was successful. We can verify it by checking the export notes and viewing it in the browser. Check the folder that we exported to and you should see the page and any associated resources there. ![Exported page in the file system](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmKoLqX3V4pkfuoIEbq%2F-LmKvX5WKqUYfNHxLXPZ%2Fimage.png?alt=media\&token=514a58e6-73f0-471f-8ba3-88554852e3cd) After you export new icons will appear in the dialog and a list of messages will be available to give us more information. ![Messages and links in Basic Screen](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LrKeeMcPYnmT-kr9coW%2F-LrKhVHb8HCAWPB823T3%2Fimage.png?alt=media\&token=445d4165-6140-43d8-a8af-3f8b407c67d7) ![Messages and links in advanced screen](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LrKeeMcPYnmT-kr9coW%2F-LrKheNYUkATlSiimEvu%2Fimage.png?alt=media\&token=5c6b0b62-2914-4a76-b1a5-867c09ab5d26) ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LrKeeMcPYnmT-kr9coW%2F-LrKhlUpKxhALU8OnRlj%2Fimage.png?alt=media\&token=5a49974d-eea8-435e-87d6-01ea58885018) The **Messages** link button will open a view that shows any messages, warnings or problems during export. Pay attention to these. Click the Messages link button to see this information. ![Export Messages](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmKoLqX3V4pkfuoIEbq%2F-LmKugMhS2VXJjulDjUG%2Fimage.png?alt=media\&token=c0a747c8-5b09-49e7-b506-8713fc127e9b) On Mac you can click on the **folder** to open up the folder that you exported to. {% hint style="info" %} The folder button does nothing on Windows at this time due to operating system limitations. {% endhint %} {% hint style="warning" %} The folder button has been removed until it is supported on Windows and OSX but you may see it in previous versions {% endhint %} ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQ48mc-n2Nj_8QaPNh%2F-LmQ9CFHJe6J9lfyUC15%2Fimage.png?alt=media\&token=41c23460-c0b6-4ad8-83dd-dbbed1508c46) ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmKoLqX3V4pkfuoIEbq%2F-LmKvX5WKqUYfNHxLXPZ%2Fimage.png?alt=media\&token=514a58e6-73f0-471f-8ba3-88554852e3cd) It is best to view the exported web page [setting up and using a local server](https://velara-3.gitbook.io/web-export/setting-up-a-server). {% embed url="" %} You do not have to use a local testing server but the page may not load correctly in the browser if you don't. If you use a server you can enter the name in the [server field](https://velara-3.gitbook.io/web-export/export-artboard-dialog/server) and a **server** button will appear after export. ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-M9II_VOCyUp5WT0mtp5%2F-M9IJOUqIcgGFCZ9zgwI%2Fimage.png?alt=media\&token=4199370b-45b1-442b-a3ea-fe9e3cb13416) ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-M9II_VOCyUp5WT0mtp5%2F-M9IJrBYMrUi-ARRREhM%2Fimage.png?alt=media\&token=06e796fc-0e18-4796-b67c-3415567e0bc1) It will create a link that you can click as a shortcut to open the exported page. The URL it creates is simply the Server field value and the name of the page. For example, if you put a server as, "'" and the page name is "myPage.html" the link will be "". Be sure verify the server is running using the [Check Server](https://velara-3.gitbook.io/web-export/export-artboard-dialog/server) button and you may need to put the end slash "/" at the end. ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-M9IGSKqg3_h1GVL0kOJ%2F-M9IIT-75bzIB35Ouk-2%2Fimage.png?alt=media\&token=5489be8c-504b-4b97-a14a-72dfab479456) When you click on it it will open your default browser. You can verify the Server by pressing the server button. ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQ48mc-n2Nj_8QaPNh%2F-LmQ9gV7gyb-Z_Q-J_sk%2Fimage.png?alt=media\&token=ce90e0c7-e779-4968-9721-88c2d9bc4de7) ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQFhpe3gpJdsSMz6EC%2F-LmQG3TfzONFNusNXCxT%2Fimage.png?alt=media\&token=15dac6aa-f957-4673-a139-448da674b7f3) The **url** button opens up the HTML page in the browser using a file protocol: ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQ48mc-n2Nj_8QaPNh%2F-LmQ9jPupjZLm8JDVn23%2Fimage.png?alt=media\&token=5ed032ac-2139-4496-9eb1-e3230ab210d6) ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQFhpe3gpJdsSMz6EC%2F-LmQFxx2QQC50KBXYIwU%2Fimage.png?alt=media\&token=d6362691-9895-49d8-82bd-637494ff1cf6) {% hint style="info" %} Due to limitations on Windows an alternative remote link is created. {% endhint %} {% hint style="warning" %} Due to recent changes the URL opens to the alternative remote link {% endhint %} The **url** button on Windows opens up a remote page that has a button to copy the link to the page. ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmKoLqX3V4pkfuoIEbq%2F-LmKx8wJFDS-qxp563I1%2Fimage.png?alt=media\&token=833da11e-7e75-41d5-8198-b11710c886c1) Click the "clipboard" text button to copy the file reference to the clipboard and then paste it into the url bar and hit enter. It will load the page using the **file://** protocol. ![Copies the url to the clipboard](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQ48mc-n2Nj_8QaPNh%2F-LmQA5fko9ER5D0vjgyi%2Fimage.png?alt=media\&token=caecd08f-1bef-4ebe-9cde-e1cf055c3262) You must have JavaScript enabled for the page to work. You can also use the Copy URL link button in the dialog. The Copy URL button also appears after export. Use this button to copy the url to the clipboard. Then open your browser and paste the url into the location bar and hit enter. ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQFhpe3gpJdsSMz6EC%2F-LmQGNxyfzJ6kqKQAQUX%2Fimage.png?alt=media\&token=edf0b53c-87d7-4efc-832d-b0ebbe1bfcf5) ![](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQ48mc-n2Nj_8QaPNh%2F-LmQASHekYQyfXfrHvHD%2Fimage.png?alt=media\&token=4daf2eac-076e-45d2-b16d-3db361b1d807) Using any of the methods above you will be able to view your page in the browser: ![Page in the browser](https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-LmQFhpe3gpJdsSMz6EC%2F-LmQGaN8cn1z50qTmmo2%2Fimage.png?alt=media\&token=0d29656a-9998-401e-b207-ba4353c79d4b) Some features in Adobe XD do not translate completely to web. Some of these issues you can disregard. Some need to be addressed. The export **Messages** will attempt to notify you of potential issues and we will address these issues in the next section. For some features to work the page must be running on a local or production server or have JavaScript enabled. #### Testing in the Browser I recommend using [Firefox](https://www.mozilla.org/en-US/firefox/new/) for testing pages from the file protocol (file://) or [Brave](https://brave.com) for testing from localhost ( or ; You can create web pages and test them without a server but eventually you may want use something like [XAMPP](https://en.wikipedia.org/wiki/XAMPP) to install a [web server](https://en.wikipedia.org/wiki/Web_server) locally. *A **web server** is* [*server software*](https://en.wikipedia.org/wiki/Server_software) *whose primary function is to store, process and deliver* [*web pages*](https://en.wikipedia.org/wiki/Web_page) *to* [*clients*](https://en.wikipedia.org/wiki/Client_\(computing\))*.*[*\[1\]*](https://en.wikipedia.org/wiki/Web_server#cite_note-1) *Pages delivered are most frequently* [*HTML documents*](https://en.wikipedia.org/wiki/HTML)*, which may include* [*images*](https://en.wikipedia.org/wiki/Image)*,* [*style sheets*](https://en.wikipedia.org/wiki/Style_sheet_\(web_development\)) *and* [*scripts*](https://en.wikipedia.org/wiki/JavaScript) *in addition to the text content.* You can continue this tutorial without a server but some features may or may not work. In cases where a feature may not work it will be documented.