Unlayer Svelte SDK

A Svelte 5 wrapper for the Unlayer email editor - drag & drop email template builder.

Demo: https://unlayer-svelte.iamdani.sh/

Monorepo Structure

This repository is organized as a monorepo with two workspaces:

• unlayer-svelte/ - The main SDK package (@unlayer/svelte)
• example/ - Example application demonstrating SDK usage

Quick Start

# Install dependencies for all workspaces
npm install

# Run the example app
npm run dev

# Build the SDK package
npm run build

# Build all workspaces
npm run build:all

Installation

npm install @unlayer/svelte

Basic Usage

<script lang="ts">
    import { UnlayerEditor } from '@unlayer/svelte';
    import type { UnlayerEditorOptions } from '@unlayer/svelte';

    let editorRef: any;
    let isLoaded = false;

    const handleReady = (editor: any) => {
        isLoaded = true;
        console.log('Editor is ready!', editor);
    };

    const exportHtml = () => {
        if (editorRef && isLoaded) {
            editorRef.exportHtml((data: any) => {
                console.log('Exported HTML:', data.html);
                console.log('Design JSON:', data.design);
            });
        }
    };

    const editorOptions: UnlayerEditorOptions = {
        minHeight: '500px'
    };
</script>

<UnlayerEditor
    bind:this={editorRef}
    options={{
        ...editorOptions,
        onReady: handleReady
    }}
/>

<button on:click={exportHtml} disabled={!isLoaded}>
    Export HTML
</button>

Props

design (optional)

• Type: object | null
• Default: null
• Description: Initial design to load in the editor

tools (optional)

• Type: Record<string, any>
• Default: {}
• Description: Custom tools configuration

options (optional)

• Type: UnlayerEditorOptions
• Default: {}
• Description: Editor configuration options

Options

The options prop accepts an UnlayerEditorOptions object with the following properties:

minHeight (optional)

• Type: string
• Default: '100%'
• Description: Minimum height of the editor

onReady (optional)

• Type: (editor: UnlayerEditor) => void
• Description: Callback function called when the editor is ready

onLoad (optional)

• Type: (editor: UnlayerEditor) => void
• Description: Callback function called when the editor is loaded

editorId (optional)

• Type: string
• Description: Custom ID for the editor instance

scriptUrl (optional)

• Type: string
• Description: Custom URL for the Unlayer script

options (optional)

• Type: object
• Description: Additional Unlayer editor configuration options

tools (optional)

• Type: Record<string, any>
• Description: Custom tools configuration

Methods

The component exposes the following methods via template ref:

loadDesign(design: object)

Load a design into the editor.

<script>
    let editorRef;
    
    const loadSampleDesign = () => {
        const sampleDesign = { /* your design object */ };
        editorRef.loadDesign(sampleDesign);
    };
</script>

<UnlayerEditor bind:this={editorRef} />

exportHtml(callback?: (data: {html: string, design: object}) => void)

Export the current design as HTML.

<script>
    let editorRef;
    
    const exportDesign = () => {
        editorRef.exportHtml((data) => {
            console.log('HTML:', data.html);
            console.log('Design:', data.design);
        });
    };
</script>

showPreview(device?: 'desktop' | 'mobile')

Show the preview mode.

<script>
    const showPreview = () => {
        editorRef.showPreview('desktop');
    };
</script>

hidePreview()

Hide the preview mode.

<script>
    const hidePreview = () => {
        editorRef.hidePreview();
    };
</script>

Advanced Example

<script lang="ts">
    import { UnlayerEditor } from '@unlayer/svelte';
    import type { UnlayerEditorOptions } from '@unlayer/svelte';

    let editorRef: any;
    let isLoaded = false;
    let htmlOutput = '';
    let previewMode = false;

    const handleReady = (editor: any) => {
        isLoaded = true;
        console.log('Editor ready!', editor);
    };

    const exportHtml = () => {
        if (editorRef && isLoaded) {
            editorRef.exportHtml((data: any) => {
                htmlOutput = data.html;
            });
        }
    };

    const togglePreview = () => {
        if (previewMode) {
            editorRef.hidePreview();
        } else {
            editorRef.showPreview('desktop');
        }
        previewMode = !previewMode;
    };

    const loadSampleDesign = () => {
        const sampleDesign = {
            body: {
                rows: [
                    {
                        cells: [1],
                        columns: [
                            {
                                contents: [
                                    {
                                        type: 'text',
                                        values: {
                                            text: 'Hello World!'
                                        }
                                    }
                                ]
                            }
                        ]
                    }
                ]
            }
        };
        editorRef.loadDesign(sampleDesign);
    };

    const editorOptions: UnlayerEditorOptions = {
        minHeight: '600px',
        onReady: handleReady
    };
</script>

<div class="editor-container">
    <div class="toolbar">
        <button on:click={loadSampleDesign} disabled={!isLoaded}>
            Load Sample
        </button>
        <button on:click={togglePreview} disabled={!isLoaded}>
            {previewMode ? 'Hide' : 'Show'} Preview
        </button>
        <button on:click={exportHtml} disabled={!isLoaded}>
            Export HTML
        </button>
    </div>

    <UnlayerEditor
        bind:this={editorRef}
        options={editorOptions}
    />

    {#if htmlOutput}
        <div class="html-output">
            <h3>Exported HTML:</h3>
            <pre>{htmlOutput}</pre>
        </div>
    {/if}
</div>

<style>
    .editor-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    .toolbar {
        margin-bottom: 20px;
        display: flex;
        gap: 10px;
    }

    .toolbar button {
        padding: 8px 16px;
        background: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
    }

    .toolbar button:disabled {
        background: #ccc;
        cursor: not-allowed;
    }

    .html-output {
        margin-top: 20px;
        padding: 20px;
        background: #f5f5f5;
        border-radius: 4px;
    }

    .html-output pre {
        max-height: 300px;
        overflow-y: auto;
        background: white;
        padding: 10px;
        border-radius: 4px;
    }
</style>

Requirements

• Svelte 5.0.0 or higher
• Modern browser with ES2015+ support

Development

Working with the Monorepo

This project uses npm workspaces. All commands should be run from the root directory:

# Install dependencies for all workspaces
npm install

# Run the example app (develops against local SDK)
npm run dev

# Build the SDK package
npm run build

# Run tests for the SDK
npm run test

# Lint all workspaces
npm run lint

# Format all workspaces
npm run format

# Type check all workspaces
npm run check

Publishing the SDK

The SDK package can be published independently:

# Build and publish the SDK
npm run publish:sdk

# Update SDK version
npm run version:sdk patch|minor|major

# Run prepack for SDK
npm run prepack:sdk

Working on Individual Workspaces

You can also work with individual workspaces:

# Work in the SDK workspace
cd unlayer-svelte/
npm run dev

# Work in the example workspace  
cd example/
npm run dev

Example App

The example app in example/ demonstrates how to use the SDK and serves as a development environment. It automatically uses the local SDK via the workspace dependency.

License

Apache-2.0

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues, please file them on the GitHub issue tracker.