@unlayer/svelte

A Svelte wrapper for the Unlayer Email Editor, making it easy to integrate the editor into Svelte applications.

Features

• 🔄 Two-way binding with Svelte
• 🎨 Full access to Unlayer's powerful email editor
• 📱 Responsive design
• 🔌 TypeScript support
• 🧩 Easy to use with Svelte 5

Demo

Installation

npm install @unlayer/svelte

Or if you prefer using yarn:

yarn add @unlayer/svelte

Usage

Basic Usage

<script lang="ts">
  import { UnlayerEditor } from '@unlayer/svelte';
  
  function handleExport(event) {
    const { html, design } = event.detail;
    console.log(html, design);
  }
</script>

<UnlayerEditor
  on:export-html={handleExport}
/>

With Initial Design

<script lang="ts">
  import { UnlayerEditor } from '@unlayer/svelte';
  import initialDesign from './welcome.json';
  
  function handleExport(event) {
    const { html, design } = event.detail;
    console.log(html, design);
  }
</script>

<UnlayerEditor
  design={initialDesign}
  on:export-html={handleExport}
/>

With Tool Configuration

<script lang="ts">
  import { UnlayerEditor } from '@unlayer/svelte';
  
  // Only allow specific tools
  const tools = {
    list: ['text', 'button', 'image', 'divider'],
    exclude: false // This is a whitelist
  };
</script>

<UnlayerEditor
  tools={tools}
/>

With Custom Options

<script lang="ts">
  import { UnlayerEditor } from '@unlayer/svelte';
  
  const options = {
    displayMode: 'email',
    appearance: {
      theme: 'dark'
    },
    features: {
      imageEditor: true
    }
  };
</script>

<UnlayerEditor
  options={options}
/>

Accessing Editor Methods

<script lang="ts">
  import { UnlayerEditor } from '@unlayer/svelte';
  
  let editor: UnlayerEditor;
  
  function exportHtml() {
    editor.exportHtml();
  }
  
  function loadDesign() {
    editor.loadDesign({
      body: {
        rows: [],
        values: {}
      }
    });
  }
</script>

<button on:click={exportHtml}>Export HTML</button>
<button on:click={loadDesign}>Load Empty Design</button>

<UnlayerEditor bind:this={editor} />

API

Props

Events

Methods

TypeScript Support

This package includes TypeScript definitions for all props, events, and methods. You can import the types from the package:

import type { Design, Tools, UnlayerOptions } from '@unlayer/svelte';

Development

Setup

git clone https://github.com/your-username/unlayer-svelte.git
cd unlayer-svelte
npm install

Running the Demo

npm run dev

Building the Package

npm run build

License

MIT