# Export to a Single Page

It's not uncommon to have multiple artboards for mobile, tablet and desktop. 

The Export multiple pages a single page option provides a way to have multiple artboards on a single page and either programmatically, or with navigation buttons or through media queries show the desired artboard. 

The term single-page application is used often. Simply: 

> A **single-page application** (**SPA**) is a [web application](https://en.wikipedia.org/wiki/Web_application) or [web site](https://en.wikipedia.org/wiki/Web_site) that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. This approach avoids interruption of the [user experience](https://en.wikipedia.org/wiki/User_experience) between successive pages, making the application behave more like a [desktop application](https://en.wikipedia.org/wiki/Desktop_application).

The term Progressive Web App is also used often. 

> **Progressive web applications** (**PWAs**) are a type of [application software](https://en.wikipedia.org/wiki/Application_software) delivered through the web, built using common web technologies including [HTML](https://en.wikipedia.org/wiki/HTML), [CSS](https://en.wikipedia.org/wiki/Cascading_Style_Sheets) and [JavaScript](https://en.wikipedia.org/wiki/JavaScript). 
>
> They are intended to work on any platform that uses a standards-compliant [browser](https://en.wikipedia.org/wiki/Web_browser). 
>
> Functionality includes working offline, [push notifications](https://en.wikipedia.org/wiki/Push_technology), and device hardware access, enabling creating user experiences similar to native applications on desktop and mobile devices. 
>
> Since they are a type of [webpage](https://en.wikipedia.org/wiki/Webpage) or [website](https://en.wikipedia.org/wiki/Website) known as a [web application](https://en.wikipedia.org/wiki/Web_applications), there is no requirement for developers or users to install the web apps via digital distribution systems like [Apple App Store](https://en.wikipedia.org/wiki/App_Store_\(iOS\)) or [Google Play](https://en.wikipedia.org/wiki/Google_Play).

With Single Page Applications you have 3 options: 

* **Normal** - All of the artboards are exported to the same page and the first artboard is shown. Use prototype links to show another artboard or use the [Single Page API](/web-export/single-page-application-api.md) code to change artboards.
* **Slideshow** - This is same as above but navigation buttons are shown to go from one artboard to the next. Keyboard arrow keys can also be used to go forward or back through the artboards. 
* **Media Query** - Create artboards of different sizes and then when you export them the artboard will show depending on the size of the browser or your device.

{% hint style="info" %}
When an artboard is exported to a web page it becomes a view. That is the term we use to describe the artboard in the web page.
{% endhint %}

The following demonstrates a **Normal** export of the[ Dashboard UI Kit ](https://www.adobe.com/products/xd/resources.html#panel-3)to a single page application. It uses existing prototype links to navigate between views. 

{% embed url="<https://youtu.be/q2yqDS1HbkI>" %}

The following demonstrates exporting the [Crowdfund Companion UI Kit](https://www.adobe.com/products/xd/resources.html#panel-3) to a single page application. It uses existing prototype links to navigate between views.&#x20;

{% embed url="<https://youtu.be/jw1ETxqte_s>" %}

The following demonstrates exporting the[ Dashboard UI Kit ](https://www.adobe.com/products/xd/resources.html#panel-3)to a **slideshow**. It uses existing prototype links to navigate between views and provides a forward and back buttons that go from one artboard to another.&#x20;

{% embed url="<https://www.youtube.com/watch?v=4R2i_ipb84M>" %}

{% hint style="info" %}
The order of artboards is the same order that is in the layers panel.&#x20;
{% endhint %}

{% hint style="info" %}
Use the keyboard support option to navigate through the artboards with the left and right arrow keys.
{% endhint %}

{% hint style="info" %}
&#x20;Animations and transitions are not supported at this time. Visit the forums to get the most information.&#x20;
{% endhint %}

{% embed url="<https://en.wikipedia.org/wiki/Single_page_application>" %}

{% embed url="<https://en.wikipedia.org/wiki/Progressive_web_app>" %}


---

# 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/export-types/export-to-a-single-page.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.