# stevenjoezhang/live2d-widget

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/stevenjoezhang-live2d-widget).**

10,764 stars · 2,615 forks · JavaScript · GPL-3.0

## Links

- GitHub: https://github.com/stevenjoezhang/live2d-widget
- Homepage: https://zhangshuqiao.org/2018-07/在网页中添加Live2D看板娘
- awesome-repositories: https://awesome-repositories.com/repository/stevenjoezhang-live2d-widget.md

## Topics

`javascript-plugin` `live2d`

## Description

This project provides an animated Live2D character widget that can be embedded on any web page as an interactive mascot. The widget renders characters using the Cubism SDK on an HTML canvas, and can be deployed either via a content delivery network for zero-setup integration or self-hosted on a personal server for full control over asset delivery.

The mascot responds to visitor actions through CSS selector-based interaction binding, displaying custom speech bubbles when users hover over or click specific page elements. Visitors can click and drag the character to reposition it anywhere on the page, and a visibility toggle with a close button persists across page loads. The widget supports outfit swapping by loading alternative texture files from a model repository, and maintains its state across page transitions through PJAX navigation integration.

Configuration is handled through a JavaScript object that sets the character model, resource paths, and CDN endpoints, along with a JSON file that defines interaction triggers and text responses. The widget loads model assets from a static file server using HTTP requests, and its modular plugin architecture organizes features into independent modules for configuration, rendering, and interaction.

## Tags

### User Interface & Experience

