A set of widgets for a meaningfully social web.
Clone or download
Latest commit 1a76449 Sep 29, 2018
Failed to load latest commit information.
dist updated dist files Sep 28, 2018
lib bugfix Sep 28, 2018
test minor fixes Sep 11, 2018
.babelrc Initial design & Riot tags Feb 27, 2018
.gitignore Enabled editing comments and forum replies Jun 12, 2018
LICENSE Create LICENSE Jun 25, 2018
README.md Update README.md Aug 27, 2018
package.json resolve dependency error Aug 31, 2018
webpack.config.js removed docs Aug 22, 2018



GraphJS is a Javascript client-side library to help developers easily enable social features on their web sites. GraphJS is built upon the Pho 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 graph.js 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.

The init function comes with three options:

  • host: a URL pointing to your instance of GraphJS-Server
  • theme: either 'light' or 'dark'
  • color: a string representing any color of your preference in HEX format


GraphJS.init("{{YOUR-PUBLIC-ID}}", {
        host:  "{{URL-OF-GRAPHJS-INSTANCE}}",
        theme: "{{YOUR-THEME-PREFERENCE}}",
        color: "{{YOUR-COLOR-PREFERENCE}}"


You can try your custom tags simply by editing the html files in the dist directory. The files are self-explanatory, indicating what parts are to edit.

To test, build your graph.js file as documented above.

Then, if you have Python 2 installed (like most Macs and Linux machines), run:

python -c "import SimpleHTTPServer; m = SimpleHTTPServer.SimpleHTTPRequestHandler.extensions_map; m[''] = 'text/plain'; m.update(dict([(k, v + ';charset=UTF-8') for k, v in m.items()])); SimpleHTTPServer.test();" 8080

This ensures that the HTTP server renders in proper format. If you don't have Python, use another UTF-8 capable HTTP server, and serve through port 8080 in order to avoid Access-Control errors.

Tips & Tricks

  • JS: it's the restart 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 https://github.com/phonetworks/graphjs/blob/master/lib/tags/profile-followers.tag
  • CSS: all tags to start with .graphjs-element. There is also .graphjs-root which is not CSS neutral.
  • CSS: .graphjs-wallet for lists


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