TypeScript icon, indicating that this package has built-in type declarations

1.2.4 • Public • Published


Super small and simple code editor inspired by CodeFlask.js.

  • Includes Typescript typings.
  • Plays nice with babel/ES5 projects.
  • Only Just 11kb gzipped (including PrismJS dependency and styles).
  • Supports HTML, JSX, JSON, Typescript, CSS, LESS & SASS out of the box.
  • Line number support is also included in the bundle.

Install (Browser)

  1. Include the editor CDN in your <head> tag.
<script src=""></script>
  1. Include a theme from cdnjs for PrismJS 1.9.0 in your head tag.
<link rel="stylesheet" href="" />

Install (Webpack / Browserify / etc)

  1. Install this lib from npm.
npm i nano-editor --save
  1. Import the lib and a prismjs theme into your project.
import { nanoEditor } from "nano-editor";
import "prismjs/themes/prism.css";

Usage / API

The new nanoEditor() method accepts three arguments:

  1. Element: Id or HTML element to attach the editor to.
  2. Type: The type of code being displayed, defalts to markdown.
  3. Line Numbers: Pass in true to see line numbers.

Once you've setup an instance, there are a few public methods you can use:

.onChange(changeFunction: (value: string) => void)

Accepts a single function as it's argument, the function will get called each time the editor is updated. The function will also have the editor's value passed into it.

.setLanguage(language: string)

Change the language of the editor.

.setValue(value: string)

Sets the contents of the editor.

.canEdit(yesOrNo: boolean)

Set the element as editable or not.


The HTML element the editor is attached to.


<div id="#code">
    alert("Dont taze me bro.");
    const editor = new nanoEditor("#code", "javascript", true);
    editor.setValue("alert(\"Don't move BRO!\")");

Package Sidebar


npm i nano-editor

Weekly Downloads






Unpacked Size

69.3 kB

Total Files


Last publish


  • clicksimply