{"id":51503854,"url":"https://github.com/neikiri/neiki-code-editor","last_synced_at":"2026-07-07T22:30:57.828Z","repository":{"id":363654333,"uuid":"1230396393","full_name":"neikiri/neiki-code-editor","owner":"neikiri","description":"Lightweight embeddable code editor Web Component with syntax highlighting, themes, line numbers, search, minimap and fullscreen mode.","archived":false,"fork":false,"pushed_at":"2026-06-09T19:17:38.000Z","size":265,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-09T21:12:36.568Z","etag":null,"topics":["browser","cdn","code-editor","css","custom-element","editor","embeddable","frontend","html","javascript","json","lightweight","markdown","shadow-dom","syntax-highlighting","vanilla-javascript","web-component","zero-dependencies"],"latest_commit_sha":null,"homepage":"https://neikiri.dev/code-editor","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/neikiri.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-05-06T00:44:58.000Z","updated_at":"2026-06-09T19:22:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/neikiri/neiki-code-editor","commit_stats":null,"previous_names":["neikiri/neiki-code-editor"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/neikiri/neiki-code-editor","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neikiri%2Fneiki-code-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neikiri%2Fneiki-code-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neikiri%2Fneiki-code-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neikiri%2Fneiki-code-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/neikiri","download_url":"https://codeload.github.com/neikiri/neiki-code-editor/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/neikiri%2Fneiki-code-editor/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":35245324,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-07-07T02:00:07.222Z","response_time":90,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browser","cdn","code-editor","css","custom-element","editor","embeddable","frontend","html","javascript","json","lightweight","markdown","shadow-dom","syntax-highlighting","vanilla-javascript","web-component","zero-dependencies"],"created_at":"2026-07-07T22:30:57.146Z","updated_at":"2026-07-07T22:30:57.818Z","avatar_url":"https://github.com/neikiri.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"img/logo.png\" alt=\"Neiki's Code Editor\" width=\"620\"\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eNeiki's Code Editor\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge\u0026logo=html5\u0026logoColor=white\" alt=\"HTML5\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/css-%23663399.svg?style=for-the-badge\u0026logo=css\u0026logoColor=white\" alt=\"CSS\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge\u0026logo=javascript\u0026logoColor=%23F7DF1E\" alt=\"JavaScript\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Web%20Components-29ABE2?style=for-the-badge\u0026logo=webcomponents.org\u0026logoColor=white\" alt=\"Web Components\"\u003e\n  \u003cbr\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-2563EB?style=for-the-badge\u0026logo=open-source-initiative\u0026logoColor=white\u0026labelColor=000F15\u0026logoWidth=20\" alt=\"License\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Version-1.0.0-2563EB?style=for-the-badge\u0026logo=semantic-release\u0026logoColor=white\u0026labelColor=000F15\u0026logoWidth=20\" alt=\"Version\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cb\u003eLightweight Embeddable Code Editor\u003c/b\u003e\u003cbr\u003e\n  \u003ci\u003eVanilla JavaScript Web Component with syntax highlighting, themes, search, line numbers, minimap and fullscreen mode.\u003c/i\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Languages-5%20Supported-3b82f6?style=flat\u0026labelColor=383C43\" alt=\"Languages\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Setup-Zero%20Config-22c55e?style=flat\u0026labelColor=383C43\" alt=\"Zero Config\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Dependencies-None-f97316?style=flat\u0026labelColor=383C43\" alt=\"No Dependencies\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Frameworks-None-ef4444?style=flat\u0026labelColor=383C43\" alt=\"No Frameworks\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://sourceforge.net/projects/neiki-code-editor/files/latest/download\"\u003e\u003cimg alt=\"Download Neiki\u0026#39;s Code Editor\" src=\"https://a.fsdn.com/con/app/sf-download-button\" width=276 height=48 srcset=\"https://a.fsdn.com/con/app/sf-download-button?button_size=2x 2x\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\n---\n\n\u003cimg src=\"img/preview.png\" width=\"900px\" alt=\"Neiki's Code Editor preview\"\u003e\n\n---\n\n**Live version:** [https://neikiri.dev/code-editor](https://neikiri.dev/code-editor)\n\n---\n\n## ✨ Features\n\n- **Vanilla JavaScript only** — no frameworks, packages, bundlers or build tools.\n- **Web Components API** — works as a native custom element.\n- **Shadow DOM** — isolated styling with no global CSS leakage.\n- **Syntax highlighting** — supports JavaScript, HTML, CSS, JSON and Markdown.\n- **Editable code area** — smooth typing experience with polished cursor behavior.\n- **Line numbers** — optional line numbering with active line indication.\n- **Themes** — built-in dark and light themes inspired by modern developer tools.\n- **Keyboard friendly** — tab support, auto indentation and common shortcuts.\n- **Auto closing brackets** — supports `()`, `{}`, `[]`, `\"\"` and `''`.\n- **Search** — basic in-editor search with keyboard navigation.\n- **Copy button** — quickly copy the current editor content.\n- **Readonly mode** — useful for documentation, examples and snippets.\n- **Responsive layout** — works well on desktop and mobile browsers.\n- **Minimap support** — optional visual overview for longer snippets.\n- **Fullscreen mode** — optional distraction-free editing.\n\n---\n\n## 🚀 Quick Start\n\nRecommended CDN installation:\n\n```html\n\u003cscript src=\"https://cdn.neikiri.dev/neiki-code-editor/neiki-code-editor.min.js\"\u003e\u003c/script\u003e\n```\n\nThis is the recommended production build. It includes the minified JavaScript and the minified default CSS inside a single file.\n\nYou can also use the readable CDN build:\n\n```html\n\u003cscript src=\"https://cdn.neikiri.dev/neiki-code-editor/neiki-code-editor.js\"\u003e\u003c/script\u003e\n```\n\nIf you want easier theme customization, you can optionally load the external CSS file too:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.neikiri.dev/neiki-code-editor/neiki-code-editor.css\"\u003e\n\u003cscript src=\"https://cdn.neikiri.dev/neiki-code-editor/neiki-code-editor.js\"\u003e\u003c/script\u003e\n```\n\nOr use a local copy:\n\n```html\n\u003cscript src=\"neiki-code-editor.js\"\u003e\u003c/script\u003e\n```\n\nUse the custom element directly in your markup:\n\n```html\n\u003cneiki-code-editor language=\"javascript\" theme=\"dark\"\u003e\nconsole.log(\"Hello world\");\n\u003c/neiki-code-editor\u003e\n```\n\nThe component is registered automatically when the script loads.\n\n---\n\n## 🎨 Optional Custom Styling\n\nThe editor includes default styles automatically. You can also load the optional stylesheet to make customization easier:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"neiki-code-editor.css\"\u003e\n\u003cscript src=\"neiki-code-editor.js\"\u003e\u003c/script\u003e\n```\n\nYou can customize the editor with CSS custom properties:\n\n```css\nneiki-code-editor {\n  --nce-bg: #282c34;\n  --nce-fg: #abb2bf;\n  --nce-keyword: #c678dd;\n  --nce-string: #98c379;\n  font-size: 15px;\n}\n```\n\n---\n\n## 🧩 Component API\n\n### Attributes\n\n| Attribute | Description |\n| --- | --- |\n| `language` | Sets syntax highlighting language: `javascript`, `html`, `css`, `json`, `markdown`. |\n| `theme` | Sets the theme: `dark` or `light`. |\n| `readonly` | Makes the editor non-editable. |\n| `line-numbers` | Controls line numbers. Use `false` to hide them. |\n| `minimap` | Enables the optional minimap. |\n| `fullscreen` | Enables fullscreen display. |\n\n### Methods\n\n| Method | Description |\n| --- | --- |\n| `getValue()` | Returns the current editor value. |\n| `setValue(value)` | Replaces the current editor value. |\n| `focus()` | Focuses the editor. |\n| `format()` | Formats supported content, currently JSON. |\n\n### Events\n\n| Event | Description |\n| --- | --- |\n| `change` | Fired when the editor value changes. Includes `event.detail.value`. |\n| `focus` | Fired when the editor receives focus. |\n| `blur` | Fired when the editor loses focus. |\n\n---\n\n## 🌐 Global API\n\nNeiki's Code Editor exposes a small global API:\n\n```js\nwindow.NeikiCodeEditor\n```\n\nProgrammatic creation example:\n\n```js\nconst editor = window.NeikiCodeEditor.create(document.body, {\n  language: 'javascript',\n  theme: 'dark',\n  value: 'console.log(\"Hello world\");'\n});\n\nconsole.log(editor.getValue());\n```\n\nAccessing an existing editor:\n\n```js\nconst editor = document.querySelector('neiki-code-editor');\neditor.setValue('const message = \"Updated\";');\neditor.focus();\n```\n\n---\n\n## 💡 Usage Examples\n\n### JavaScript\n\n```html\n\u003cneiki-code-editor language=\"javascript\" theme=\"dark\"\u003e\nfunction greet(name) {\n  return `Hello, ${name}!`;\n}\n\u003c/neiki-code-editor\u003e\n```\n\n### JSON\n\n```html\n\u003cneiki-code-editor language=\"json\" theme=\"dark\"\u003e\n{\"name\":\"Neiki's Code Editor\",\"version\":\"1.0.0\"}\n\u003c/neiki-code-editor\u003e\n```\n\n### Readonly snippet\n\n```html\n\u003cneiki-code-editor language=\"css\" theme=\"light\" readonly\u003e\n.button {\n  border-radius: 8px;\n  padding: 0.75rem 1rem;\n}\n\u003c/neiki-code-editor\u003e\n```\n\n---\n\n## ♿ Accessibility \u0026 UX\n\n- **Native textarea input** keeps editing predictable and keyboard friendly.\n- **Accessible contrast** is used in both built-in themes.\n- **No iframe or canvas editing** keeps text selectable, searchable and copyable.\n- **Mobile scrolling** is optimized with touch-friendly overflow behavior.\n- **Shadow DOM isolation** prevents style conflicts with host pages.\n\n---\n\n## 🔒 Security Notes\n\nNeiki's Code Editor is a client-side component. It does not use `eval`, does not execute edited code and does not require a backend. Highlighted output is generated with escaped user content to reduce XSS risk.\n\n---\n\n## 📄 License\n\nThis project is licensed under the **MIT License** — see the [LICENSE](LICENSE) file for details.\n\n---\n\n## 👨‍💻 Author\n\n**neikiri**\nGitHub: https://github.com/neikiri\n\n---\n\n## 📬 Contact\n\n📧 Email: neikiri@neikiri.dev\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneikiri%2Fneiki-code-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fneikiri%2Fneiki-code-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fneikiri%2Fneiki-code-editor/lists"}