Gravatar quick editor

Edit your Gravatar profile everywhere

While Gravatar powers user avatars and profiles across the web, profile editing was previously limited to Gravatar.com. The Quick Editor brings profile editing directly into your application.

Gravatar Quick Editor is a JavaScript library that allows users to integrate the Gravatar Quick Editor into their web applications, enabling easy editing of Gravatar profiles via a popup window. The library provides both a core class for advanced control and a simplified class for quick setup.

How It Works

The Quick Editor follows a familiar OAuth-style flow, familiar from payment service providers like PayPal or Stripe:

1. User clicks an edit button in your application
2. Authentication popup appears requesting email and verification code
3. User edits their profile (avatar, bio, location, social links … – you define the feature set)
4. User closes popup, and returns to your application with updated profile

You are in control over which profile elements users can view and edit. The interface clearly indicates that changes affect the user’s global Gravatar profile. User profile changes are syncing automatically across all Gravatar-enabled platforms.

Simplifying avatar and profile management

Gravatar is great for pre-filling profile data and showing default avatars, but users expect to edit their profile and image directly. Traditionally, platforms had to build their own image upload and profile editing systems from scratch. The Quick Editor removes that burden — users can update their avatars without building any custom infrastructure.

Most importantly, users stay on your site. They can edit their profile in place, then return to what they were doing—no interruptions.

Getting Started

Install with NPM or Yarn

Install the package using npm or yarn:

npm install @gravatar-com/quick-editor

yarn add @gravatar-com/quick-editor

Usage

GravatarQuickEditor

The GravatarQuickEditor class simplifies the setup process by automatically setting up event handlers to open the popup and update avatar elements on the page.

Example

import { GravatarQuickEditor } from '@gravatar-com/quick-editor';

document.addEventListener( 'DOMContentLoaded', () => {
  new GravatarQuickEditor( {
    email: 'user@example.com',
    editorTriggerSelector: '#edit-profile',
    avatarSelector: '#gravatar-avatar',
    scope: [ 'avatars' ],
  } );
} );

GravatarQuickEditorCore

The GravatarQuickEditorCore class provides advanced control over the Gravatar Quick Editor functionality, allowing developers to trigger popup events and set up profile update callbacks.

Example

import { GravatarQuickEditorCore } from '@gravatar-com/quick-editor';

document.addEventListener( 'DOMContentLoaded', () => {
  const quickEditorCore = new GravatarQuickEditorCore( {
    email: 'user@example.com',
    scope: [ 'avatars', 'about' ],
    onProfileUpdated: () => {
      console.log( 'Profile updated!' );
    },
    onOpened: () => {
      console.log( 'Editor opened!' );
    },
  } );

  document.getElementById( 'edit-profile' ).addEventListener( 'click', () => {
    quickEditorCore.open();
  } );
} );

API

For more information, please visit our GitHub repository to view the API documentation.

• Gravatar Quick Editor