- [Web Mascot Embeddings](https://awesome-repositories.com/f/user-interface-experience/avatars/realtime-avatar-renderers/live2d-avatar-renderers/web-mascot-embeddings.md) — Embeds an animated Live2D character on any web page as an interactive mascot.
- [Live2D Model Configurators](https://awesome-repositories.com/f/user-interface-experience/avatars/avatar-appearance-configurators/live2d-model-configurators.md) — Configures Live2D model appearance, textures, and animations via a JavaScript configuration object.
- [Live2D Avatar Renderers](https://awesome-repositories.com/f/user-interface-experience/avatars/realtime-avatar-renderers/live2d-avatar-renderers.md) — Adds an animated Live2D mascot to a web page that users can interact with and responds to events. ([source](https://github.com/stevenjoezhang/live2d-widget))
- [Embedded Mascot Widgets](https://awesome-repositories.com/f/user-interface-experience/avatars/realtime-avatar-renderers/live2d-avatar-renderers/embedded-mascot-widgets.md) — Provides an animated Live2D character widget embeddable on any web page.
- [Interaction Binding Selectors](https://awesome-repositories.com/f/user-interface-experience/css-selectors/interaction-binding-selectors.md) — Binds speech bubble triggers to page elements by matching user-defined CSS selectors.
- [Interactive Selector Bindings](https://awesome-repositories.com/f/user-interface-experience/css-selectors/interactive-selector-bindings.md) — Displays custom text when users hover over or click specific page elements defined by CSS selectors.
- [Mascot Dragging Controls](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/draggable-axis-configurations/draggable-element-definitions/draggability-state-control/mascot-dragging-controls.md) — Lets visitors click and drag the character to reposition it anywhere on the page.
- [Mascot Interaction Customizations](https://awesome-repositories.com/f/user-interface-experience/editor-customization-tools/editor-appearance-customization/interaction-customization/mascot-interaction-customizations.md) — Defines custom text responses triggered by CSS selectors for specific page elements. ([source](https://github.com/stevenjoezhang/live2d-widget))
- [Interaction Trigger Configurations](https://awesome-repositories.com/f/user-interface-experience/interaction-trigger-configurations.md) — Defines CSS selectors and text responses in a JSON file for character reactions to page elements. ([source](https://github.com/stevenjoezhang/live2d-widget/blob/master/README.en.md))
- [Mascot Behavior Configurators](https://awesome-repositories.com/f/user-interface-experience/autocomplete-components/behavior-configurations/mascot-behavior-configurators.md) — Modifies the character's appearance, dialog triggers, and interactive responses through a JSON file. ([source](https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@master/README.md))
- [Mascot Appearance Configurators](https://awesome-repositories.com/f/user-interface-experience/avatars/avatar-appearance-configurators/mascot-appearance-configurators.md) — Passes a configuration object to set the character model, resource paths, and CDN endpoints. ([source](https://github.com/stevenjoezhang/live2d-widget))
- [Mascot Dragging Interactions](https://awesome-repositories.com/f/user-interface-experience/drag-and-drop-libraries/click-drag-differentiation/mascot-dragging-interactions.md) — Lets users drag the character around the page and click to trigger speech bubbles. ([source](https://github.com/stevenjoezhang/live2d-widget))
- [Character Appearance and Persona Customizers](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/visual-styling-presentation/interface-appearance-customization/component-appearance-customizers/application-appearance-customizers/windows-appearance-customizers/character-appearance-and-persona-customizers.md) — Passes a JavaScript object that sets the model, textures, and CDN paths for a Live2D character. ([source](https://github.com/stevenjoezhang/live2d-widget))
- [Mascot](https://awesome-repositories.com/f/user-interface-experience/visibility-toggles/mascot.md) — Provides a close button and persistent re-show toggle for the Live2D mascot widget. ([source](https://github.com/stevenjoezhang/live2d-widget))
- [Widget Behavioral Configurations](https://awesome-repositories.com/f/user-interface-experience/widget-behavioral-configurations.md) — Sets widget options like draggability, log level, and tool buttons through a JavaScript object. ([source](https://github.com/stevenjoezhang/live2d-widget/blob/master/README.en.md))
- [Character Behavior Settings](https://awesome-repositories.com/f/user-interface-experience/widget-behavioral-configurations/character-behavior-settings.md) — Adjusts the character's appearance, animations, and interactive responses through widget settings. ([source](https://github.com/stevenjoezhang/live2d-widget/blob/master/.prettierignore))

### Artificial Intelligence & ML

- [CSS Selector Speech Triggers](https://awesome-repositories.com/f/artificial-intelligence-ml/programmatic-speech-triggers/css-selector-speech-triggers.md) — Displays custom speech bubbles when users hover over or click specific page elements defined by CSS selectors. ([source](https://github.com/stevenjoezhang/live2d-widget))
- [Mascot Speech Customizations](https://awesome-repositories.com/f/artificial-intelligence-ml/speech-synthesis-customizations/mascot-speech-customizations.md) — Defines custom text messages that appear when visitors interact with specific page elements. ([source](https://github.com/stevenjoezhang/live2d-widget))
- [Live2D Model Repositories](https://awesome-repositories.com/f/artificial-intelligence-ml/machine-learning/architectures/model-architecture-evaluation/model-repositories/model-repository-organization/live2d-model-repositories.md) — Points the widget to a static file server hosting Live2D model assets and JSON descriptions. ([source](https://github.com/stevenjoezhang/live2d-widget/blob/master/README.en.md))

### Graphics & Multimedia

- [Live2D Avatar Renderers](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/webgl-gpu-rendering/live2d-avatar-renderers.md) — Renders animated Live2D characters on an HTML canvas using the Cubism SDK.

### Part of an Awesome List

- [Drag and Drop](https://awesome-repositories.com/f/awesome-lists/devtools/drag-and-drop.md) — Enables users to click and drag the character to reposition it anywhere on the page.

### DevOps & Infrastructure

- [CDN Deployment Integrations](https://awesome-repositories.com/f/devops-infrastructure/cdn-deployment-integrations.md) — Hosts the widget files on a CDN for fast, reliable loading on any site. ([source](https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@master/README.md))
- [Cloud or Self-Hosted Deployments](https://awesome-repositories.com/f/devops-infrastructure/feature-flags/cloud-or-self-hosted-deployments.md) — Offers both CDN and self-hosted deployment options for the Live2D widget. ([source](https://github.com/stevenjoezhang/live2d-widget))
- [Self-Hosted Deployments](https://awesome-repositories.com/f/devops-infrastructure/self-hosted-deployments.md) — Allows placing widget files on a personal server for full control over delivery. ([source](https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@master/README.md))

### Software Engineering & Architecture

- [Modular Plugin Architectures](https://awesome-repositories.com/f/software-engineering-architecture/modular-plugin-architectures.md) — Organizes widget features into independent modules for configuration, rendering, and interaction.

### Web Development

- [CDN Asset Delivery](https://awesome-repositories.com/f/web-development/cdn-asset-delivery.md) — Delivers model assets and widget scripts from a CDN for zero-setup deployment.
- [JSON-Driven Configurations](https://awesome-repositories.com/f/web-development/single-page-applications/single-file-distributions/json-driven-configurations.md) — Loads character appearance, animations, and behavior from a structured JSON configuration file.