# Single Page Application API

With a Single Page Application you can export multiple artboards to one page. Using the application API you can switch pages.

{% hint style="info" %}
When an artboard or artboards are exported to a web page they become a view. That is the term we use to describe the artboard on the web page.
{% endhint %}

The documentation is a work in progress. 

#### Settings using CSS Variables 

In a Single Page Application the CSS in the root tag has the list of artboard views and options for that page:

```
:root {
    --web-view-ids: Cats,Whiskers,Mittens,Snowball,Ending;
    --web-view-name: Cats;
    --web-view-id: Cats;
    --web-scale-to-fit: false;
    --web-scale-to-fit-type: default;
    --web-enable-scale-up: false;
    --web-scale-on-resize: false;
    --web-show-scale-controls: false;
    --web-scale-on-double-click: false;
    --web-center-horizontally: false;
    --web-center-vertically: false;
    --web-actual-size-on-double-click: false;
    --web-navigate-on-keypress: false;
    --web-refresh-for-changes: false;
    --web-add-image-compare: false;
    --web-application: true;
    --web-show-navigation-controls: false;
    --web-enable-deep-linking: true;
}
```

When the page loads it looks for media queries that contains a rule with an ID that matches the name of the artboard:

```
@media (min-width: 0px) {
    #Cats {
        width: 960px;
        height: 630px;
        background-color: rgba(247,247,247,1);
        overflow: hidden;
        margin: 0;
        padding: 0;
        --web-view-name: Cats;
        --web-view-id: Cats;
        --web-center-horizontally: true;
        --web-application: true;
        --web-enable-deep-linking: true;
    }
}
```

When the page loads it shows the view defined in the root selector. This is usually the first artboard.

{% hint style="info" %}
The order the artboards are displayed are based on their position in the layers panel. To reorder the artboards reorder the artboard layers. 
{% endhint %}

You can show different views by using the `goToState()` method.

```
application.goToState("Cats");
```

To get a list of views use the `getViewIds()`:

```
application.getViewIds();
```

To get a reference to a view use `getViewById()`:

```
var view = application.getViewById("Whiskers")
```

To show a view (without hiding the others) use:

```
var view = application.getViewById("Whiskers")
application.showView(view);
```

The views contains a dictionary of the view name and element:

```
var views = application.views;
var view = views["Cats"];
```

To hide all views use the hideViews() method:

```
application.hideViews();
```

To get the current or selected view use getVisibleView():

```
var view = self.getVisibleView();
```

When you change views a `viewChange` event is dispatched.

```
window.addEventListener(self.NAVIGATION_CHANGE, myViewChangeHandler);
```

When the application is ready an `applicationComplete` event is dispatched:

```
window.dispatchEvent(new Event(self.APPLICATION_COMPLETE));
```

To update the URL fragment use the updateURL() method;

```
 var view = application.getViewById("Cats");
 application.updateURL(view);
```

Or use the `syncronizeViewToURL()` to load the view that is in the URL fragment:

```
 application.syncronizeViewToURL();
```

You can go to the next or previous view using the `nextView()` and `previousView()` methods. The views are ordered in the --web-view-ids CSS variable:

```
application.nextView();
application.previousView();
```

You may be able to add your own views or nest states via media queries. 

You can use the `showStateFunction(view, state)`to choose if a view should be shown or hidden. This is called when the URL changes. 

```
application.showStateFunction = function (view, state) {
    return true; // show state or view
}
```

{% hint style="info" %}
If there is an API you'd like added or framework feature contact support. 
{% endhint %}


---

# 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/single-page-application-api.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.