# Resume, Preview, and Debug



## Resume [#resume]

The first save returns a `resumeToken` alongside the `responseId` (on the `saved` event and in `state()`). Persist the pair and pass it back later:

```js
form.on("saved", ({ responseId, resumeToken }) =>
  localStorage.setItem("surface-resume", JSON.stringify({ responseId, resumeToken }))
);

// On a later visit:
const stored = JSON.parse(localStorage.getItem("surface-resume") ?? "null");
const form = await SurfaceForms.init({
  ...options,
  ...(stored && { resume: stored }),
});
```

Boot fetches the stored answers and seeds the engine: writes become updates (no duplicate response), earlier answers land in `state().answers` for prefilling, and stored `meta.custom` values carry forward.

A failed fetch (wrong token, deleted response) warns and starts a fresh session. The token proves the caller obtained the response ID legitimately; never build resume links from IDs alone. Resume is ignored in preview mode.

## Preview mode [#preview-mode]

```js
SurfaceForms.init({ ...options, preview: true, previewToken: "..." });
```

Blocks every network write: identify, responses, events, journey, enrichment, tracking. The scheduler books synthetically and email validation resolves synthetic valid verdicts, so the whole flow is walkable offline.

`previewToken` comes from the `create_form` or `get_sdk_binding_map` reply; with it, a never-published form serves its draft configuration.

<Warning>
  Remove `preview: true` before deploying. It is the most common cause of "no responses at all": the page works perfectly and writes nothing.
</Warning>

## Debug mode [#debug-mode]

```js
SurfaceForms.init({ ...options, debug: true });
```

Development only. Logs every captured answer, lifecycle event, and navigation intent (a `next requested from step ...` line per call), audits answers against the record, and warns on states the server would reject and on inert configuration.

In production, two diagnostics remain: `form.state()` (current step, answers, `responseId`, `finished`) and `form.capabilities` (`{ enrichment, emailValidation, tracking }`).