open-index/open-npm huggingface dataset:
npm package: @holochain-open-dev/profiles
Description: Frontend module for the Holochain hc_zome_profiles zomes
Author: guillem.cordoba@gmail.com
Latest version: 0.601.3

# @holochain-open-dev/profiles

Frontend module for the Holochain zome pair [hc_zome_profiles_integrity](https://docs.rs/hc_zome_profiles_integrity) and [hc_zome_profiles_coordinator](https://docs.rs/hc_zome_profiles_coordinator).

This package includes types, a client and a store, and a collection of Custom Elements to build Holochain applications that automatically connect and interact with the profiles zome. 

Read about how to include both the zome and this frontend module in your application here:

- https://holochain-open-dev.github.io/profiles
npm package: @holochain-open-dev/reactions
Description: Frontend module for the Holochain hc_zome_reactions zome
Author: guillem.cordoba@gmail.com
Latest version: 0.0.1

# @holochain-open-dev/reactions

Frontend module for the Holochain zome `hc_zome_reactions`.

This package includes types, a service and a store, and a collection of Custom Elements to build Holochain applications that automatically connect and interact with the `hc_zome_reactions` zome. 

By using [Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements), this package exports frontend blocks reusable in any framework, that make it really easy for consuming web applications to include functionality to create and update reactions, or search for an agent in the DHT.

Read about how to include both the zome and this frontend module in your application here:

- https://holochain-open-dev.github.io/reactions
npm package: @holochain-playground/cli
Description: CLI tool that boots up the holochain playground to connect to a real running Holochain conductor
Author: guillem.cordoba@gmail.com
Latest version: 0.300.1

# @holochain-playground/cli

Small CLI utility to run the [Holochain Playground](https://holochain-playground.github.io/) connected to a real Holochain conductor.

This is useful as an introspection tool, to understand what's really going on in your Holochain node.

## Running directly pointing to a running conductor

```bash
npx @holochain-playground/cli ws://localhost:8888 ws://localhost:8889
```

This URL should point to the Admin interfaces of the conductors.

## Setting up in an NPM hApp development environment that uses `hc sandbox`

If you run this CLI from the same folder from which you run your hc sandboxes, it will automatically connect with the conductors that are live.

1. Install the CLI with:

```bash
npm install -D @holochain-playground/cli
```

2. Add a `playground` script in your `package.json`:

```json
{
    ...
    "scripts": {
        "start": "concurrently \"npm run start:hc\" \"npm run playground\"",
        "start:hc": "hc s generate --run=8888",
        "playground": "holochain-playground"
    }
}
```

Now, when you run `npm start`, it will bring up the playground connected to the conductor.
npm package: @holochain-playground/elements
Description: Holochain playground elements for visual introspection and simulator interaction
Author: guillem.cordoba@gmail.com
Latest version: 0.400.12

# Holochain Playground

Visit the [playground](https://darksoil.studio/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](https://npmjs.com/package/holochain-playground), in the form of a collection of web-components build with the [Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements) API.

## Library Usage

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

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

3. Declare the `<holochain-playground-provider></holochain-playground-provider>` element:

``` html
<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.

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

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

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

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

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

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

## 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`

### Utilities
- `holochain-playground-conductor-detail`
- `holochain-playground-create-entries`
- `holochain-playground-import-export`
- `holochain-playground-connect-to-nodes`
- `holochain-playground-select-dna`
npm package: @holochain-playground/golden-layout
Description: Holochain playground golden-layout helpers
Author: guillem.cordoba@gmail.com
Latest version: 0.1.1

# Holochain Playground

Visit the [playground](https://holochain-open-dev.github.io/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](https://npmjs.com/package/holochain-playground), in the form of a collection of web-components build with the [Custom Elements](https://developers.google.com/web/fundamentals/web-components/customelements) API.

## Library Usage

1. Install the package with `npm i holochain-playground` .
2. Import the `holochain-playground-provider` in your application like this:

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

3. Declare the `<holochain-playground-provider></holochain-playground-provider>` element:

``` html
<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.

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

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

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

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

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

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

## 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`

### Utilities
- `holochain-playground-conductor-detail`
- `holochain-playground-create-entries`
- `holochain-playground-import-export`
- `holochain-playground-connect-to-nodes`
- `holochain-playground-select-dna`