{"id":13422161,"url":"https://github.com/react-simple-code-editor/react-simple-code-editor","last_synced_at":"2025-05-14T04:00:24.663Z","repository":{"id":38360257,"uuid":"138179583","full_name":"react-simple-code-editor/react-simple-code-editor","owner":"react-simple-code-editor","description":"Simple no-frills code editor with syntax highlighting","archived":false,"fork":false,"pushed_at":"2024-07-04T22:56:33.000Z","size":1861,"stargazers_count":1678,"open_issues_count":47,"forks_count":168,"subscribers_count":10,"default_branch":"main","last_synced_at":"2025-05-09T01:44:36.629Z","etag":null,"topics":["editor","hacktoberfest","react"],"latest_commit_sha":null,"homepage":"https://react-simple-code-editor.github.io/react-simple-code-editor/","language":"TypeScript","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/react-simple-code-editor.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-06-21T14:15:50.000Z","updated_at":"2025-05-07T07:28:58.000Z","dependencies_parsed_at":"2024-04-09T13:09:43.981Z","dependency_job_id":"fb37c711-7439-43d6-9840-44d919b0755f","html_url":"https://github.com/react-simple-code-editor/react-simple-code-editor","commit_stats":{"total_commits":128,"total_committers":17,"mean_commits":7.529411764705882,"dds":0.1796875,"last_synced_commit":"86129bb4394bdad0e5cc1a735b32ce747383325b"},"previous_names":["satya164/react-simple-code-editor"],"tags_count":43,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-simple-code-editor%2Freact-simple-code-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-simple-code-editor%2Freact-simple-code-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-simple-code-editor%2Freact-simple-code-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-simple-code-editor%2Freact-simple-code-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-simple-code-editor","download_url":"https://codeload.github.com/react-simple-code-editor/react-simple-code-editor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254067062,"owners_count":22009070,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["editor","hacktoberfest","react"],"created_at":"2024-07-30T23:00:38.310Z","updated_at":"2025-05-14T04:00:24.601Z","avatar_url":"https://github.com/react-simple-code-editor.png","language":"TypeScript","readme":"# react-simple-code-editor\n\n[![Build Status][build-badge]][build]\n[![MIT License][license-badge]][license]\n[![Version][version-badge]][package]\n[![Bundle size (minified + gzip)][bundle-size-badge]][bundle-size]\n\nSimple no-frills code editor with syntax highlighting.\n\n\u003ca href=\"https://raw.githubusercontent.com/react-simple-code-editor/react-simple-code-editor/main/demo/demo.gif\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/react-simple-code-editor/react-simple-code-editor/main/demo/demo.gif\" width=\"400\"\u003e\u003c/a\u003e\n\n## Why\n\nSeveral browser based code editors such as Ace, CodeMirror, Monaco etc. provide the ability to embed a full-featured code editor in your web page. However, if you just need a simple editor with syntax highlighting without any of the extra features, they can be overkill as they don't usually have a small bundle size footprint. This library aims to provide a simple code editor with syntax highlighting support without any of the extra features, perfect for simple embeds and forms where users can submit code.\n\n## Features\n\n- Modular syntax highlighting with third party library\n- Indent line or selected text by pressing tab key, with customizable indentation\n- Automatic indent on new lines\n- Wrap selected text in parens, brackets, or quotes\n- Undo whole words instead of letter by letter\n- Accessible, use `Ctrl+Shift+M` (Mac) / `Ctrl+M` to toggle capturing tab key\n\n## Installation\n\n```sh\nnpm install react-simple-code-editor\n```\n\nor\n\n```sh\nyarn add react-simple-code-editor\n```\n\n## Usage\n\nYou need to use the editor with a third party library which provides syntax highlighting. For example, it'll look like following with [`prismjs`](https://prismjs.com):\n\n```js\nimport React from 'react';\nimport Editor from 'react-simple-code-editor';\nimport { highlight, languages } from 'prismjs/components/prism-core';\nimport 'prismjs/components/prism-clike';\nimport 'prismjs/components/prism-javascript';\nimport 'prismjs/themes/prism.css'; //Example style, you can use another\n\nfunction App() {\n  const [code, setCode] = React.useState(\n    `function add(a, b) {\\n  return a + b;\\n}`\n  );\n  return (\n    \u003cEditor\n      value={code}\n      onValueChange={code =\u003e setCode(code)}\n      highlight={code =\u003e highlight(code, languages.js)}\n      padding={10}\n      style={{\n        fontFamily: '\"Fira code\", \"Fira Mono\", monospace',\n        fontSize: 12,\n      }}\n    /\u003e\n  );\n}\n```\n\nNote that depending on your syntax highlighter, you might have to include additional CSS for syntax highlighting to work.\n\n## Props\n\nThe editor accepts all the props accepted by `textarea`. In addition, you can pass the following props:\n\n- `value` (`string`): Current value of the editor i.e. the code to display. This must be a [controlled prop](https://reactjs.org/docs/forms.html#controlled-components).\n- `onValueChange` (`string =\u003e mixed`): Callback which is called when the value of the editor changes. You'll need to update the value prop when this is called.\n- `highlight` (`string =\u003e string | React.Node`): Callback which will receive text to highlight. You'll need to return an HTML string or a React element with syntax highlighting using a library such as [`prismjs`](https://prismjs.com).\n- `tabSize` (`number`): The number of characters to insert when pressing tab key. For example, for 4 space indentation, `tabSize` will be `4` and `insertSpaces` will be `true`. Default: `2`.\n- `insertSpaces` (`boolean`): Whether to use spaces for indentation. Default: `true`. If you set it to `false`, you might also want to set `tabSize` to `1`.\n- `ignoreTabKey` (`boolean`): Whether the editor should ignore tab key presses so that keyboard users can tab past the editor. Users can toggle this behaviour using `Ctrl+Shift+M` (Mac) / `Ctrl+M` manually when this is `false`. Default: `false`.\n- `padding` (`number`): Optional padding for code. Default: `0`.\n- `textareaId` (`string`): An ID for the underlying `textarea`, can be useful for setting a `label`.\n- `textareaClassName` (`string`): A className for the underlying `textarea`, can be useful for more precise control of its styles.\n- `preClassName` (`string`): A className for the underlying `pre`, can be useful for more precise control of its styles.\n\n## Demo\n\n[react-simple-code-editor.github.io/react-simple-code-editor](https://react-simple-code-editor.github.io/react-simple-code-editor/)\n\n## How it works\n\nIt works by overlaying a syntax highlighted `\u003cpre\u003e` block over a `\u003ctextarea\u003e`. When you type, select, copy text etc., you interact with the underlying `\u003ctextarea\u003e`, so the experience feels native. This is a very simple approach compared to other editors which re-implement the behaviour.\n\nThe syntax highlighting can be done by any third party library as long as it returns HTML and is fully controllable by the user.\n\nThe vanilla `\u003ctextarea\u003e` doesn't support inserting tab characters for indentation, so we re-implement it by listening to `keydown` events and programmatically updating the text. One caveat with programmatically updating the text is that we lose the undo stack, so we need to maintain our own undo stack. As a result, we can also implement improved undo behaviour such as undoing whole words similar to editors like VSCode.\n\n## Limitations\n\nDue to the way it works, it has certain limitations:\n\n- The syntax highlighted code cannot have different font family, font weight, font style, line height etc. for its content. Since the editor works by aligning the highlighted code over a `\u003ctextarea\u003e`, changing anything that affects the layout can misalign it.\n- The custom undo stack is incompatible with undo/redo items browser's context menu. However, other full featured editors don't support browser's undo/redo menu items either.\n- The editor is not optimized for performance and large documents can affect the typing speed.\n- We hide text in the textarea using `-webkit-text-fill-color: transparent`, which works in all modern browsers (even non-webkit ones such as Firefox and Edge). On IE 10+, we use `color: transparent` which doesn't hide the cursor. Text may appear bolder in unsupported browsers.\n\n## Contributing\n\nWhile developing, you can run the example app to test your changes:\n\n```sh\nyarn example\n```\n\nMake sure your code passes TypeScript and ESLint. Run the following to verify:\n\n```sh\nyarn typescript\nyarn lint\n```\n\nTo fix formatting errors, run the following:\n\n```sh\nyarn lint -- --fix\n```\n\n\u003c!-- badges --\u003e\n\n[build-badge]: https://img.shields.io/circleci/project/github/react-simple-code-editor/react-simple-code-editor/main.svg?style=flat-square\n[build]: https://circleci.com/gh/react-simple-code-editor/react-simple-code-editor\n[license-badge]: https://img.shields.io/npm/l/react-simple-code-editor.svg?style=flat-square\n[license]: https://opensource.org/licenses/MIT\n[version-badge]: https://img.shields.io/npm/v/react-simple-code-editor.svg?style=flat-square\n[package]: https://www.npmjs.com/package/react-simple-code-editor\n[bundle-size-badge]: https://img.shields.io/bundlephobia/minzip/react-simple-code-editor.svg?style=flat-square\n[bundle-size]: https://bundlephobia.com/result?p=react-simple-code-editor\n","funding_links":[],"categories":["UI Components","TypeScript"],"sub_categories":["Form Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-simple-code-editor%2Freact-simple-code-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-simple-code-editor%2Freact-simple-code-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-simple-code-editor%2Freact-simple-code-editor/lists"}