{"_id":"@hygraph/live-preview-sdk","_rev":"26-d33ebbda544c6a906b24f0b904ce7d62","name":"@hygraph/live-preview-sdk","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@hygraph/live-preview-sdk","version":"1.0.0","_id":"@hygraph/live-preview-sdk@1.0.0","maintainers":[{"name":"bryanlrobinson","email":"bryan@codecontemporary.com"},{"name":"mirko-hygraph","email":"mirko@hygraph.com"},{"name":"ozgur.uysal","email":"ozgur.uysal@hygraph.com"},{"name":"bikappa","email":"luca.bianconi@hygraph.com"},{"name":"rajatsharma","email":"lunasunkaiser@gmail.com"},{"name":"jpedroschmitz","email":"jpedroschmitz@hotmail.com"},{"name":"mahaveergcms","email":"mahaveer@hygraph.com"},{"name":"danielhygraph","email":"daniel@hygraph.com"},{"name":"graphcms-owner","email":"services@hygraph.com"}],"dist":{"shasum":"2ea48053df3f794c5441897a6bc4a86b02ddefef","tarball":"https://registry.npmjs.org/@hygraph/live-preview-sdk/-/live-preview-sdk-1.0.0.tgz","fileCount":14,"integrity":"sha512-ONYBvI59C1xYZwukw+h7jJH5aFZWs3C9iYbXGAweb76iljwbiPLbqcj+EYTmQSn8Qded+/hgGhkhWfhx/LqVvQ==","signatures":[{"sig":"MEQCIH6eAqymqoMYeti+qjzJZoDFXAFp7/O1IohaulVOgPeEAiBNncfxP5oMhZXJ0W9VeQIkGKibmSJf18vF5x9pihKthw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28428},"main":"dist/live-preview-sdk.umd.js","type":"module","types":"dist/index.d.ts","module":"dist/live-preview-sdk.es.js","exports":{".":{"import":"./dist/live-preview-sdk.es.js","require":"./dist/live-preview-sdk.umd.js"}},"gitHead":"4a931b7bcaf1762f59d362ee56d71290cfa5de3c","scripts":{"dev":"vite","build":"vite build"},"_npmUser":{"name":"graphcms-owner","email":"services@hygraph.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"10.2.3","description":"A library for integrating Hygraph live preview into your frontend applications.","directories":{},"_nodeVersion":"20.10.0","publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.5","react":"^18.3.1","typescript":"^5.4.5","@types/react":"^18.3.5","vite-plugin-dts":"^4.2.1"},"_npmOperationalInternal":{"tmp":"tmp/live-preview-sdk_1.0.0_1726812719863_0.6433754741555175","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@hygraph/live-preview-sdk","version":"1.0.1","_id":"@hygraph/live-preview-sdk@1.0.1","maintainers":[{"name":"bryanlrobinson","email":"bryan@codecontemporary.com"},{"name":"mirko-hygraph","email":"mirko@hygraph.com"},{"name":"ozgur.uysal","email":"ozgur.uysal@hygraph.com"},{"name":"bikappa","email":"luca.bianconi@hygraph.com"},{"name":"rajatsharma","email":"lunasunkaiser@gmail.com"},{"name":"jpedroschmitz","email":"jpedroschmitz@hotmail.com"},{"name":"mahaveergcms","email":"mahaveer@hygraph.com"},{"name":"danielhygraph","email":"daniel@hygraph.com"},{"name":"graphcms-owner","email":"services@hygraph.com"}],"dist":{"shasum":"f164a2d986670f2963a472758af54aad53dd52b5","tarball":"https://registry.npmjs.org/@hygraph/live-preview-sdk/-/live-preview-sdk-1.0.1.tgz","fileCount":14,"integrity":"sha512-rv6l21uwLfACe35XrwSDQIO91446Q66bTbUyRd3g7CrybURr8zy2YV+kaL3o1oZpBUwdlRMD3lHu+EYqPOAUHw==","signatures":[{"sig":"MEUCIQC/n9R2vWTFEmGndyjhuSEv0/8fPltbL/TJCN+VOrgnQAIgE0tt5+uQTb9PBAEYSn/F0HkvjLUQSxrw0uPjN/a6d1M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":28464},"main":"dist/live-preview-sdk.umd.js","type":"module","types":"dist/index.d.ts","module":"dist/live-preview-sdk.es.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/live-preview-sdk.es.js","require":"./dist/live-preview-sdk.umd.js"}},"gitHead":"4a931b7bcaf1762f59d362ee56d71290cfa5de3c","scripts":{"dev":"vite","build":"vite build"},"_npmUser":{"name":"graphcms-owner","email":"services@hygraph.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"10.2.3","description":"A library for integrating Hygraph live preview into your frontend applications.","directories":{},"_nodeVersion":"20.10.0","publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.5","react":"^18.3.1","typescript":"^5.4.5","@types/react":"^18.3.5","vite-plugin-dts":"^4.2.1"},"_npmOperationalInternal":{"tmp":"tmp/live-preview-sdk_1.0.1_1726815360275_0.19941382980337252","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@hygraph/live-preview-sdk","version":"1.0.2","_id":"@hygraph/live-preview-sdk@1.0.2","maintainers":[{"name":"bryanlrobinson","email":"bryan@codecontemporary.com"},{"name":"mirko-hygraph","email":"mirko@hygraph.com"},{"name":"ozgur.uysal","email":"ozgur.uysal@hygraph.com"},{"name":"bikappa","email":"luca.bianconi@hygraph.com"},{"name":"rajatsharma","email":"lunasunkaiser@gmail.com"},{"name":"jpedroschmitz","email":"jpedroschmitz@hotmail.com"},{"name":"mahaveergcms","email":"mahaveer@hygraph.com"},{"name":"danielhygraph","email":"daniel@hygraph.com"},{"name":"graphcms-owner","email":"services@hygraph.com"}],"dist":{"shasum":"f424fc5b9a261c36182dda5594e65e45d19e059f","tarball":"https://registry.npmjs.org/@hygraph/live-preview-sdk/-/live-preview-sdk-1.0.2.tgz","fileCount":12,"integrity":"sha512-sGnANukOTy7FtJG9rJjIFuTC08vZFK94qx+wrrmbncqPqM3FaZ+LAfRzNFO0lTnsYH6RMMsTHXDFI6yo5Ex1Bg==","signatures":[{"sig":"MEYCIQCzNrsfYI8ZL4TFy6NaoovoidEnakQwRejKLv3NG8jtNwIhALXzlEDS376JZ1rWdwp764Md+WdwI04lo+l+ScsVJeBM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":21644},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./react":{"types":"./dist/react/index.d.ts","import":"./dist/react/index.js","require":"./dist/react/index.cjs"}},"gitHead":"7313f803e7779d9ca70c7c4f5998b5033855a42a","scripts":{"dev":"vite","build":"vite build"},"_npmUser":{"name":"graphcms-owner","email":"services@hygraph.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"10.2.3","description":"A library for integrating Hygraph live preview into your frontend applications.","directories":{},"_nodeVersion":"20.10.0","publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.5","react":"^18.3.1","typescript":"^5.4.5","@types/react":"^18.3.5","vite-plugin-dts":"^4.2.1"},"_npmOperationalInternal":{"tmp":"tmp/live-preview-sdk_1.0.2_1728646588859_0.4098043563106395","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@hygraph/live-preview-sdk","version":"1.0.3","_id":"@hygraph/live-preview-sdk@1.0.3","maintainers":[{"name":"danielhygraph","email":"daniel@hygraph.com"},{"name":"graphcms-owner","email":"services@hygraph.com"},{"name":"mahaveergcms","email":"mahaveer@hygraph.com"},{"name":"skolz","email":"gabriel.zanzotti@gmail.com"},{"name":"bryanlrobinson","email":"bryan@codecontemporary.com"},{"name":"ozgur.uysal","email":"ozgur.uysal@hygraph.com"},{"name":"mirko-hygraph","email":"mirko@hygraph.com"},{"name":"bikappa","email":"luca.bianconi@hygraph.com"},{"name":"daniiltykheev","email":"daniiltykheev@gmail.com"},{"name":"nvasilev1","email":"n.vasilev.fmi@gmail.com"},{"name":"ownra","email":"own.rahahleh@hygraph.com"}],"dist":{"shasum":"29381768d2d4e797c1461d7f57a1d37d0ce08f89","tarball":"https://registry.npmjs.org/@hygraph/live-preview-sdk/-/live-preview-sdk-1.0.3.tgz","fileCount":12,"integrity":"sha512-sdGITyA30pQ92lz+L2kyTV5NdFy6mFrcya+thkAsyKEJB0yt6ZCGDrrCVeuTRIWRty4HuTvG8DMStfMrVYjHLw==","signatures":[{"sig":"MEUCID9loInFyF6QYCkGthPT/RwqHmB+5ClX9kSrlRMYDCvSAiEAk4ZGO/ckN4T7QIMAIr8CgFjlh0mB5h9/i1Ta1nGFzjo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30627},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./react":{"types":"./dist/react/index.d.ts","import":"./dist/react/index.js","require":"./dist/react/index.cjs"}},"gitHead":"6d4ae7adeddc22d939ea2fbf6f5ee0829a992cc2","scripts":{"dev":"vite","build":"vite build"},"_npmUser":{"name":"danielhygraph","email":"daniel@hygraph.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"10.8.2","description":"A library for integrating Hygraph live preview into your frontend applications.","directories":{},"_nodeVersion":"20.18.0","publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.5","react":"^18.3.1","typescript":"^5.4.5","@types/react":"^18.3.5","vite-plugin-dts":"^4.2.1","rollup-preserve-directives":"^1.1.2"},"_npmOperationalInternal":{"tmp":"tmp/live-preview-sdk_1.0.3_1734619030745_0.46524401862591236","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@hygraph/live-preview-sdk","version":"1.0.4","_id":"@hygraph/live-preview-sdk@1.0.4","maintainers":[{"name":"danielhygraph","email":"daniel@hygraph.com"},{"name":"graphcms-owner","email":"services@hygraph.com"},{"name":"mahaveergcms","email":"mahaveer@hygraph.com"},{"name":"skolz","email":"gabriel.zanzotti@gmail.com"},{"name":"bryanlrobinson","email":"bryan@codecontemporary.com"},{"name":"ozgur.uysal","email":"ozgur.uysal@hygraph.com"},{"name":"mirko-hygraph","email":"mirko@hygraph.com"},{"name":"bikappa","email":"luca.bianconi@hygraph.com"},{"name":"daniiltykheev","email":"daniiltykheev@gmail.com"},{"name":"nvasilev1","email":"n.vasilev.fmi@gmail.com"},{"name":"ownra","email":"own.rahahleh@hygraph.com"}],"dist":{"shasum":"f19af1560a8d45d421634db65dee82c079d50e99","tarball":"https://registry.npmjs.org/@hygraph/live-preview-sdk/-/live-preview-sdk-1.0.4.tgz","fileCount":12,"integrity":"sha512-wgnQbTpAEZGKOzG4lnyCgx5zYF5yVW40yX7YjtMfuRKU36ov82No4LBhHkf6XCwEIWfnKY+3ygKkpD/g/z6ubA==","signatures":[{"sig":"MEYCIQD5QrL5vjgKhfSGOZc5A2QMDWH6LIk6t5Jl0EodYoKb7AIhALuelRdu1DRtokEg3lknhGMFwZigfHEAB6p1vue1WXv6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":30245},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./react":{"types":"./dist/react/index.d.ts","import":"./dist/react/index.js","require":"./dist/react/index.cjs"}},"gitHead":"09c612086ddcf2709a873730e3f4b24c8a053f80","scripts":{"dev":"vite","build":"vite build"},"_npmUser":{"name":"danielhygraph","email":"daniel@hygraph.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","_npmVersion":"10.8.2","description":"**Note: Alpha Version**   This SDK is currently in early alpha. While functional, it may contain bugs and the API might change without notice.","directories":{},"_nodeVersion":"20.18.0","publishConfig":{"access":"restricted"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.4.5","react":"^18.3.1","typescript":"^5.4.5","@types/react":"^18.3.5","vite-plugin-dts":"^4.2.1","rollup-preserve-directives":"^1.1.2"},"_npmOperationalInternal":{"tmp":"tmp/live-preview-sdk_1.0.4_1734698234746_0.4767907297153513","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2024-09-20T06:11:59.700Z","modified":"2026-05-29T14:30:03.891Z","1.0.0":"2024-09-20T06:12:00.057Z","1.0.1":"2024-09-20T06:56:00.473Z","1.0.2":"2024-10-11T11:36:29.086Z","1.0.3":"2024-12-19T14:37:10.908Z","1.0.4":"2024-12-20T12:37:15.012Z"},"description":"**Note: Alpha Version**   This SDK is currently in early alpha. While functional, it may contain bugs and the API might change without notice.","maintainers":[{"email":"daniel@hygraph.com","name":"danielhygraph"},{"email":"services@hygraph.com","name":"graphcms-owner"},{"email":"gabriel.zanzotti@gmail.com","name":"skolz"},{"email":"mirko@hygraph.com","name":"mirko-hygraph"},{"email":"ricardo.costa@hygraph.com","name":"ricardo.costa_hygraph"},{"email":"danijel.vincijanovic@hygraph.com","name":"danijel_vincijanovic"},{"email":"vane.trajkov@hygraph.com","name":"vane.hygraph"},{"email":"alexandre.borrego@hygraph.com","name":"alexandrehygraph"},{"email":"rishabh.sharma@hygraph.com","name":"rishitells-hygraph"},{"email":"vojtech.toman@hygraph.com","name":"hygtoman"},{"email":"jonas@hygraph.com","name":"jonas_hygraph"},{"email":"oladapo@hygraph.com","name":"omonayajo"},{"email":"dino@hygraph.com","name":"dino_hygraph"},{"email":"daniil.tykheev@hygraph.com","name":"dtykheev"},{"email":"fabian@hygraph.com","name":"fblz"}],"readme":"# Hygraph Live Preview SDK\n\n**Note: Alpha Version**  \nThis SDK is currently in early alpha. While functional, it may contain bugs and the API might change without notice.\n\n\nA library for integrating Hygraph live preview into your frontend applications.\n\n## Installation\n\n```bash\nnpm install @hygraph/live-preview-sdk\n```\n\n## Usage\n\n### React\n\nIf you want to use Inspector in a React project, you can use the `HygraphInspector` component. This can be accessed via the `@hygraph/live-preview-sdk/react` package.\n\n```typescript\nimport React from \"react\";\nimport { HygraphInspector } from \"@hygraph/live-preview-sdk/react\";\n\nconst App: React.FC = () => {\n  return (\n    <div>\n      <HygraphInspector endpoint=\"https://api.hygraph.com/my-project/master\">\n        <YourChildComponent />\n      </HygraphInspector>\n    </div>\n  );\n};\n\nexport default App;\n```\n\n### Optional: Accessing Inspector Context\n\nIf you need to access the inspector's state within your components, you can optionally use the `useInspector` hook:\n\n\n```typescript\nimport { useInspector } from \"@hygraph/live-preview-sdk/react\";\n\nconst YourChildComponent: React.FC = () => {\n  const { isInitialized, endpoint } = useInspector();\n  return (\n    <div>\n      Inspector initialized: {isInitialized ? \"Yes\" : \"No\"}, endpoint:{\" \"}\n      {endpoint}\n    </div>\n  );\n};\n```\n\n### Custom Data Attributes\n\nTo build the link between your frontend application and the Hygraph CMS, you need to add the following data attributes to the elements you want to inspect:\n\n```\n\ndata-hygraph-entry-id\ndata-hygraph-field-api-id\ndata-hygraph-entry-locale\n\n```\n\nA simple example of how to add these attributes to an element could look like this:\n\n```html\n<h1\n  data-hygraph-entry-id=\"cm1173r6nbngf07w5kyaxonmb\"\n  data-hygraph-field-api-id=\"title\"\n  data-hygraph-field-locale=\"en-US\"\n>\n  Hello World\n</h1>\n```\n\nFor every element you want to enable inspector mode you must at least add the `data-hygraph-entry-id` attribute. This is the id of the content entry in your project.\n\nThere are two more optional attributes:\n\n`data-hygraph-field-api-id` - This is the API ID of the field you want to inspect. This value is used if you want to focus the field in the CMS content form when you click on the element.\n\n`data-hygraph-entry-locale` - This is the locale of the field you want to inspect. This value is used to focus the correct locale of the field in case it is localized.\n\n### Customizing Styles\n\nYou can customize the appearance of both the inspector overlay and its tooltip by passing style options. The style options can be imported from the SDK:\n\n```typescript\nimport { HygraphInspectorStyleOptions } from \"@hygraph/live-preview-sdk\";\n```\n\nThe style options are divided into two main sections: `overlay` and `tooltip`. Each section has various customizable properties grouped by their purpose:\n\n#### Overlay Options\n\n##### Visual Styles\n- `background`: Background color of the overlay (default: 'transparent')\n- `backgroundOnEnter`: Background color when hovering (default: 'rgba(255, 255, 255, 0.1)')\n- `backgroundOnLeave`: Background color after hover (default: 'transparent')\n- `border`: Border style of the overlay (default: '2px dashed rgba(99, 102, 241, 0.2)')\n- `borderTop`: Top border style (default: 'none')\n- `boxShadow`: Box shadow of the overlay\n- `opacity`: Opacity of the overlay\n\n##### Layout and Positioning\n- `position`: Position of the overlay (default: 'absolute')\n- `top`: Top position (default: '-40px')\n- `left`: Left position (default: '0')\n- `width`: Width of the overlay (default: '100%')\n- `height`: Height of the overlay (default: 'calc(100% + 40px)')\n\n##### Behavior\n- `boxSizing`: Box sizing behavior (default: 'border-box')\n- `pointerEvents`: Pointer events behavior (default: 'auto')\n- `transition`: Transition effects (default: 'all 0.2s ease-in-out')\n\n#### Tooltip Options\n\n##### Position and Layout\n- `position`: Position of the tooltip (default: 'absolute')\n- `top`: Top position (default: '10px')\n- `left`: Left position (default: '10px')\n- `zIndex`: Z-index value (default: '1000')\n- `display`: Display property (default: 'flex')\n- `alignItems`: Alignment of items (default: 'center')\n- `gap`: Gap between items (default: '6px')\n\n##### Visual Styles\n- `background`: Background color (default: 'rgb(99, 102, 241)')\n- `backgroundOnEnter`: Background color on hover (default: 'rgb(99, 102, 241)')\n- `backgroundOnLeave`: Background color after hover (default: 'rgb(99, 102, 241)')\n- `color`: Text color (default: 'white')\n- `border`: Border style (default: 'none')\n- `borderRadius`: Border radius (default: '6px')\n- `boxShadow`: Box shadow (default: '0 2px 4px rgba(0, 0, 0, 0.1)')\n- `opacity`: Opacity (default: '0')\n- `visibility`: Visibility state (default: 'hidden')\n\n##### Typography\n- `fontSize`: Font size (default: '13px')\n- `lineHeight`: Line height (default: '1')\n- `whiteSpace`: White space handling (default: 'nowrap')\n- `fontFamily`: Font family (default: 'system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif')\n- `fontWeight`: Font weight (default: '500')\n\n##### Behavior\n- `cursor`: Cursor style (default: 'pointer')\n- `pointerEvents`: Pointer events behavior (default: 'auto')\n- `transition`: Transition effects (default: 'all 0.2s ease-in-out')\n- `padding`: Padding (default: '8px 12px')\n\nExample usage:\n\n```typescript\nconst styleOptions: HygraphInspectorStyleOptions = {\n  overlay: {\n    background: 'rgba(0, 0, 0, 0.05)',\n    border: '2px dashed blue',\n    backgroundOnEnter: 'rgba(0, 0, 0, 0.1)'\n  },\n  tooltip: {\n    background: '#333',\n    color: '#fff',\n    borderRadius: '8px',\n    fontSize: '14px'\n  }\n};\n\n<HygraphInspector \n  endpoint=\"https://api.hygraph.com/my-project/master\"\n  styleOptions={styleOptions}\n>\n  <YourChildComponent />\n</HygraphInspector>\n```\n\nAll style options are optional and will fall back to their default values if not provided.\n","readmeFilename":"README.md"}