Svelte 5 + TypeScript wrapper for the Unlayer Email Editor with demo
npm install unlayer-svelteLive demo: https://unlayer-svelte.vercel.app/
Svelte 5 + TypeScript SDK wrapper for the Unlayer Email Editor, plus a minimal demo.
- Install deps (for local dev in this repo)
- npm: npm i
- Run demo locally
- npm run dev:demo then open http://localhost:5173
- Build library
- npm run build (outputs dist/)
- Build demo (static)
- npm run build:demo (outputs dist-demo/)
- npm: npm i unlayer-svelte
- Peer deps: requires svelte@^5
Install the package and import the Svelte component.
``svelte
`
Props:
- design?: object initial JSON designoptions?: Record
- Unlayer init options (e.g. { displayMode: 'email' })tools?: { whitelist?: string[]; blacklist?: string[] }
- simple tools enable/disable helper
Events:
- loaded – editor readydesign-updated
- – emits updated JSON designexport-html
- – emits { html, design }error
- – when initialization or actions fail
Public methods via bind:this:
- exportHtml()loadDesign(design)
-
Located under src/demo/. The main page renders the editor with controls to load public/welcome.json, export HTML, and preview it in a modal.
Commands:
- npm run dev:demo – start dev server for demonpm run build:demo
- – build static demo to dist-demo/
- The wrapper lazily loads Unlayer via the official CDN https://editor.unlayer.com/embed.js as a fallback, avoiding direct npm bundling issues and keeping bundle small.onMount
- Initialization occurs in ; destroy() is called in onDestroy to prevent leaks.getDesign
- Events are re-emitted as Svelte component events. Design updates are read via .tools
- Tools whitelist/blacklist is transformed into Unlayer config ({ toolName: { enabled: boolean } }).
- The container fills available space; the demo sets full-height layout for convenience.
- Add full TypeScript type definitions for Unlayer API.
- Expose more helpers (save image, merge tags, custom tools).
- Configurable CDN and script loading strategy.
- SSR guards for environments without window.
- Vercel: set Build Command to npm run build:demo, Output Directory to dist-demo.npm run build:demo
- Alternatively, run and deploy dist-demo/` to any static host.