@holochain-playground/elements NPM

Holochain 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

Install the package with npm i @holochain-playground/elements .
Import the holochain-playground-provider in your application like this:

import "holochain-playground/elements/holochain-playground-provider";

Declare the <holochain-playground-provider></holochain-playground-provider> element:

<body>
    <holochain-playground-provider id="playground"></holochain-playground-provider>
</body>

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

Import any elements you want from the library, and declare them inside the holochain-playground-provider :

import 'holochain-playground/elements/holochain-playground-dht-graph'

<body>
    <holochain-playground-provider id="playground">
        <holochain-playground-dht-graph></holochain-playground-dht-graph>
    </holochain-playground-provider>
</body>

Optionally, set the conductor urls to the nodes you want to bind the playground to:

<body>
    <holochain-playground-provider id="playground"></holochain-playground-provider>

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