---
title: "Autosave & Persistence"
description: "Store draft copies of a page on your own backend at a fixed interval, so users can restore an earlier version from inside the editor."
url: https://docs.topol.io/landing-page-editor/guide/autosave.html
---

# Autosave & Persistence

**Autosaves write a draft copy of the current page to your backend at a fixed interval,** so an interrupted session can be restored from the editor's Autosaves panel.

Autosaving is off until enabled, and every draft travels through your own API endpoint, which keeps the stored history on your infrastructure.

## Enabling autosaves

Add the following setting to the configuration:

```typescript
{
  enableAutosaves: true;
}
```

Without it, saving happens only when triggered manually (or by an external integration).

## Setting the autosave frequency

The `autosaveInterval` option controls how often a draft is written. The value is in **seconds**, and the default is 60 seconds when the option is omitted.

```typescript
{
  enableAutosaves: true,
  autosaveInterval: 60 * 3  // Autosave every 3 minutes
}
```

Values below 30 are silently raised to 30 seconds. **A request is only sent when the page has unsaved changes**, so an idle editor produces no autosave traffic at all. Most projects use 30 to 60 seconds; higher values reduce backend load, lower values shorten the window of work that can be lost.

## How autosave works

The editor checks on a fixed interval (`autosaveInterval`) and saves whenever unsaved changes are present at that moment; **editing does not restart the timer**. When an autosave fires, the editor posts the template JSON to your `AUTOSAVES` endpoint. This is independent of the manual save flow: no HTML is rendered and the `onSave` callback is not triggered.

While a request is in flight, the editor shows a saving indicator; a failed request raises an error notification. There is no automatic retry, but the next interval tick tries again because the page is still marked as unsaved.

Autosaves are listed in the editor's Autosaves panel, where the user can manually restore any snapshot. **The editor does not restore autosaves automatically on reopen.**

## API integration for autosaves

Autosaves need three routes under the single `AUTOSAVES` base URL: list, create, and detail. These let the editor save, retrieve, and list drafts for a specific template and user.

> **INFO**
>
> Unlike the conversations endpoints, autosave responses are **not** wrapped in a `success`/`data` envelope; the editor parses the response body directly.

> **WARNING**
>
> Before implementing the endpoints, check [how to work with API endpoints](https://docs.topol.io/landing-page-editor/guide/api.html).

### List Autosaves

Called to fetch a list of all autosaved drafts for the current template/user.

-   URL: `/{API.AUTOSAVES}`
-   Method: `GET`
-   Params: `key`, `hostname`, `templateId`, `uuid`

**Response** (a bare JSON array, no envelope):

```json
[
  {
    "uid": "userID",
    "key": "autosaveKey",
    "time": "2025-05-01T12:00:00Z",
    "created_by": {
      "user_id": 0,
      "name": "John Doe",
      "profile_photo_url": "https://example.com/profile.jpg"
    }
  }
]
```

`key` and `time` are **required on every entry**: if either is missing, the whole listing fails to parse and the Autosaves panel stays empty. `uid` and `created_by` are optional; without `created_by` the editor shows only the timestamp. `time` has to be a string that `new Date()` accepts, since entries are grouped by day.

### Create Autosave

Called by the editor when a new autosave is created. Store the template JSON, the creation time, the user ID, and a unique autosave identifier; the same data is returned when an autosave is retrieved.

-   URL: `/{API.AUTOSAVES}`
-   Method: `POST`

**Request:**

```json
{
  "definition": { "tagName": "mj-global-style", "children": ["..."] },
  "key": "api key value",
  "hostname": "origin",
  "templateId": "id of the template",
  "uuid": "userId",
  "current_user_id": "id of the current user"
}
```

`definition` is the template JSON as an **object, not a serialized string**. `current_user_id` is only sent when the [`currentUser`](https://docs.topol.io/landing-page-editor/guide/user-management.html) option is configured. The body contains the template JSON only; no HTML is rendered or sent during autosave.

**Response:**

HTTP `200 OK`

### Get a Specific Autosave

Called to retrieve a previously saved autosave by its unique key. The editor automatically appends `/{autosave-key}` to the `AUTOSAVES` base URL.

-   URL: `/{API.AUTOSAVES}/{autosave-key}`
-   Method: `GET`
-   Params: `key`, `hostname`, `templateId`, `uuid`

**Response** (no envelope; `definition` is the template JSON as an object, not a string):

```json
{
  "key": "autosaveKey",
  "time": "2025-05-01T12:00:00Z",
  "uid": "userID",
  "created_by": {
    "user_id": 0,
    "name": "John Doe",
    "profile_photo_url": "https://example.com/profile.jpg"
  },
  "definition": {}
}
```

## Troubleshooting

When autosave does not trigger, confirm `enableAutosaves: true` is set, then check the browser's developer tools for failed requests: connectivity problems, blocked requests, CORS errors, and invalid authorization are the usual causes.