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.
- Install the package with
npm i holochain-playground. - Import the
holochain-playground-providerin 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>In the future, this will be shown with storybook.
holochain-playground-dht-graphholochain-playground-dht-statsholochain-playground-dht-shardholochain-playground-entry-detailholochain-playground-entry-graphholochain-playground-source-chain
holochain-playground-conductor-detailholochain-playground-create-entriesholochain-playground-import-exportholochain-playground-connect-to-nodesholochain-playground-select-dna