Need help with graphjs?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

207 Stars 28 Forks GNU Affero General Public License v3.0 516 Commits 39 Opened issues


A set of widgets for a meaningfully social web.

Services available


Need anything else?

Contributors list


GraphJS is a Javascript client-side library to help developers easily enable social features on their web sites. GraphJS is built upon the Phở framework, and it's open source. With only a few lines of code, you can easily add authentication, comments, messages, forum, groups, profiles etc. to your static web pages.

GraphJS depends on Riot.js.


Make sure you have npm installed. Simply type in:

npm install # to install Riot.js and other dependencies
npm run build # to form graph.js file

After compilation, you will get a

file which would be served through HTTPS. Then, you should include this file in all of your web pages where you want to take advantage of GraphJS functionality.

Getting Started

To get started with Graph.js, you need to include graph.js file (created above) to your project. Then you can initiate it with GraphJS.init function.



<script src="path/to/graph.js"></script>
GraphJS.init("{{YOUR-PUBLIC-ID}}", {
    host:  "{{URL-OF-GRAPHJS-INSTANCE}}",
    theme: "{{YOUR-THEME-PREFERENCE}}",
    color: "{{YOUR-COLOR-PREFERENCE}}",
    language: "{{YOUR-LANGUAGE-OF-CHOICE}}",
    defaultAvatar: "{{URL-TO-YOUR-DEFAULT-AVATAR}}"

function comes with multiple options:

  • host: a URL pointing to your instance of GraphJS-Server that's either installed on-premise (c/o for an instructional video) or one that is hosted by (in which case the URL would be provided to you in the control panel)
  • theme: either 'light' or 'dark'
  • color: a string representing any color of your preference in HEX format
  • language: current available options are en-US (English), fr-FR (French) in beta and tr-TR (Turkish). For more translations and languages, see Translations section below.
  • defaultAvatar: either "gravatar" so all no-avatar accounts show with their Gravatar counterparts (if it exists) or a URL that points to your default avatar in png, gif or jpeg formats.

For more Information/Options/Examples, please go to GraphJS official Documentation

Testing and Development

You can try your custom tags simply by editing the html files in the

directory. The files are self-explanatory, indicating what parts are to edit.

To test and develop, run

npm run watch
command. This command will start watching the library files, and the files in the test folder will be served automatically on your browser.


Translation files can be found in the directory /lib/language. They are standard json files. Please make a pull request on our Github repo for us to include your contributions in the master branch.

To fetch the latest translations, run

git submodule foreach 'git pull origin master'

Conditional Building

If you're only using a certain parts of the Graph.js library, then the full compiled edition may be too bloated/heavy for your goals. As of version 1.18, Graph.js comes with a new feature that allows you to build a graph.js file with only the modules that you'd need. To achieve this, build it as follows:

modules=authentication,feed npm run build

where modules can be one or a combination of:

  • blog
  • comments
  • feed
  • forum
  • groups
  • members
  • messages
  • notifications
  • profile
  • star
  • private
  • stripe

Obviously, less modules you use, lighter the library becomes. Authentication is a common module that's always included.

Tips & Tricks

  • JS: it's the
    call which ensures that the "widget" is updated once the session status changes. See: private-content.tag for more information.
  • CSS: To disable highlighting, use .disable-selection
  • CSS: see the usage of .graphjs-loading and .graphjs-blocked classes in
  • CSS: all tags to start with .graphjs-element. There is also .graphjs-root which is not CSS neutral.
  • CSS: .graphjs-wallet for lists


Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]



Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]


GNU Affero General Public License v3.0, see LICENSE.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.