### Install OpenChemLib JS

Source: https://github.com/cheminfo/openchemlib-js/blob/main/README.md

Install the OpenChemLib JS package using npm. This command downloads and installs the library and its dependencies.

```console
npm install openchemlib
```

--------------------------------

### Install Development Dependencies

Source: https://github.com/cheminfo/openchemlib-js/blob/main/README.md

Install all necessary dependencies for developing the OpenChemLib JS project. It is recommended to use 'npm ci' for consistent installations in development environments.

```console
npm ci
```

--------------------------------

### Empty Editor

Source: https://github.com/cheminfo/openchemlib-js/blob/main/examples/generic_editor/web_component.html

An empty <openchemlib-editor> instance.

```html
<openchemlib-editor></openchemlib-editor>
```

--------------------------------

### Registering the Web Component

Source: https://github.com/cheminfo/openchemlib-js/blob/main/examples/generic_editor/web_component.html

This snippet shows how to register the custom element for the OpenChemLib editor.

```javascript
import * as OCL from '../ocl.ts';

OCL.registerCustomElement();
```

--------------------------------

### Displaying a Reaction

Source: https://github.com/cheminfo/openchemlib-js/blob/main/examples/generic_editor/web_component.html

Displays a reaction using its RXN SMILES string in the <openchemlib-editor>.

```html
<openchemlib-editor value="gJX@@eKU@@ gGQHDHaImfh@!defH@DAIfUVjj`@#IGiYP``"></openchemlib-editor>
```

--------------------------------

### Displaying a Reaction Fragment

Source: https://github.com/cheminfo/openchemlib-js/blob/main/examples/generic_editor/web_component.html

Displays a reaction fragment using its RXN SMILES string in the <openchemlib-editor>.

```html
<openchemlib-editor value="gC`@Dij@qbS`D@!eMHAIhO?pi@ eF@HpZq`##!B_qL@Dw}l !B_vq?Dp !B@AL``"></openchemlib-editor>
```

--------------------------------

### Displaying a Reaction from IDCodeExplorer

Source: https://github.com/cheminfo/openchemlib-js/blob/main/examples/generic_editor/web_component.html

Displays a reaction loaded from IDCodeExplorer using its RXN SMILES string in the <openchemlib-editor>.

```html
<openchemlib-editor value="gOp@DjWkjj`@ gOp@DjWkjj`@!gOp@DjWkjj`@##!BbOvw?_x@?g?~_{_} !Bb@Jw@oy??`C~@K\B !Bb@K~_{\BbOvH?_y?##``"></openchemlib-editor>
```

--------------------------------

### Displaying a Molecule

Source: https://github.com/cheminfo/openchemlib-js/blob/main/examples/generic_editor/web_component.html

Displays a molecule using its SMILES string in the <openchemlib-editor>.

```html
<openchemlib-editor value="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@ !BKkwuyRHiWUXno_KjsTTIpbHiHbfAo]NR_s[rzftyT`VFhFoyZ?fAoPZR``"></openchemlib-editor>
```

--------------------------------

### Displaying a Molecule Fragment

Source: https://github.com/cheminfo/openchemlib-js/blob/main/examples/generic_editor/web_component.html

Displays a molecule fragment using its SMILES string in the <openchemlib-editor>.

```html
<openchemlib-editor value="dmt@@LdbRTQk``bh@OhgLqK?|Hr@ !B?g~H@k\BbOvH?[]}b@K~_x`Bm?t```"></openchemlib-editor>
```

--------------------------------

### Displaying a Read-Only Reaction

Source: https://github.com/cheminfo/openchemlib-js/blob/main/examples/generic_editor/web_component.html

Displays a reaction in read-only mode using its RXN SMILES string in the <openchemlib-editor>.

```html
<openchemlib-editor value="gJX@@eKU@@ gGQHDHaImfh@!defH@DAIfUVjj`@#IGiYP``" readonly></openchemlib-editor>
```

--------------------------------

### Displaying a Read-Only Molecule

Source: https://github.com/cheminfo/openchemlib-js/blob/main/examples/generic_editor/web_component.html

Displays a molecule in read-only mode using its SMILES string in the <openchemlib-editor>.

```html
<openchemlib-editor value="ffc`P@H`QxNQQJJIJIZJHiSkQSejB`jFjhhaEqFUh@ !BKkwuyRHiWUXno_KjsTTIpbHiHbfAo]NR_s[rzftyT`VFhFoyZ?fAoPZR``" readonly></openchemlib-editor>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.