> ## Documentation Index
> Fetch the complete documentation index at: https://docs-loja.usecorvex.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Preview Contract

> Como o preview funciona no Editor e na loja — canvas, rascunho e storefront.

Preview é a visualização do tema com o rascunho (draft) ou valores padrão **antes** ou **durante** a edição.

***

## Onde o lojista vê o preview

| Ambiente | Quem usa | Edição no canvas | Fonte dos dados |
| - | - | - | - |
| **Canvas do Editor** | Lojista no builder | Sim — seleção e edição inline | Estado atual + bundle do tema |
| **Pré-visualizar** | Lojista | Não | Rascunho que o editor acabou de salvar |
| **URL de draft** | Quem tem acesso | Não | Rascunho já persistido |

***

## Ao editar um setting

Quando o lojista altera um campo no inspector:

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
Campo alterado no inspector
  → valor atualizado em settings da section
  → O canvas re-renderiza a section
```

Implemente sections como funções React que leem `settings` — não guarde cache manual que pode ficar desatualizado.

***

## Props no preview

No canvas e na aba Preview fiel, a section recebe as mesmas props documentadas em [Section Contract](https://docs-loja.usecorvex.com.br/reference/contracts/section.md):

* `settings`
* `data` (quando declarado)
* `isEditing` / `onSettingsChange` (quando edição inline está ativa)

***

## Salvar e pré-visualizar

O canvas lê o estado aberto no editor. A ação **Pré-visualizar** chama o salvamento silencioso da página antes de abrir a aba. Se esse salvamento falha, a aba não abre. Se a página salva e os estilos do tema não, a aba abre com o aviso de que os estilos podem estar desatualizados.

Uma URL de rascunho aberta por fora desse botão lê o que já está no servidor. Alteração só no canvas, sem salvar e sem clicar em Pré-visualizar, não entra nessa URL.

Este comportamento foi lido em `TopBar.jsx` (`handlePreview`). Não foi clicado no editor.

***

## Depois de mudar o código do tema

```text theme={"theme":{"light":"github-light","dark":"github-dark"}}
Editar section.jsx ou schema.json
  → corvex build
  → corvex sync (ou fluxo do Editor de código)
  → recarregar o tema no Editor
```

O preview ao vivo **não** substitui rebuild após mudança no código fonte.

***

## Edição inline (opcional)

Se o tema usa `@corvex/runtime` (`InlineText`, `SectionChrome`):

* O lojista pode editar texto direto no canvas quando `isEditing === true`
* O campo precisa existir em `schema.settings` (`text`, `textarea`, `richtext`)

Sem isso, a edição ocorre só no inspector.

***

## Blocks no preview

Sections com `blocks.json` permitem adicionar e reordenar blocks no Editor. Na aba Preview fiel, os blocks renderizam conforme a instância salva (`blocks` + `block_order`).

***

## O que evitar

* Depender de `postMessage` entre iframe e tema — não é contrato público.
* Aplicar classes ou CSS `--editor` no storefront publicado ou na aba Preview fiel.
* Assumir que o preview é idêntico à loja publicada — rascunho ≠ publicado.

***

## Veja também

* [Section Contract](https://docs-loja.usecorvex.com.br/reference/contracts/section.md)
* [Publish Contract](https://docs-loja.usecorvex.com.br/reference/contracts/publish.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.