Holochain playground that simulates real life holochain behaviour

Usage no npm install needed!

<script type="module">
  import holochainPlayground from 'https://cdn.skypack.dev/holochain-playground';


Holochain Playground

Visit the playground.

This is an experimental ongoing effort to build a holochain playground simulation. It's trying to follow as accurately as possible the internal mechanisms of holochain, displaying the DHT and enabling detailed inspection.

This package is distributed as an NPM package component library, in the form of a collection of web-components build with the Custom Elements API.

Library Usage

  1. Install the package with npm i holochain-playground .
  2. Import the holochain-playground-container in your application like this:
import "holochain-playground/elements/holochain-playground-container";
  1. Declare the <holochain-playground-container></holochain-playground-container> element:
    <holochain-playground-container id="playground"></holochain-playground-container>

This is the fundamental element for the playground to work, as it provides the state for all other elements you declare inside it.

  1. Import any elements you want from the library, and declare them inside the holochain-playground-container :
import 'holochain-playground/elements/holochain-playground-dht-graph'
    <holochain-playground-container id="playground">
  1. Optionally, set the conductor urls to the nodes you want to bind the playground to:
    <holochain-playground-container id="playground"></holochain-playground-container>

        const playground = document.getElementById("playground");
        playground.initialPlayground = {
            conductorUrls: ["ws://localhost:33000"];

Elements Library

In the future, this will be shown with storybook.

Technical data display

  • holochain-playground-dht-graph
  • holochain-playground-dht-stats
  • holochain-playground-dht-shard
  • holochain-playground-entry-detail
  • holochain-playground-entry-graph
  • holochain-playground-source-chain


  • holochain-playground-conductor-detail
  • holochain-playground-create-entries
  • holochain-playground-import-export
  • holochain-playground-connect-to-nodes
  • holochain-playground-select-dna