https://github.com/itsrainingmani/excali
Minimal clone of Excalidraw
https://github.com/itsrainingmani/excali
canvas excalidraw sveltekit
Last synced: 3 months ago
JSON representation
Minimal clone of Excalidraw
- Host: GitHub
- URL: https://github.com/itsrainingmani/excali
- Owner: itsrainingmani
- Created: 2024-11-01T22:11:27.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2024-11-05T06:15:41.000Z (12 months ago)
- Last Synced: 2025-03-01T06:44:22.271Z (8 months ago)
- Topics: canvas, excalidraw, sveltekit
- Language: Svelte
- Homepage: https://excali.itsrainingmani.dev
- Size: 123 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Excali - Macro
SvelteKit Application that mimics basic Excalidraw functionality. Written as an exercise to see how I could improve on my interview performance at Macro
## Design Goals
Based on the prompt, I decided to focus on a minimal yet functional subset of Excalidraw, namely the following features -
- Panning
- Rectangles
- Circles (Ellipses)
- Text
I wanted to not just render lines on the canvas but figure out what idiomatic ways of working with the Canvas API are and how to work with them.
To this end, the code does the following -
- Proper state management of the global canvas object
- In-memory store of any drawn objects (doesn't persist across sessions) with Ctrl-Z (Undo) functionality.
- Multiple Parameters for rendered objects like - stroke color, line width, line style, font style etc.
The codebase makes extensive use of SkeletonUI components which allows me to avoid getting too bogged down with generating functional UI but allows for heavy customizability.
## AI Object Generation
As a fun experiment, I'm using Claude to generate drawings based on a given prompt. Here's an example
https://github.com/user-attachments/assets/4ff594ee-ae4d-4f45-b92f-d35f377779e7
## Developing
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
```bash
npm run dev
# or start the server and open the app in a new browser tab
npm run dev -- --open
```
## Building
To create a production version of your app:
```bash
npm run build
```
You can preview the production build with `npm run preview`.
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.