Overview
The emailList() function scans your project directory and returns a list of all Svelte email component files. Use this function in your SvelteKit load functions to populate the email preview interface.
Function Signature
function emailList(options?: EmailListProps): PreviewData
Parameters
options
EmailListProps
default:"{}"
Optional configuration objectoptions.path
string
default:"'/src/lib/emails'"
Relative path from root to your emails folder
Absolute path to your project root. Auto-detected using process.cwd() if not provided
Return Type
Object containing the list of email files and the pathArray of relative file paths to email components (without .svelte extension), or null if directory doesn’t exist or is empty
The email directory path that was scanned
Usage
Basic Example
import { emailList } from 'better-svelte-email/preview';
export function load() {
const emails = emailList();
return { emails };
}
Custom Directory
import { emailList } from 'better-svelte-email/preview';
export function load() {
const emails = emailList({
root: process.cwd(),
path: '/src/lib/emails'
});
return { emails };
}
Example Response
{
"files": [
"welcome",
"password-reset",
"notifications/daily-digest"
],
"path": "/src/lib/emails"
}
The function automatically handles nested directories and returns relative paths. File names are returned without the .svelte extension.
Behavior
Directory Not Found
If the email directory doesn’t exist, the function returns:
{
"files": null,
"path": "/src/lib/emails"
}
Email directory not found: /absolute/path/to/emails
Empty Directory
If no .svelte files are found, the function returns:
{
"files": null,
"path": "/src/lib/emails"
}
Root Path Detection
If root is not provided, the function attempts to use process.cwd(). If this fails, an error is thrown:
In some environments (like edge runtimes), process.cwd() may not be available. In these cases, you must explicitly pass the root parameter.
Integration with EmailPreview Component
This function is typically used together with the EmailPreview component:
import { emailList, createEmail, sendEmail } from 'better-svelte-email/preview';
import { PRIVATE_RESEND_API_KEY } from '$env/static/private';
export function load() {
const emails = emailList();
return { emails };
}
export const actions = {
...createEmail(),
...sendEmail({ resendApiKey: PRIVATE_RESEND_API_KEY })
};
<script>
import { EmailPreview } from 'better-svelte-email/preview';
export let data;
</script>
<EmailPreview {data} />