About this project
Why this project exists
English
This project was created for two main reasons:
- Prove that React libraries can run inside Svelte. The core idea is to demonstrate that it's entirely possible to embed a React component —
even a complex one like Excalidraw — inside a Svelte application. By initializing the React
component within a Svelte 5
{@attach excalidraw}directive, we bridge the two frameworks seamlessly. React becomes just another rendering target, while Svelte handles routing, server logic, state management, and the overall architecture. - Svelte is the framework I know best. I chose Svelte not because it's trendy, but because it's the framework I'm most comfortable with.
I wanted to build something real and full-featured using the tools I understand deeply. Svelte
5's runes mode (
$state,$derived,$effect), SvelteKit's file-based routing, and the clean separation between client and server make it an excellent choice for this kind of project.
Español
Este proyecto nació por dos razones principales:
- Demostrar que es posible utilizar librerías de React dentro de Svelte. La idea central es probar que es completamente factible embeber un componente de React —
incluso uno tan complejo como Excalidraw — dentro de una aplicación Svelte. Inicializando
el componente de React dentro de la directiva
{@attach excalidraw}de Svelte 5, logramos conectar ambos frameworks de forma transparente. React se convierte simplemente en otro destino de renderizado, mientras que Svelte se encarga del routing, la lógica del servidor, la gestión de estado y toda la arquitectura. - Svelte es el framework que más domino. Elegí Svelte no porque esté de moda, sino porque es el framework con el que me siento más cómodo.
Quería construir algo real y con todas sus funcionalidades usando las herramientas que entiendo
a profundidad. El modo runes de Svelte 5 (
$state,$derived,$effect), el routing basado en archivos de SvelteKit y la limpia separación entre cliente y servidor lo convierten en una excelente elección para este tipo de proyecto.
The result? A working Excalidraw clone with auth, database persistence, and folder organization — all powered by Svelte, with React living quietly inside a single component.
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | Svelte 5 (runes mode) |
| Full-stack framework | SvelteKit |
| Backend | SvelteKit server actions + load functions |
| Auth | Better Auth (email/password + GitHub OAuth) |
| ORM | Drizzle ORM |
| Database | PostgreSQL 18 |
| DB Runtime | Docker Compose (local development) |
| React component | @excalidraw/excalidraw |
| React bridge | react + react-dom (initialized inside @attach) |
| Language | TypeScript (strict mode) |
| Package manager | Bun |
| Linting/Formatting | ESLint + Prettier |