the simplest and smallest code editor for web, with no dependencies
- even smaller than its contemporaries (535 bytes of JavaScript, minified and gzipped)
- no-frills editing area (nothing except for line numbers)
- still customizable (use CSS variables, or write your own styles)
library | size (min+gzip) | size (min) |
---|---|---|
kell | 535B | 882B |
CodeJar | 2.33kB | 5.21kB |
CodeFlask | 8.27kB | 24.7kB |
EditArea | 29.4kB | 115kB |
CodeMirror 5 | 57kB | 173kB |
Ace | 100kB | 367kB |
library | size (min+gzip) | size (min) |
---|---|---|
kell | 535B | 882B |
spell | 912B | 1.66kB |
pell | 1.37kB | 3.4kB |
<link rel="stylesheet" type="text/css" href="https://unpkg.com/kell/dist/kell.min.css">
<div id="container"></div>
<script src="https://unpkg.com/kell"></script>
<script>const editor = kell('editor', document.getElementById('container'))</script>
create a new kell component, and return it.
type: string
an ID to assign to the component.
type: Element
an element to append the component to.
type: string
getter & setter for the contents of the component's textarea
.
change the size:
/* maybe a little smaller... */
.kell {
width:500px;
height:250px;
}
change the colors:
/* how about a dark theme? */
:root {
--kell-gutter-bg:#222;
--kell-gutter-fg:#ccc;
--kell-content-bg:#333;
--kell-content-fg:#fff;
--kell-border:#555;
}
MIT
you can support the development of this project and others via Patreon: