Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @patternfly/react-topology with all npm packages installed. Try it out:

require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactTopology = require("@patternfly/react-topology")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@patternfly/react-topology v4.3.5

This library provides a set of React topology view components for use with the PatternFly 4


This package provides Topology View components based on PatternFly 4


Node Environment

This project currently supports Node Active LTS releases. Please stay current with Node Active LTS when developing patternfly-react.

For example, to develop with Node 8, use the following:

nvm install 8
nvm use 8

This project also requires a Yarn version of >=1.6.0. The latest version can be installed here.


yarn add @patternfly/react-topology


npm install @patternfly/react-topology --save


It's strongly advised to use the PatternFly Base CSS in your whole project, or some components may diverge in appearance:

import '@patternfly/react-core/dist/styles/base.css';

Example Component Usage

import React from 'react';
 // TODO


This library makes use of the babel plugin from @patternfly/react-styles to enable providing the CSS alongside the components. This removes the need for consumers to use (style|css|sass)-loaders. For an example of using CSS from core you can reference Button.js. For any CSS not provided by core please use the StyleSheet.create utility from @patternfly/react-styles. This will prevent collisions with any consumers, and allow the CSS to be bundled with the component.


This project uses Gatsby. For an overview of the project structure please refer to the Gatsby documentation - Building with Components.

A comprehensive list of components and detailed usage of each can be found on the PatternFly React Docs website You can also find how each component is meant to be used from a design perspective on the PatternFly 4 Core website.

Note: All commands below assume you are on the root directory in this repository.


Run to install all the dependencies

yarn && yarn bootstrap && yarn build && yarn build:docs


yarn bootstrap && yarn build && yarn build:docs


To start the site locally.

yarn build && yarn start:pf4


To build the site.

yarn build:docs


yarn build


Testing is done at the root of this repo. To only run the @patternfly/react-topology tests:

yarn test packages/patternfly-4/react-topology
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free