Skip to content
Branch: master
Find file History
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets Set up @gitgraph/js package Mar 26, 2019
src Customize how we render branches labels Apr 18, 2019 Update Changelogs Apr 16, 2019 Add "How to migrate from gitgraph.js" guide Apr 6, 2019
package.json Update changelog commands to run on publish Apr 16, 2019
rollup.config.js Set up @gitgraph/js package Mar 26, 2019


version Changelog

Draw pretty git graphs with vanilla JS.

This is the vanilla JS rendering library of GitGraph.js.

If you're coming from gitgraph.js package

Here's a guide to help you migrate to @gitgraph/js.

Get started

You need to have npm installed.

Install the package with npm: npm i --save @gitgraph/js

Now you can use createGitgraph to render your graph in a DOM element:

<!DOCTYPE html>
  <!-- DOM element in which we'll mount our graph -->
  <div id="#graph-container"></div>
const { createGitgraph } = require("@gitgraph/js");

// Get the graph container HTML element.
const graphContainer = document.getElementById("graph-container");

// Instantiate the graph.
const gitgraph = createGitgraph(graphContainer);

// Simulate git commands with Gitgraph API.
const master = gitgraph.branch("master");
master.commit("Initial commit");

const develop = gitgraph.branch("develop");
develop.commit("Add TypeScript");

const aFeature = gitgraph.branch("a-feature");
  .commit("Make it work")
  .commit("Make it right")
  .commit("Make it fast");

develop.commit("Prepare v1");


This code will render the following graph:

Example of usage

More examples

A bunch of scenarios has been simulated in our Storybook. You can give them a look 👀

You can’t perform that action at this time.