Skip to content
This repository has been archived by the owner on Jan 27, 2021. It is now read-only.


Repository files navigation

The project is not actively maintained. Please try similar projects stevenjoezhang/live2d-widget


npm package dependencies devDependencies

downloads-total downloads-month

stars forks issues

commitizen PRs license

Backers on Open Collective Sponsors on Open Collective

Read this in other languages: English, 简体中文.

Add the Sseexxyyy live2d to your hexo!


Author's original Blog:



Install module:

npm install --save hexo-helper-live2d

try yarn add hexo-helper-live2d for better installation experience. Yarn

Still using legacy version?
  • If you want to use new injector, which will inject to all pages:

Please delete {{ live2d() }} or <%- live2d() %> before </body> in layout/layout.ejs or layout/_layout.swig.

  • If you want to use the old replace mode, which only replace live2d tag:

Keep {{ live2d() }} or <%- live2d() %>, and turn the tagMode config to true.

We recommend you to use npm install --save hexo-helper-live2d@3.x to force install the latest version.

Tag mode

Please insert {{ live2d() }}(swig) or <%- live2d() %>(ejs) before </body> in whichever pages you want to insert. And turn tagMode config to true, and then live2dwidget will only be on those who have live2d tag.

Others, for jekyll, wordpress, etc

See live2d-widget.js WIP.


Add configuration in hexo's _config.yml file or theme's _config.yml.

An Example:

  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
    use: live2d-widget-model-wanko
    position: right
    width: 150
    height: 300
    show: true
    opacity: 0.7

Detail settings

Settings is divided into helper-specific ones and general ones, You can merge these two into your _config.yml file.


# Live2D
  enable: true
  # enable: false
  pluginRootPath: live2dw/ # Root path of plugin to be on the site (Relative)
  pluginJsPath: lib/ # JavaScript path related to plugin's root (Relative)
  pluginModelPath: assets/ # Relative model path related to plugin's root (Relative)
  scriptFrom: local # Default
  # scriptFrom: jsdelivr # jsdelivr CDN
  # scriptFrom: unpkg # unpkg CDN
  # scriptFrom: # Your custom url
  tagMode: false # Whether only to replace live2d tag instead of inject to all pages
  log: false # Whether to show logs in console
    use: live2d-widget-model-wanko # npm-module package name
    # use: wanko # folder name in (hexo base dir)/live2d_models/
    # use: ./wives/wanko # folder path relative to hexo base dir
    # use: # Your custom url

To see Chinese explainations, please have a look at Chinese document.

General Settings

Recentlly may changes quickly, but don't worry, it won't make huge changes.

See live2d-widget.js API

An example:

# Live2D
    scale: 1
    hHeadPos: 0.5
    vHeadPos: 0.618
    superSample: 2
    width: 150
    height: 300
    position: right
    hOffset: 0
    vOffset: -20
    show: true
    scale: 0.5
    opacityDefault: 0.7
    opacityOnHover: 0.2


There are many ways to use different models:

a. live2d_models's subfolder name

  1. Create a live2d_models folder at your blog's root directory.

  2. Create a folder by the name of your model.

  3. Copy your model to this folder.

  4. Type the folder name into model.use in _config.yml.

An Example:

Your model is named mymiku.

Then, create a folder at / (Which should exists _config.yml, sources, themes ) named mymiku.

Copy your model to /live2d_models/mymiku/.

Up to now, there should be an .model.json file (for example, mymiku.model.json)

in the directory of /live2d_models/mymiku/.

Type mymiku into model.use in _config.yml.

b. custom path relative to hexo base dir

You can just type your model folder's path which is relative to hexo base dir.

An example: ./wives/wanko

c. npm module's name

use exist ones

We alreday have tons of models, check this out

Click me if you are lazy
  • live2d-widget-model-chitose
  • live2d-widget-model-epsilon2_1
  • live2d-widget-model-gf
  • live2d-widget-model-haru/01 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haru/02 (use npm install --save live2d-widget-model-haru)
  • live2d-widget-model-haruto
  • live2d-widget-model-hibiki
  • live2d-widget-model-hijiki
  • live2d-widget-model-izumi
  • live2d-widget-model-koharu
  • live2d-widget-model-miku
  • live2d-widget-model-ni-j
  • live2d-widget-model-nico
  • live2d-widget-model-nietzsche
  • live2d-widget-model-nipsilon
  • live2d-widget-model-nito
  • live2d-widget-model-shizuku
  • live2d-widget-model-tororo
  • live2d-widget-model-tsumiki
  • live2d-widget-model-unitychan
  • live2d-widget-model-wanko
  • live2d-widget-model-z16

You can use npm install {your model's package name} to install,

and type it into model.use in _config.yml to use it.

make your own ones

  • Create an folder, use your node environment run npm init, we recommend you to name it like


  • Create an assets folder in the folder you just created, copy your model files into it.

Here's an example:


  • Use npm publish to publish it.

  • Then use npm install --save live2d-widget-model-xxx,

and you can just type your package name(live2d-widget-model-wanko) into model.use

d. Your own CDN

If you are disappointed without CDN, you can just type your own .model.json url into model.use.


Cheer for the 3.0 version and the new year!~

This is my first hexo plugin, star ⭐ and watch 👓, pull request is also welcomed.




Please pay enough attention to this document if you want to commit your changes or submit issues

This may help you a lot. All kinds of contributions are welcome.


Releated projects



About me

author author QQ author email

collaborator0 collaborator0 QQ collaborator0 email



Open sourced under the GPL v2.0 license.


This project exists thanks to all the people who contribute.


Thank you to all our backers! 🙏 [Become a backer]


Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]