A customizable Notion-style avatar editor built with Svelte 5

https://avatar.daniel.sticker.name/

Undo/Redo Support: History tracking with Runed StateHistory

State Management: Built with Svelte 5 Runes and Runed

Import/Export: Save and load avatar configurations as JSON

Accessible UI: Built with shadcn-svelte components

The easiest way to add the Notion Avatar Editor to your Svelte 5 project:

• Svelte 5 project
• bun (recommended, this guide uses bun but you can use npm or pnpm if you prefer)

# Install jsrepo CLI (if not already installed) bun add -g jsrepo # Initialize shadcn-svelte in your project (if not already done) bunx shadcn-svelte@next init # Add the avatar editor component jsrepo add @stickerdaniel/notion-avatar-svelte/ui/avatar-editor

add to your +layout.svelte:

<!-- src/routes/+layout.svelte --> <script lang="ts"> import '../app.css'; import { avatarContext } from '$lib/components/ui/avatar-editor/avatarContext'; import { AvatarStoreClass } from '$lib/components/ui/avatar-editor/AvatarStore.svelte';  let { children } = $props();  // Instantiate and set the AvatarStore in the context // This makes it available to all child components within this layout. avatarContext.set(new AvatarStoreClass()); </script> {@render children()}

and then render the Avatar Editor:

<script lang="ts"> import AvatarCreator from '$lib/components/ui/avatar-editor/avatar-editor.svelte'; </script> <AvatarCreator />

You can access the avatar context in any component:

<script lang="ts"> import * as Avatar from '$lib/components/ui/avatar'; import { avatarContext } from '$lib/components/ui/avatar-editor/avatarContext'; // Get the shared avatar store const avatar = avatarContext.get(); </script> <pre class="text-xs">{JSON.stringify(JSON.parse(avatar.configJSON), null, 2)}</pre> <Avatar.Root>	<Avatar.Image src={avatar.svgDataUrl} />	<Avatar.Fallback>Avatar</Avatar.Fallback> </Avatar.Root>

• Bun
• Git

git clone https://github.com/stickerdaniel/notion-avatar-svelte cd notion-avatar-svelte

Or download and extract the zip file.

# Install dependencies bun install

The project includes tasks for common operations. They work for VSCode and all forked editors like Cursor.

1. Press Cmd+Shift+B (macOS) or Ctrl+Shift+B (Windows/Linux) to run the default build task
2. Select "bun dev (run dev server)" from the task list

Or, open the Command Palette (Cmd+Shift+P or Ctrl+Shift+P) and type "Run Task", then select "bun dev (run dev server)".

# Start the development server bun run dev # Or start the server and open in a browser bun run dev -- --open

The project uses Tailwind CSS with customizable themes via shadcn-svelte:

1. Visit shadcn-svelte themes to explore and customize the color palette
2. Edit the src/app.css file to apply your custom theme variables

To add new avatar parts:

1. Add SVG files to src/lib/components/ui/avatar-editor/assets/parts/[category]/[category]-[index].svg
2. Add preview images to src/lib/components/ui/avatar-editor/assets/preview/[category]/[index].svg
3. Update the DEFAULT_CATEGORIES array in src/lib/components/ui/avatar-editor/types.ts

Contributions are welcome! Please feel free to submit a Pull Request.

This project is licensed under the MIT License - see the LICENSE file for details.

Graphics from Mayandev/notion-avatar

This project is not affiliated with Notion. The avatar style is inspired by Notion's UI.