Appearance
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.
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 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.
