{"_id":"@cairncms/extension-live-preview","name":"@cairncms/extension-live-preview","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@cairncms/extension-live-preview","version":"0.1.0","type":"module","description":"Preview items on your site in a split pane beside the item editor","repository":{"type":"git","url":"git+https://github.com/CairnCMS/extensions.git","directory":"packages/live-preview"},"license":"GPL-3.0-only","author":{"name":"The CairnCMS Authors"},"cairncms:extension":{"type":"item-view","path":"dist/index.js","source":"src/index.js","host":"^1.3.0","settings":{"preview_url":{"type":"string","scope":"collection","appReadable":true,"presentation":{"interface":"system-display-template"}}}},"devDependencies":{"@cairncms/extensions-sdk":"^1.3.0","vue":"3.5.38"},"scripts":{"build":"cairncms-extension build","test":"node --test test/*.test.mjs"},"_id":"@cairncms/extension-live-preview@0.1.0","bugs":{"url":"https://github.com/CairnCMS/extensions/issues"},"homepage":"https://github.com/CairnCMS/extensions#readme","_integrity":"sha512-d3gnlo6p9QKfWcS8jjLtbiX4rCkE/a/ayCVfVKo9LfWhfhx1l8ha28g1g8JVZH2HhxsNtPwu5/LhSk0Vr4pvMg==","_resolved":"/tmp/b80f509415767fa0b267b82f3bfd377d/cairncms-extension-live-preview-0.1.0.tgz","_from":"file:cairncms-extension-live-preview-0.1.0.tgz","_nodeVersion":"22.22.2","_npmVersion":"10.9.7","dist":{"integrity":"sha512-d3gnlo6p9QKfWcS8jjLtbiX4rCkE/a/ayCVfVKo9LfWhfhx1l8ha28g1g8JVZH2HhxsNtPwu5/LhSk0Vr4pvMg==","shasum":"264b8eff77905b034bc0c39d238e5bfe1aace7bf","tarball":"https://registry.npmjs.org/@cairncms/extension-live-preview/-/extension-live-preview-0.1.0.tgz","fileCount":5,"unpackedSize":51511,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCID+lUaHluKkCNY3KJ/dLbKO73jj19gOCZjKAq5mbGf1wAiEA5/MC/LT3oBNOt6/Ea5CTs9u3sUfq4GaF5rpMy+xXBpI="}]},"_npmUser":{"name":"cairncms-dev","email":"hello@cairncms.dev"},"directories":{},"maintainers":[{"name":"cairncms-dev","email":"hello@cairncms.dev"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/extension-live-preview_0.1.0_1783900319250_0.8027979578234401"},"_hasShrinkwrap":false}},"time":{"created":"2026-07-12T23:51:58.994Z","0.1.0":"2026-07-12T23:51:59.409Z","modified":"2026-07-12T23:51:59.704Z"},"maintainers":[{"name":"cairncms-dev","email":"hello@cairncms.dev"}],"description":"Preview items on your site in a split pane beside the item editor","homepage":"https://github.com/CairnCMS/extensions#readme","repository":{"type":"git","url":"git+https://github.com/CairnCMS/extensions.git","directory":"packages/live-preview"},"author":{"name":"The CairnCMS Authors"},"bugs":{"url":"https://github.com/CairnCMS/extensions/issues"},"license":"GPL-3.0-only","readme":"# Live Preview\n\nLive Preview renders your site's page for the item being edited in a resizable pane beside the item editor. You configure a preview URL per collection, and the pane reloads the page every time the item is saved.\n\nUse this when your content has a public or staged frontend and editors want to see the rendered result without leaving CairnCMS.\n\n## Requirements\n\n- CairnCMS 1.3.0 or later.\n- A frontend that renders a page for the items you want to preview. The page must be reachable from the editor's browser. Previewing drafts requires a frontend that can render draft content without putting credentials in the Preview URL.\n- Admin access to CairnCMS for the one-time configuration.\n\n## Installation\n\nCairnCMS discovers the extension either from the project's `extensions` folder or from its `node_modules`. Pick the method that fits your deployment. After any of them, restart CairnCMS and check that Settings > Extensions shows a Live Preview row with a Normal health indicator.\n\n### Into the extensions folder\n\nFits the default Docker project from `cairncms init`, which mounts `./extensions` into the container, and any other deployment with a writable extensions folder. Download the published package and unpack it into the folder the loader reads:\n\n```bash\ncd <cairncms-project-folder>\nnpm pack @cairncms/extension-live-preview\nmkdir -p extensions/cairncms-extension-live-preview\ntar -xzf cairncms-extension-live-preview-*.tgz -C extensions/cairncms-extension-live-preview --strip-components=1\nrm cairncms-extension-live-preview-*.tgz\ndocker compose restart cairncms\n```\n\n### As an npm dependency\n\nFits deployments where you control the CairnCMS project folder and its `node_modules`: an instance running directly on a host, or a platform build step that installs npm packages before starting the instance.\n\n```bash\ncd <cairncms-project-folder>\nnpm install @cairncms/extension-live-preview\n```\n\nThe loader auto-discovers the package from `node_modules` at startup.\n\n### In a custom Docker image\n\nFits image-based deployments without writable mounts. Unpack the package into the image's extensions folder at build time:\n\n```dockerfile\nFROM node:22-alpine AS extensions\nWORKDIR /ext\nRUN npm pack @cairncms/extension-live-preview && \\\n\tmkdir -p live-preview && \\\n\ttar -xzf cairncms-extension-live-preview-*.tgz -C live-preview --strip-components=1\n\nFROM cairncms/cairncms:1.3.0\nCOPY --from=extensions --chown=node:node /ext/live-preview /cairncms/extensions/cairncms-extension-live-preview\n```\n\nBuild the image and deploy as usual. In a production Dockerfile, pin an exact version, for example `@cairncms/extension-live-preview@0.1.0`, so image rebuilds stay reproducible.\n\n## Allow the preview origin\n\nBrowsers block the preview frame unless the CairnCMS content security policy allows your frontend's origin. Set the `frame-src` directive in the deployment environment:\n\n```\nCONTENT_SECURITY_POLICY_DIRECTIVES__FRAME_SRC=\"array:'self',blob:,https://preview.example.com\"\n```\n\nKeep `'self'` and `blob:` in the list. Setting `frame-src` replaces the browser's fallback to the default directives, so a list without them breaks other framed content in the app.\n\n## Configure a preview URL\n\n1. Open Settings > Data Model and select a collection.\n2. In the Extension Settings section below the fields list, find the Live Preview group.\n3. Set Preview URL to the page that renders an item of this collection, interpolating item fields with `{{ field }}`:\n\n```\nhttps://preview.example.com/articles/{{slug}}\n```\n\nDot paths reach related values, for example `{{author.slug}}`. Save with the collection page's save button.\n\nOnly the path, query, and fragment may interpolate fields. Write the scheme and host literally. A template that interpolates into the host is rejected and the preview stays unavailable for the collection.\n\nThe Preview URL is not a secret. CairnCMS delivers it to the browser of every user who can open items in the collection, and the pane displays it. Never put access tokens or other credentials in it. If your frontend needs credentials to render drafts, keep them server side, for example a session cookie or a token held by the preview server.\n\nThe pane does not treat draft or archived items differently. It renders the page for the item's saved state whatever its status, and your frontend decides what that page shows. If the frontend needs to branch on workflow state, interpolate the field, for example `https://preview.example.com/articles/{{slug}}?status={{status}}`.\n\n## Use the pane\n\nOpen an item in a configured collection. A Live Preview toggle appears on the item page. The pane shows the rendered page with controls to refresh, open the page in a new tab, resize the viewport to fixed dimensions, and zoom. Saving the item reloads the page.\n\n## Behavior and limits\n\n- The preview renders saved values. Unsaved edits do not appear until you save.\n- A new item has no preview until its first save. The toggle appears once the item exists.\n- Fields referenced in the preview URL are read as the signed-in user. A field the user cannot read renders as an empty value in the address.\n- Missing or null fields render as empty values, not errors.\n- Interpolated values are URL-encoded, and the rendered address must stay on the template's origin.\n- The preview frame is sandboxed and sends no referrer to the preview site.\n\n## License\n\nGPL-3.0-only.\n","readmeFilename":"README.md","_rev":"1-31ef90f7ac45bfa5ff20a8ab10ceb810"}