{"_id":"@community-sdks/unlayer-ts","_rev":"3-79393965080abb9ec7285f9fbf3be286","name":"@community-sdks/unlayer-ts","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@community-sdks/unlayer-ts","version":"0.1.0","keywords":["unlayer","email-editor","template-editor"],"license":"MIT","_id":"@community-sdks/unlayer-ts@0.1.0","maintainers":[{"name":"zpmlabs","email":"zpmlabs.com@gmail.com"}],"dist":{"shasum":"afe627a8ef8e08adced7b412f714ba0002411b1e","tarball":"https://registry.npmjs.org/@community-sdks/unlayer-ts/-/unlayer-ts-0.1.0.tgz","fileCount":6,"integrity":"sha512-YQZc4IqtEF564hzk8wzdIdQkuDywmGllUuT105OCYzNOwRboTU3WsNmw7ELdlpTy2jKNqnIYcFcvfMddEhgakg==","signatures":[{"sig":"MEYCIQC/EjBkcgTF6lTYTny780w0cIcLtBSJMuUuvih7ZXIafgIhAPMI/t/ZQQ/CVP2Sx5y7swlJb7W+coStdjjpYKouunKK","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23986},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"0e693f757cc1e9b448b406d4026b803638f8a058","scripts":{"build":"tsup src/index.ts --format esm,cjs --dts","typecheck":"tsc --noEmit"},"_npmUser":{"name":"zpmlabs","email":"zpmlabs.com@gmail.com"},"_npmVersion":"10.9.2","description":"Framework-free TypeScript wrapper for the Unlayer editor.","directories":{},"_nodeVersion":"23.6.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","typescript":"^5.7.2"},"_npmOperationalInternal":{"tmp":"tmp/unlayer-ts_0.1.0_1777652358860_0.30685987950079574","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@community-sdks/unlayer-ts","version":"0.1.1","keywords":["unlayer","email-editor","template-editor"],"license":"MIT","_id":"@community-sdks/unlayer-ts@0.1.1","maintainers":[{"name":"zpmlabs","email":"zpmlabs.com@gmail.com"}],"dist":{"shasum":"cb40396878bbaf040e8cb8024ba21197176a54e8","tarball":"https://registry.npmjs.org/@community-sdks/unlayer-ts/-/unlayer-ts-0.1.1.tgz","fileCount":6,"integrity":"sha512-jNRZ1Ucy94zbgnOKNi1RxaySYZWWL9kiUHxWTMZwV9/gY5G8VqTY7FXuw6WkMvd9JqKyyrd1FKSOoqTuIufgNw==","signatures":[{"sig":"MEUCIHByUbEJFdwKRwK1lC7NzEnbzNOCLP9j+eGtN0yqQSCTAiEAqmkKRkJh7NfYwO7YVnrBk0RBho1CyP5bLyAwCmmsVEo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":53970},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"c940c559873313a5f177375570a35af41763dd59","scripts":{"build":"tsup src/index.ts --format esm,cjs --dts","typecheck":"tsc --noEmit"},"_npmUser":{"name":"zpmlabs","email":"zpmlabs.com@gmail.com"},"_npmVersion":"10.9.2","description":"Framework-free TypeScript wrapper for the Unlayer editor.","directories":{},"_nodeVersion":"23.6.0","_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","typescript":"^5.7.2"},"_npmOperationalInternal":{"tmp":"tmp/unlayer-ts_0.1.1_1777729867951_0.42978526856780985","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@community-sdks/unlayer-ts","version":"0.1.2","description":"Framework-free TypeScript wrapper for the Unlayer editor.","type":"module","main":"dist/index.cjs","module":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsup src/index.ts --format esm,cjs --dts","examples:serve":"node scripts/serve-examples.mjs","typecheck":"tsc --noEmit"},"devDependencies":{"tsup":"^8.3.5","typescript":"^5.7.2"},"keywords":["unlayer","email-editor","template-editor"],"license":"MIT","_id":"@community-sdks/unlayer-ts@0.1.2","gitHead":"1addc659b42762de2d8191e13c5518c992248524","_nodeVersion":"23.6.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-djZpMFehsSuSD1B2fikeOzsZVbK3/qi7kcfmG0GOjJmreaFIJ6lksnwJP7K+YqgIJzBDY+LbYXxUKfbuaj0ZfQ==","shasum":"f68715bbcd2f5e1364bbbdcc98cad7e61e0f23d2","tarball":"https://registry.npmjs.org/@community-sdks/unlayer-ts/-/unlayer-ts-0.1.2.tgz","fileCount":6,"unpackedSize":55835,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGcvELle1xDHdyD51clHgnWI11US608AWBq+ht9lVKX9AiEAr5RosdhP8I1R9PAF6MeQqnif2oNlz2yEgLKuCLRtHv4="}]},"_npmUser":{"name":"zpmlabs","email":"zpmlabs.com@gmail.com"},"directories":{},"maintainers":[{"name":"zpmlabs","email":"zpmlabs.com@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/unlayer-ts_0.1.2_1777738967450_0.8871493656876974"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-01T16:19:18.770Z","modified":"2026-05-02T16:22:47.752Z","0.1.0":"2026-05-01T16:19:19.035Z","0.1.1":"2026-05-02T13:51:08.083Z","0.1.2":"2026-05-02T16:22:47.616Z"},"license":"MIT","keywords":["unlayer","email-editor","template-editor"],"description":"Framework-free TypeScript wrapper for the Unlayer editor.","maintainers":[{"name":"zpmlabs","email":"zpmlabs.com@gmail.com"}],"readme":"# Unofficial Unlayer TypeScript SDK\n\nFramework-free TypeScript wrapper for the Unlayer editor.\n\n## Development\n\nBuild the package:\n\n```bash\nnpm run build\n```\n\nServe the local examples:\n\n```bash\nnpm run examples:serve\n```\n\nThen open one of these pages in the browser:\n\n```txt\nhttp://127.0.0.1:4173/examples/basic.html\nhttp://127.0.0.1:4173/examples/http-template-client.html\n```\n\nDo not open the example files with `file://`. Browser module imports from the local filesystem are blocked and the examples are designed to run over HTTP.\n\n## Getting Started\n\n```bash\nnpm install @community-sdks/unlayer-ts\n```\n\n## Usage\n\n```ts\nimport UnlayerEditor, { HttpTemplateClient } from '@community-sdks/unlayer-ts'\n\nconst templateClient = new HttpTemplateClient({\n    searchUrl: '/templates',\n    loadUrl: '/templates/:slug',\n})\n\nconst editor = new UnlayerEditor({\n    id: 'editor',\n    displayMode: 'email',\n    templateClient,\n    state: {\n        html: '',\n        design: {},\n    },\n    uploadImage: async file => {\n        const data = new FormData()\n        data.append('file', file)\n\n        const response = await fetch('/your-upload-endpoint', {\n            method: 'POST',\n            body: data,\n        })\n\n        const body = await response.json()\n\n        return body.url\n    },\n    onChange: state => {\n        console.log(state.html, state.design)\n    },\n})\n\nawait editor.mount()\n\nconst templates = await editor.searchTemplates({ search: 'welcome' })\nawait editor.loadTemplate(templates[0].slug)\n```\n\n## Examples\n\n`examples/basic.html` mounts the editor with a local sample design and lets you export the current state.\n\n`examples/http-template-client.html` shows how to wire `HttpTemplateClient` to backend template proxy routes such as `/unlayer-livewire/templates` and `/unlayer-livewire/templates/:slug`.\n\nStock template search and filtering is built in:\n\n```ts\nconst templates = await editor.searchTemplates({\n    search: 'newsletter',\n    type: 'email',\n    premium: false,\n    limit: 20,\n    offset: 0,\n    collection: '',\n    sort: 'recent',\n})\n```\n\n## Stock Templates And CORS\n\nUnlayer's public stock template search endpoint does not allow browser CORS requests. That means browser code cannot call `https://unlayer.com/templates/search` directly with `fetch`, Axios, or `XMLHttpRequest`.\n\nFor browser apps, create a backend endpoint in your own app and use `HttpTemplateClient`:\n\n```ts\nimport UnlayerEditor, { HttpTemplateClient } from '@community-sdks/unlayer-ts'\n\nconst editor = new UnlayerEditor({\n    id: 'editor',\n    templateClient: new HttpTemplateClient({\n        searchUrl: '/templates',\n        loadUrl: '/templates/:slug',\n    }),\n})\n```\n\nYour backend should expose:\n\n```txt\nGET /templates\nGET /templates/{slug}\n```\n\nRelative URLs call the same domain as the page. For example, `/templates` becomes `https://your-app.test/templates`.\n\nIf your template backend is on another domain, use full URLs:\n\n```ts\ntemplateClient: new HttpTemplateClient({\n    searchUrl: 'https://api.example.com/templates',\n    loadUrl: 'https://api.example.com/templates/:slug',\n})\n```\n\nWhen using full URLs on another domain, that backend must allow CORS for your frontend domain.\n\nThe browser calls your backend, and your backend calls Unlayer. If you are using this SDK outside a browser, you may use `UnlayerStockTemplateClient` directly.\n\n## Upstream Unlayer Template API\n\nYour backend search endpoint should call Unlayer like this:\n\n```txt\nPOST https://unlayer.com/templates/search\nContent-Type: application/json\n```\n\nThe SDK search options map to Unlayer's request body:\n\n```json\n{\n    \"page\": 1,\n    \"perPage\": 20,\n    \"filter\": {\n        \"premium\": \"\",\n        \"collection\": \"\",\n        \"name\": \"newsletter\",\n        \"sortBy\": \"recent\",\n        \"type\": \"email\"\n    }\n}\n```\n\nMapping:\n\n```txt\nsearch     -> filter.name\ntype       -> filter.type\npremium    -> filter.premium, \"true\" when true, \"\" when false\nlimit      -> perPage\noffset     -> page, calculated as floor(offset / limit) + 1\ncollection -> filter.collection\nsort       -> filter.sortBy\n```\n\nTemplate thumbnails use:\n\n```txt\nGET https://api.unlayer.com/v2/stock-templates/{slug}/thumbnail?width=500\n```\n\nTemplate loading uses Unlayer Studio GraphQL:\n\n```txt\nPOST https://studio.unlayer.com/api/v1/graphql\n```\n\nWith this query:\n\n```graphql\nquery StockTemplateLoad($slug: String!) {\n    StockTemplate(slug: $slug) {\n        StockTemplatePages {\n            design\n        }\n    }\n}\n```\n","readmeFilename":"README.md"}