{"_id":"@community-sdks/unlayer-alpinejs","_rev":"3-20a75fc034127b87a40da55c91e6b1c6","name":"@community-sdks/unlayer-alpinejs","dist-tags":{"latest":"0.1.2"},"versions":{"0.1.0":{"name":"@community-sdks/unlayer-alpinejs","version":"0.1.0","keywords":["alpinejs","unlayer","email-editor","template-editor"],"license":"MIT","_id":"@community-sdks/unlayer-alpinejs@0.1.0","maintainers":[{"name":"zpmlabs","email":"zpmlabs.com@gmail.com"}],"dist":{"shasum":"a08f8da4f15b2989612ca6fbdf3a12fdcfec80bf","tarball":"https://registry.npmjs.org/@community-sdks/unlayer-alpinejs/-/unlayer-alpinejs-0.1.0.tgz","fileCount":6,"integrity":"sha512-Bhn8eEA433rs2RBUF1XDebCqG0dnEzmJo9Epmu8mVpO1TfwWn7zEAhdmtyA2S1bVard/MDffVAfwls48c5FniQ==","signatures":[{"sig":"MEUCIQDPLOrS2OfxZdEYdaJgL4sX1AgLJdxdFIetrntNHk4lYAIgVwI8G8A11huigCSNV5TRR+jfj2q4aiuNDcyCE0xVj2U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":18038},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"661c38077348688a09276e78e13d4f3b78eb3212","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":"Alpine.js adapter for the unofficial Unlayer TypeScript SDK.","directories":{},"_nodeVersion":"23.6.0","dependencies":{"@community-sdks/unlayer-ts":"^0.1.0"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","alpinejs":"^3.14.8","typescript":"^5.7.2"},"peerDependencies":{"alpinejs":"^3.14.0"},"_npmOperationalInternal":{"tmp":"tmp/unlayer-alpinejs_0.1.0_1777652907306_0.595904054233745","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@community-sdks/unlayer-alpinejs","version":"0.1.1","keywords":["alpinejs","unlayer","email-editor","template-editor"],"license":"MIT","_id":"@community-sdks/unlayer-alpinejs@0.1.1","maintainers":[{"name":"zpmlabs","email":"zpmlabs.com@gmail.com"}],"dist":{"shasum":"55fba599c3300afbfa8114a61b8b96464abb0942","tarball":"https://registry.npmjs.org/@community-sdks/unlayer-alpinejs/-/unlayer-alpinejs-0.1.1.tgz","fileCount":6,"integrity":"sha512-y6GojFcjwcs0xRdM2B7tsm7GOgCU3MJCERQvOELtxVIYOr+GG7w7OPRFiiSpzpOrPsVrBX/O38PPj+EGDIKIfw==","signatures":[{"sig":"MEUCIFrWVTlFjUNa9//nPG/bldWuoCBIlXuC0nTfynBjwUomAiEA3TZGKHpVJXScYuiFB5FKSh/zr6ViPIcPYtz5ipMO6Uo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20431},"main":"dist/index.cjs","type":"module","types":"dist/index.d.ts","module":"dist/index.js","gitHead":"2a51f6cddd174481b7c39ae9ead41a15f43acac2","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":"Alpine.js adapter for the unofficial Unlayer TypeScript SDK.","directories":{},"_nodeVersion":"23.6.0","dependencies":{"@community-sdks/unlayer-ts":"^0.1.1"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.3.5","alpinejs":"^3.14.8","typescript":"^5.7.2"},"peerDependencies":{"alpinejs":"^3.14.0"},"_npmOperationalInternal":{"tmp":"tmp/unlayer-alpinejs_0.1.1_1777730012442_0.30568744761696687","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@community-sdks/unlayer-alpinejs","version":"0.1.2","description":"Alpine.js adapter for the unofficial Unlayer TypeScript SDK.","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"},"dependencies":{"@community-sdks/unlayer-ts":"^0.1.2"},"peerDependencies":{"alpinejs":"^3.14.0"},"devDependencies":{"alpinejs":"^3.14.8","tsup":"^8.3.5","typescript":"^5.7.2"},"keywords":["alpinejs","unlayer","email-editor","template-editor"],"license":"MIT","_id":"@community-sdks/unlayer-alpinejs@0.1.2","gitHead":"c73d4a0da482d55bddaeb1ec72bcdd4e5b6a3d0b","_nodeVersion":"23.6.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-/tlmq9iFyP/S3Z7MdUuk5nAM4ukXzGXGQN1VI7eA7czW3g85A7Ys951WVcuTX+TWpWJ2fASrac+gGW1vJ7qXVQ==","shasum":"d5b77d7d07bc0f6f3b53d418503c3d8a04dc94d5","tarball":"https://registry.npmjs.org/@community-sdks/unlayer-alpinejs/-/unlayer-alpinejs-0.1.2.tgz","fileCount":6,"unpackedSize":21689,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBnLajprBj7B9duodexqM8ivzvrt5ZS1H/+TKym4q3cTAiEA7ZX6zwZqNIlBnoBKo7R0ciUoI2dJanVE+MK0wxNJOmE="}]},"_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-alpinejs_0.1.2_1777740357073_0.8218255392791238"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-01T16:28:27.189Z","modified":"2026-05-02T16:45:57.300Z","0.1.0":"2026-05-01T16:28:27.454Z","0.1.1":"2026-05-02T13:53:32.648Z","0.1.2":"2026-05-02T16:45:57.203Z"},"license":"MIT","keywords":["alpinejs","unlayer","email-editor","template-editor"],"description":"Alpine.js adapter for the unofficial Unlayer TypeScript SDK.","maintainers":[{"name":"zpmlabs","email":"zpmlabs.com@gmail.com"}],"readme":"# Unofficial Unlayer Alpine.js SDK\n\nAlpine.js adapter for [`@community-sdks/unlayer-ts`](https://www.npmjs.com/package/@community-sdks/unlayer-ts).\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:4174/examples/basic.html\nhttp://127.0.0.1:4174/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-alpinejs @community-sdks/unlayer-ts alpinejs\n```\n\n## Register With Alpine\n\n```ts\nimport Alpine from 'alpinejs'\nimport { registerUnlayerAlpine } from '@community-sdks/unlayer-alpinejs'\n\nregisterUnlayerAlpine(Alpine)\n\nAlpine.start()\n```\n\nYou can also choose a custom component name:\n\n```ts\nregisterUnlayerAlpine(Alpine, 'unlayerEditor')\n```\n\n## Examples\n\n`examples/basic.html` registers the Alpine adapter, mounts the editor with a sample design, and exports the current state.\n\n`examples/http-template-client.html` shows how to combine the Alpine adapter with `HttpTemplateClient` and backend template proxy routes.\n\n## Usage\n\n```html\n<div\n    x-data=\"unlayerEditor({\n        id: 'editor',\n        displayMode: 'email',\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>\n    <div id=\"editor\" style=\"height: 700px\"></div>\n\n    <button type=\"button\" x-on:click=\"exportState()\">Export</button>\n    <button type=\"button\" x-on:click=\"openTemplates()\">Choose template</button>\n</div>\n```\n\n## Alpine API\n\nThe component exposes the core SDK through Alpine-friendly properties and methods:\n\n```ts\nready\nmounted\nloading\nerror\nstate\ntemplates\ntemplatesOpen\ntemplatesLoading\ntemplateSearch\n\nmount()\nisReady()\ngetState()\nsetState(state)\nloadDesign(design)\nexportState()\nsearchTemplates(options)\nrefreshTemplates()\nloadTemplate(slug)\nchooseTemplate(templateOrSlug)\nopenTemplates()\ncloseTemplates()\nsetTemplateSearch(search)\n```\n\nWhen `templatePicker.enabled` is on, `openTemplates()` and `closeTemplates()` delegate to the built-in picker UI from `@community-sdks/unlayer-ts`.\n\n## Stock Templates\n\nTemplate search and loading comes from the underlying TypeScript SDK. Unlayer's public stock template search endpoint does not allow browser CORS requests, so browser apps need a backend proxy endpoint.\n\nRegister a template client that calls your own backend:\n\n```ts\nimport Alpine from 'alpinejs'\nimport { registerUnlayerAlpine } from '@community-sdks/unlayer-alpinejs'\nimport { HttpTemplateClient } from '@community-sdks/unlayer-ts'\n\nwindow.templateClient = new HttpTemplateClient({\n    searchUrl: '/templates',\n    loadUrl: '/templates/:slug',\n})\n\nregisterUnlayerAlpine(Alpine)\nAlpine.start()\n```\n\nThen pass that client and default filters:\n\n```html\n<div\n    x-data=\"unlayerEditor({\n        id: 'editor',\n        templateClient: window.templateClient,\n        templateSearch: {\n            search: 'newsletter',\n            type: 'email',\n            premium: false,\n            limit: 20,\n            offset: 0,\n            collection: '',\n            sort: 'recent',\n        },\n    })\"\n>\n    <div id=\"editor\" style=\"height: 700px\"></div>\n</div>\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\nwindow.templateClient = 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. Using Axios instead of `fetch` does not bypass CORS because the browser enforces it before JavaScript can read the response.\n\n## Upstream Unlayer Template API\n\nYour backend proxy should call Unlayer's search endpoint:\n\n```txt\nPOST https://unlayer.com/templates/search\nContent-Type: application/json\n```\n\nSearch options map to Unlayer's JSON body:\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\nExample 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\nTemplate thumbnails use `https://api.unlayer.com/v2/stock-templates/{slug}/thumbnail?width=500`.\n\nTemplate designs are loaded through:\n\n```txt\nPOST https://studio.unlayer.com/api/v1/graphql\n```\n\nUsing `StockTemplate(slug: $slug) { StockTemplatePages { design } }`.\n\n## Uploads\n\nUploads are intentionally application-owned. Provide `uploadImage(file)` and return the public URL:\n\n```ts\nuploadImage: async file => {\n    return 'https://example.com/path/to/uploaded-image.png'\n}\n```\n\nThis package does not depend on Filament, Livewire, Vue, or React.\n","readmeFilename":"README.md"}