About this project

Why this project exists

English

This project was created for two main reasons:

  1. 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.
  2. 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:

  1. 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.
  2. 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

LayerTechnology
FrontendSvelte 5 (runes mode)
Full-stack frameworkSvelteKit
BackendSvelteKit server actions + load functions
AuthBetter Auth (email/password + GitHub OAuth)
ORMDrizzle ORM
DatabasePostgreSQL 18
DB RuntimeDocker Compose (local development)
React component@excalidraw/excalidraw
React bridgereact + react-dom (initialized inside @attach)
LanguageTypeScript (strict mode)
Package managerBun
Linting/FormattingESLint + Prettier