Unlayer Svelte SDK

A lightweight Svelte wrapper for the Unlayer email editor - a powerful drag-and-drop email template builder.

Features

• Svelte 5 Compatible: Built specifically for modern Svelte applications
• TypeScript Support: Fully typed API for better developer experience
• Responsive Design: Automatically fills parent container
• Event-Driven: Reactive event system for design updates and exports
• Error Handling: Graceful handling of network failures and load errors
• Lightweight: Minimal bundle size with CDN fallback

Installation

# Via CDN (recommended for this implementation)
# The editor loads via CDN automatically

# For local development
git clone https://github.com/thealitahir/unlayer-svelte-sdk.git
cd unlayer-svelte-sdk
npm install
npm run dev

Quick Start

<script lang="ts">
  import UnlayerEditor from './lib/UnlayerEditor.svelte';
  import type { UnlayerDesign, HtmlExport } from './lib/types';

  let editorRef: any;
  let isReady = false;

  function handleReady() {
    isReady = true;
  }

  function handleExport(event: CustomEvent<HtmlExport>) {
    const { html, design } = event.detail;
    // Use the exported HTML and design data
  }

  async function exportEmail() {
    if (editorRef && isReady) {
      const result = await editorRef.exportHtml();
      // Handle the exported result
    }
  }
</script>

<UnlayerEditor
  bind:this={editorRef}
  options={{ displayMode: 'email' }}
  projectId={1234}
  on:loaded={handleReady}
  on:export-html={handleExport}
/>

<button on:click={exportEmail} disabled={!isReady}>
  Export HTML
</button>

API Reference

Props

Prop	Type	Default	Description
design	UnlayerDesign | null	null	Initial design JSON to load
tools	Record<string, any> | null	null	Custom tools configuration
options	UnlayerOptions	{}	Unlayer editor options
projectId	number	1234	Unlayer project ID

Events

Event	Payload	Description
loaded	void	Fired when editor is ready
design-updated	UnlayerDesign	Fired when design changes
export-html	HtmlExport	Fired when HTML is exported

Methods

Method	Parameters	Returns	Description
exportHtml()	-	Promise<HtmlExport>	Export current design as HTML
loadDesign()	design: UnlayerDesign	void	Load a design into editor
saveDesign()	-	Promise<UnlayerDesign>	Save current design

Demo Application

The demo includes:

• Load Sample Design: Loads a predefined email template
• Export HTML: Exports and previews the generated HTML
• Error Handling: Graceful handling of network issues
• Responsive Preview: Mobile-friendly email preview modal

Running the Demo

npm run dev

Visit http://localhost:5173 to see the demo in action.

Architecture Decisions

Component Design

• Single Component Approach: One main UnlayerEditor.svelte component for simplicity
• Event-Driven API: Uses Svelte's event system rather than callbacks for better reactivity
• Async Script Loading: Loads Unlayer via CDN with proper error handling

Error Handling

• Network Failure Detection: Monitors online/offline status
• Graceful Degradation: Shows helpful error messages and retry options
• Loading States: Clear visual feedback during initialization

TypeScript Integration

• Strict Typing: Full type definitions for all props and events
• Type Exports: Reusable types for consumer applications

Challenges & Solutions

Challenge 1: Script Loading Timing

Problem: Unlayer script needs to be loaded before initialization Solution: Implemented async script loading with polling mechanism

Challenge 2: Layout Constraints

Problem: Default Vite CSS was constraining editor dimensions Solution: Identified and removed conflicting CSS rules in global styles

Challenge 3: Event System Integration

Problem: Bridging Unlayer callbacks with Svelte events Solution: Used Svelte's createEventDispatcher for clean event propagation

Next Steps for Production

Immediate Improvements

1. Unit Testing: Add Vitest tests for component initialization and events
2. NPM Package: Structure as proper NPM package with workspace setup
3. Error Boundaries: More granular error handling and recovery

Advanced Features

1. Custom Tools Support: Enhanced API for custom block types
2. Undo/Redo: Implement history management
3. Real-time Collaboration: Multi-user editing capabilities
4. Performance Optimization: Lazy loading and code splitting

DevOps

1. Demo Deployment: Live demo on Vercel
2. Documentation Site: Comprehensive docs with examples

License

MIT License - feel free to use this in your projects!

Contributing

Contributions welcome! Please feel free to submit issues and pull requests.

Support

For questions about this implementation, please create an issue in the repository. For Unlayer-specific questions, visit Unlayer Documentation.