[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70619":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":16,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":19,"hasPages":19,"topics":21,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":16,"starSnapshotCount":16,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},70619,"pell","jaredreich\u002Fpell","jaredreich","📝 the simplest and smallest WYSIWYG text editor for web, with no dependencies","",null,"JavaScript",12055,547,152,53,0,43.22,"MIT License",false,"master",[22,23,24,25,26,27,28,29],"contenteditable","editor","javascript","rich-text-editor","text-editing","text-editor","wysiwyg","wysiwyg-editor","2026-06-12 02:02:35","#### [v2 working branch](https:\u002F\u002Fgithub.com\u002Fjaredreich\u002Fpell\u002Ftree\u002Fv2) and [v2 project board](https:\u002F\u002Fgithub.com\u002Fjaredreich\u002Fpell\u002Fprojects\u002F1)\n\n---\n\n\u003Cimg src=\".\u002Fimages\u002Flogo.png\" width=\"128\" alt=\"Logo\">\n\n[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fpell.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fpell)\n[![cdnjs](https:\u002F\u002Fimg.shields.io\u002Fcdnjs\u002Fv\u002Fpell.svg)](https:\u002F\u002Fcdnjs.com\u002Flibraries\u002Fpell)\n\n> pell is the simplest and smallest WYSIWYG text editor for web, with no dependencies\n\n![Demo](\u002Fdemo.gif?raw=true \"Demo\")\n\n## Comparisons\n\n| library       | size (min+gzip) | size (min) | jquery | bootstrap | react | link |\n|---------------|-----------------|------------|--------|-----------|-------|------|\n| pell          | 1.38kB          | 3.54kB     |        |           |       | https:\u002F\u002Fgithub.com\u002Fjaredreich\u002Fpell |\n| squire        | 16kB            | 49kB       |        |           |       | https:\u002F\u002Fgithub.com\u002Fneilj\u002FSquire |\n| medium-editor | 27kB            | 105kB      |        |           |       | https:\u002F\u002Fgithub.com\u002Fyabwe\u002Fmedium-editor |\n| quill         | 43kB            | 205kB      |        |           |       | https:\u002F\u002Fgithub.com\u002Fquilljs\u002Fquill |\n| trix          | 47kB            | 204kB      |        |           |       | https:\u002F\u002Fgithub.com\u002Fbasecamp\u002Ftrix |\n| ckeditor      | 163kB           | 551kB      |        |           |       | https:\u002F\u002Fckeditor.com |\n| trumbowyg     | 8kB             | 23kB       | x      |           |       | https:\u002F\u002Fgithub.com\u002FAlex-D\u002FTrumbowyg |\n| summernote    | 26kB            | 93kB       | x      | x         |       | https:\u002F\u002Fgithub.com\u002Fsummernote\u002Fsummernote |\n| draft         | 46kB            | 147kB      |        |           | x     | https:\u002F\u002Fgithub.com\u002Ffacebook\u002Fdraft-js |\n| froala        | 52kB            | 186kB      | x      |           |       | https:\u002F\u002Fgithub.com\u002Ffroala\u002Fwysiwyg-editor |\n| tinymce       | 157kB           | 491kB      | x      |           |       | https:\u002F\u002Fgithub.com\u002Ftinymce\u002Ftinymce |\n\n## Features\n\n* Pure JavaScript, no dependencies, written in ES6\n* Easily customizable with the sass file (pell.scss) or overwrite the CSS\n\nIncluded actions:\n- Bold\n- Italic\n- Underline\n- Strike-through\n- Heading 1\n- Heading 2\n- Paragraph\n- Quote\n- Ordered List\n- Unordered List\n- Code\n- Horizontal Rule\n- Link\n- Image\n\nOther available actions (listed at https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAPI\u002FDocument\u002FexecCommand):\n- Justify Center\n- Justify Full\n- Justify Left\n- Justify Right\n- Subscript\n- Superscript\n- Font Name\n- Font Size\n- Indent\n- Outdent\n- Clear Formatting\n- Undo\n- Redo\n\nOr create any custom action!\n\n## Browser Support\n\n* IE 9+ (theoretically, but good luck)\n* Chrome 5+\n* Firefox 4+\n* Safari 5+\n* Opera 11.6+\n\n## Installation\n\n#### npm:\n\n```bash\nnpm install --save pell\n```\n\n#### HTML:\n\n```html\n\u003Chead>\n  ...\n  \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"https:\u002F\u002Funpkg.com\u002Fpell\u002Fdist\u002Fpell.min.css\">\n  \u003Cstyle>\n    \u002F* override styles here *\u002F\n    .pell-content {\n      background-color: pink;\n    }\n  \u003C\u002Fstyle>\n\u003C\u002Fhead>\n\u003Cbody>\n  ...\n  \u003C!-- Bottom of body -->\n  \u003Cscript src=\"https:\u002F\u002Funpkg.com\u002Fpell\">\u003C\u002Fscript>\n\u003C\u002Fbody>\n```\n\n## Usage\n\n#### API\n\n```js\n\u002F\u002F ES6\nimport pell from 'pell'\n\u002F\u002F or\nimport { exec, init } from 'pell'\n```\n\n```js\n\u002F\u002F Browser\npell\n\u002F\u002F or\nwindow.pell\n```\n\n```js\n\u002F\u002F Initialize pell on an HTMLElement\npell.init({\n  \u002F\u002F \u003CHTMLElement>, required\n  element: document.getElementById('some-id'),\n\n  \u002F\u002F \u003CFunction>, required\n  \u002F\u002F Use the output html, triggered by element's `oninput` event\n  onChange: html => console.log(html),\n\n  \u002F\u002F \u003Cstring>, optional, default = 'div'\n  \u002F\u002F Instructs the editor which element to inject via the return key\n  defaultParagraphSeparator: 'div',\n\n  \u002F\u002F \u003Cboolean>, optional, default = false\n  \u002F\u002F Outputs \u003Cspan style=\"font-weight: bold;\">\u003C\u002Fspan> instead of \u003Cb>\u003C\u002Fb>\n  styleWithCSS: false,\n\n  \u002F\u002F \u003CArray[string | Object]>, string if overwriting, object if customizing\u002Fcreating\n  \u002F\u002F action.name\u003Cstring> (only required if overwriting)\n  \u002F\u002F action.icon\u003Cstring> (optional if overwriting, required if custom action)\n  \u002F\u002F action.title\u003Cstring> (optional)\n  \u002F\u002F action.result\u003CFunction> (required)\n  \u002F\u002F Specify the actions you specifically want (in order)\n  actions: [\n    'bold',\n    {\n      name: 'custom',\n      icon: 'C',\n      title: 'Custom Action',\n      result: () => console.log('Do something!')\n    },\n    'underline'\n  ],\n\n  \u002F\u002F classes\u003CArray[string]> (optional)\n  \u002F\u002F Choose your custom class names\n  classes: {\n    actionbar: 'pell-actionbar',\n    button: 'pell-button',\n    content: 'pell-content',\n    selected: 'pell-button-selected'\n  }\n})\n\n\u002F\u002F Execute a document command, see reference:\n\u002F\u002F https:\u002F\u002Fdeveloper.mozilla.org\u002Fen\u002Fdocs\u002FWeb\u002FAPI\u002FDocument\u002FexecCommand\n\u002F\u002F this is just `document.execCommand(command, false, value)`\npell.exec(command\u003Cstring>, value\u003Cstring>)\n```\n\n#### List of overwriteable action names\n- bold\n- italic\n- underline\n- strikethrough\n- heading1\n- heading2\n- paragraph\n- quote\n- olist\n- ulist\n- code\n- line\n- link\n- image\n\n## Examples\n\n#### General\n\n```html\n\u003Cdiv id=\"editor\" class=\"pell\">\u003C\u002Fdiv>\n\u003Cdiv>\n  HTML output:\n  \u003Cdiv id=\"html-output\" style=\"white-space:pre-wrap;\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n```js\nimport { exec, init } from 'pell'\n\nconst editor = init({\n  element: document.getElementById('editor'),\n  onChange: html => {\n    document.getElementById('html-output').textContent = html\n  },\n  defaultParagraphSeparator: 'p',\n  styleWithCSS: true,\n  actions: [\n    'bold',\n    'underline',\n    {\n      name: 'italic',\n      result: () => exec('italic')\n    },\n    {\n      name: 'backColor',\n      icon: '\u003Cdiv style=\"background-color:pink;\">A\u003C\u002Fdiv>',\n      title: 'Highlight Color',\n      result: () => exec('backColor', 'pink')\n    },\n    {\n      name: 'image',\n      result: () => {\n        const url = window.prompt('Enter the image URL')\n        if (url) exec('insertImage', url)\n      }\n    },\n    {\n      name: 'link',\n      result: () => {\n        const url = window.prompt('Enter the link URL')\n        if (url) exec('createLink', url)\n      }\n    }\n  ],\n  classes: {\n    actionbar: 'pell-actionbar-custom-name',\n    button: 'pell-button-custom-name',\n    content: 'pell-content-custom-name',\n    selected: 'pell-button-selected-custom-name'\n  }\n})\n\n\u002F\u002F editor.content\u003CHTMLElement>\n\u002F\u002F To change the editor's content:\neditor.content.innerHTML = '\u003Cb>\u003Cu>\u003Ci>Initial content!\u003C\u002Fi>\u003C\u002Fu>\u003C\u002Fb>'\n```\n\n#### Example (Markdown)\n\n```html\n\u003Cdiv id=\"editor\" class=\"pell\">\u003C\u002Fdiv>\n\u003Cdiv>\n  Markdown output:\n  \u003Cdiv id=\"markdown-output\" style=\"white-space:pre-wrap;\">\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n```\n\n```js\nimport { init } from 'pell'\nimport Turndown from 'turndown'\n\nconst { turndown } = new Turndown({ headingStyle: 'atx' })\n\ninit({\n  element: document.getElementById('editor'),\n  actions: ['bold', 'italic', 'heading1', 'heading2', 'olist', 'ulist'],\n  onChange: html => {\n    document.getElementById('markdown-output').innerHTML = turndown(html)\n  }\n})\n```\n\n#### Frameworks\n\n- [React](\u002Fexamples\u002Freact.md)\n- [Vue](\u002Fexamples\u002Fvue.md)\n\n## Custom Styles\n\n#### SCSS\n\n```scss\n$pell-content-height: 400px;\n\u002F\u002F See all overwriteable variables in src\u002Fpell.scss\n\n\u002F\u002F Then import pell.scss into styles:\n@import '..\u002F..\u002Fnode_modules\u002Fpell\u002Fsrc\u002Fpell';\n```\n\n#### CSS\n\n```css\n\u002F* After pell styles are applied to DOM: *\u002F\n.pell-content {\n  height: 400px;\n}\n```\n\n## License\n\nMIT\n\n## Credits\n\nBrowserStack for cross browser testing:\n\n\u003Ca href=\"https:\u002F\u002Fwww.browserstack.com\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cimg width=\"128\" src=\".\u002Fimages\u002Fbrowserstack.png\" alt=\"BrowserStack logo\">\u003C\u002Fa>\n","pell 是一个极其简单且轻量级的网页 WYSIWYG 文本编辑器，没有任何外部依赖。它使用纯 JavaScript 编写，并支持 ES6 语法，允许用户通过 Sass 文件或直接覆盖 CSS 来轻松自定义样式。核心功能包括常见的文本格式化选项如加粗、斜体、下划线等，以及更高级的功能如插入链接和图片。此外，还支持创建自定义操作。由于其体积小巧（压缩后仅1.38kB）和无依赖的特点，pell 非常适合需要快速集成富文本编辑功能但又不想增加额外负担的小型项目或页面中使用。",2,"2026-06-11 03:33:03","high_star"]