Simple Javascript Clean Code Editor Library | iblize

IBLIZE is a simple JavaScript code editor library that supports more than 250+ languages.

atom code editor, best code editor 2022 code editor free, code editor download, online code editor, vs code editor


  • Highlight installation.
  • Mobile compatible.
  • 6 beautiful themes.
  • Supports more than 250 languages.
  • line number.
  • Read-only mode.
  • Custom tab size.
  • Automatic closing bracket and citation.
  • The new line is indented automatically.
  • Undo and redo functions.

How to make use of it:

1. Load the iblize.css and iblize.js files within the doc.

<link rel="stylesheet" href="dist/iblize.css" />
<script src="dist/iblize.js"></script>

2. Or set up & import the iblize with NPM.

$ npm i iblize --save
import Iblize from "iblize";
import "iblize/dist/iblize.css";

3. Initialize the iblize to create a default JavaScript code editor.

<div id="editor"></div>
const iblize = new Iblize("#editor");

4. Specify the language. You can discover all supported languages under the ./dist/languages folder.

const iblize = new Iblize("#editor",{
      language: 'css'

5. Determine whether to indicate line numbers.

const iblize = new Iblize("#editor",{
      lineNumber: false

6. Enable the Readonly mode.

const iblize = new Iblize("#editor",{
      readOnly: true

7. Customize the tab size.

const iblize = new Iblize("#editor",{
      tabSize: 4

8. Change the default theme.

const iblize = new Iblize("#editor",{
      theme: "iblize-light"

9. API strategies.

// get editor content

// set editor content and determine whether to record the value to history.
blize.setValue( value: String, record: Boolean);

// get/set options
  // options here

// get selection
// returns { start, end, dir }

// set selection
iblize.setSelection(start: Number, end: Number[, dir: String]);

// get the current cursor position

// set the cursor position
iblize.setCursor(pos: Number);

// get the current active line

// get total amount of lines

// get values from a specific line
iblize.getLineValue(line: Number);

// insert a tab

// insert text
iblize.insertText(from: Number, text: String [, options: Object]);

// remove text
iblize.removeText(from: Number, to: Number [, options: Object]);

// undo/redo

10. Execute a function when the editor updates.

iblize.onUpdate((value) => {
  // do something

Minimal Clean Code Editor,  IBLIZE Plugin/Github

See Demo And Download

Official Website(mcanam): Click Here

This superior jQuery/javascript plugin is developed by mcanam. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…