Svelte Dialog

A super simple Svelte 5 dialog system.

How to use

Run npm install svelte-easy-dialog to install it in your project.

Start by placing <DialogSystem /> on the page where you want to show a dialog. There should only be one DialogSystem in total, so put it in the root layout.

<DialogSystem />

// Already imported
import DialogSystem from "svelte-easy-dialog/DialogSystem.svelte";

// New code
import { showDialog } from "svelte-easy-dialog";
import Sum from "Sum.svelte";

function openMyDialog(){
    let dialogRef = showDialog(
        Sum,
        {
            // Your properties
            valueA: 5,
            valueB: 10,

            // Callbacks
            answer: (value) => (answer = value),
            closeDialog: () => dialogRef.close(),
        },
    );
}

Developing

To develop install the dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Everything inside src/lib is part of your library, everything inside src/routes can be used as a showcase or preview app.

Building

To build your library:

npm pack

To create a production version of your showcase app:

npm run build

You can use it in another app without having to publish by using npm link

# In the library run (this folder)
npm link
# In the application that needs to consume it (so another folder)
npm link -S svelte-easy-dialog

Publishing

To publish the library to npm:

npm publish