Svelte Email Builder

📧 Email Builder with Svelte 5 & PocketBase

Welcome to the Email Builder project! This application lets you create and manage newsletter designs using Svelte 5, PocketBase, and TypeScript with the powerful Unlayer React Email Editor.

🚀 Quick Start

Prerequisites

Bun (recommended) or Node.js
PocketBase instance

Installation

Clone the repository

git clone https://github.com/yourusername/email-builder.git
cd email-builder

Install dependencies

bun install
bunx playwright install firefox
bunx playwright install-deps
# or
npm install
npx playwright install firefox
npx playwright install-deps

Test the Project

bun run dev
# or
npm run dev

⚙️ Setup

PocketBase Configuration Import the pb_schema.json to your PocketBase instance (merge)

Make sure your PocketBase server is running

Environment Variables

See .env.example for required variables:

POCKETBASE_URL=http://127.0.0.1:8090
ORIGIN=http://127.0.0.1:3000
AUTOSAVE_INTERVAL=60

Autosave

The interval is in seconds
Leave AUTOSAVE_INTERVAL blank to disable it
Set it to 0 to autosave upon a change instead of an interval
There is a 2 second minimum interval between saves to limit server load

☁️ Deploy to production

Install docker

git clone https://github.com/Thodoriskoutou/svelte-email-builder
cd svelte-email-builder
docker compose pull
docker compose build email-builder

Use your editor of choice to edit docker-compose-yml to your liking. Notably you should edit the pocketbase url with an FQDN

docker compose up -d

Set up a reverse proxy for both pocketbase and the email-builder and don't forget to import the pocketbase schema (merge).

📚 Project Overview

This email builder was created as part of a Full Stack Internship Assignment. Key features:

Drag-and-drop email template creation
Newsletter management
Responsive design
Type-safe development with TypeScript

⚠️ Known Issues

Although the ground work for multi-user workflow is there, there's no ACL whatsoever. All users can see and edit all templates.
Due to the above multiple users editing the same template can result in data loss.
You need a reverse proxy and 2 FQDNs (1 for pocketbase and 1 for email builder) in order to use the docker deployment, else images will be uploaded, but won't show in the frontend
In nginx, in the email-builder vhost you'll need proxy_set_header Origin http://$host; for sveltekit form actions to work
For oAuth2 you need to use email builder's /auth/callback/[provider] as your redirect url in your provider's settings

🛠️ Tech Stack

Frontend: Svelte 5
Backend: PocketBase
Editor: React Email Editor
Package Manager: Bun (Node.js compatible)

🔄 Contributing

Contributions are welcome! Please:

Fork the repository
Create your feature branch
Commit your changes
Push to the branch
Open a pull request

📧 Resources

Happy coding! 👨‍💻👩‍💻

Top categories