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:
# 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>
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.
Cmd+Shift+B
(macOS) or Ctrl+Shift+B
(Windows/Linux) to run the default build taskOr, 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:
src/app.css
file to apply your custom theme variablesTo add new avatar parts:
src/lib/components/ui/avatar-editor/assets/parts/[category]/[category]-[index].svg
src/lib/components/ui/avatar-editor/assets/preview/[category]/[index].svg
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.