> For the complete documentation index, see [llms.txt](https://mcanam.gitbook.io/iblize-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mcanam.gitbook.io/iblize-docs/master.md).

# Getting Started

## Include Iblize on your project

directly using CDN

```markup
<script src="https://unpkg.com/iblize/dist/iblize.js"></script>
```

or install from NPM

```bash
$ npm install iblize --save
```

or manually download from [here](https://github.com/mcanam/iblize/archive/refs/tags/v2.0.1.zip)

## **Create editor container**

**I**blize need a div container to hold all elements

```markup
<div id="editor"></div>
```

then set the container width and height. you can also use inline style

```css
#editor { width: 100%; height: 400px }
```

## **Create initialization**

the first argument can be a string selector or an dom element

```javascript
// use selector
const iblize = new Iblize("#editor");

// use dom element
const iblize = new Iblize(document.querySelector("#editor"));
```

the second argument is options.

```javascript
const iblize = new Iblize("#editor", {
    language: "html",
    // etc
});
```

[see all options](https://mcanam.gitbook.io/iblize-docs/options-list)

## **Set editor default value (optional)**

you can set editor value programmatically with javascript

```javascript
iblize.setValue("console.log('Hello World')");
```

or directly from html (value must be wrapped with comment tag)

```markup
<div id="editor"><!--<h1>Hello World</h1>--></div>
```

## **Listening change**

listen when the editor value changes

```javascript
iblize.onUpdate((value) => {
  // do anything with value
});
```

done <img src="https://github.githubassets.com/images/icons/emoji/unicode/1f44c.png" alt="ok_hand" data-size="line">. if you find bug or if you have a cool idea please [tell me](https://github.com/mcanam/iblize/issues)