[opensourcedex]

react-textarea-code-editor is a free, open source ides & code editors project written in TypeScript and released under MIT. It has 575 GitHub stars, 23 forks and 45 open issues, and was last pushed 5 months ago. On this registry it ranks #24 of 24 tracked projects in IDEs & Code Editors, with 5 head-to-head comparisons available.

What is react-textarea-code-editor?

react-textarea-code-editor is a small, MIT-licensed React component, published on npm as @uiw/react-textarea-code-editor, that turns a plain textarea into a syntax-highlighted code input for forms, embeds and lightweight editing surfaces.

What it is

The project is a TypeScript React component in the Developer Tools / IDEs & Code Editors category, published under the uiwjs organisation, with documentation and a live demo hosted at https://uiwjs.github.io/react-textarea-code-editor/. Its stated aim is deliberately narrow: to provide a simple code editor with syntax highlighting and none of the extra features that come with a full editing surface. The component is MIT-licensed and has gathered 575 stars and 23 forks, with topics covering React, React 18, Next.js, textarea components, editors and TypeScript. Version 2 of the library added dark-mode and night-mode support.

The concrete thing it replaces is the bare HTML textarea element that React developers otherwise reach for when a form has to accept code. A plain textarea offers no highlighting, no automatic indentation and no bracket handling, while a full editor library is more machinery than most forms need. This component sits between the two: it keeps the textarea as the editing primitive and layers automatic syntax highlighting, indentation and text-wrapping behaviour on top, which makes it suitable for simple embeds and forms where users can submit code.

Key capabilities

  • Automatic syntax highlighting applied to a textarea, with dark-mode and night-mode support introduced in version 2.
  • Automatic indentation on new lines, plus Tab-key indentation of a line or a selected block, with customizable indentation.
  • Wrapping of selected text in bracket pairs: [], (), , {}, double quotes, single quotes and backticks.
  • A rehypePlugins prop that accepts rehype plugins, allowing line-level and character-level highlighting through rehype-prism-plus and rehype-rewrite.
  • A component API built around the default-exported CodeEditor, driven by React state, an onChange handler, and props such as padding and style.
  • Distribution as the npm package @uiw/react-textarea-code-editor, also listed for CDN delivery through jsDelivr and unpkg.
  • Documented Next.js support, with usage examples for Next.js projects, matching the nextjs topic.

Who uses it and how

  • React and React 18 applications that need a code field inside a larger form, such as a submission box where a user types or pastes a snippet.
  • Next.js projects, which the README addresses with a dedicated support section and which the topic list reflects.
  • Simple embeds and forms where the goal is code entry rather than full editing, the use case the README names directly.
  • Teams that need to highlight a particular line or character within submitted code, using the rehype plugin route instead of building custom editor behaviour.
  • Developers who would rather not wire up a build step for the assets, since the package is available from the jsDelivr and unpkg CDNs.

Getting started

Install the package with npm i @uiw/react-textarea-code-editor, then import the default CodeEditor component and wire it to React state as shown in the README usage example. The same repository publishes a hosted demo and documentation page for anyone who wants to try it before installing.

How it compares

No list of paid products that this project replaces appears in the facts, and no directly comparable tool is named there either, so the honest position is that react-textarea-code-editor stands alone in this registry on the evidence available. The only other libraries named in the README, rehype-prism-plus and rehype-rewrite, are plugins the component consumes rather than alternatives to it.

When to use it — and when not to

Adoption carries little operational weight: there is no database, object storage or SMTP service to run, because the component is an npm package compiled into the host application's front-end bundle. It is the wrong choice for anyone who needs a full IDE surface such as multiple files, language services or advanced editing, since the README positions it explicitly as a simple editor without extra features. Prospective users should also weigh scale and documentation depth: 45 open issues against 575 stars and 23 forks suggests a sizeable open backlog, and the README excerpt available here is short, so the hosted documentation is the place to confirm prop-level detail before committing.

project readme (upstream, from github) — read inline

Using my app is also a way to support me:
Scap: Screenshot & Markup Edit Screen Test Deskmark Keyzer Vidwall Hub VidCrop Vidwall Mousio Hint Mousio Musicer Audioer FileSentinel FocusCursor Videoer KeyClicker DayBar Iconed Menuist Quick RSS Quick RSS Web Serve Copybook Generator DevTutor for SwiftUI RegexMate Time Passage Iconize Folder Textsound Saver Create Custom Symbols DevHub Resume Revise Palette Genius Symbol Scribe


React Textarea Code Editor

Buy me a coffee Follow On X Build & Deploy Coverage Status NPM Download jsDelivr CDN Open in unpkg npm bundle size npm version

A simple code editor with syntax highlighting. 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.

Features:

  • 🌒 Support dark-mode/night-mode @v2.
  • ☕️ Automatic syntax highlighting.
  • 🐲 Automatic indent on new lines.
  • 🩲 Indent line or selected text by pressing tab key, with customizable indentation.
  • 🌸 Wrap selected text in parens, [], (), , {}, "", '', "", ``
  • 💡 Support next.js, Use examples in next.js.

Install

$ npm i @uiw/react-textarea-code-editor

Demo & Document

https://uiwjs.github.io/react-textarea-code-editor/

Usage

Open in CodeSandbox Open in Github gh-pages

import React, { useState } from "react";
import CodeEditor from '@uiw/react-textarea-code-editor';

export default function App() {
  const [code, setCode] = useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  return (
    <CodeEditor
      value={code}
      language="js"
      placeholder="Please enter JS code."
      onChange={(evn) => setCode(evn.target.value)}
      padding={15}
      style={{
        backgroundColor: "#f5f5f5",
        fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
      }}
    />
  );
}

Highlight line or character

Open in CodeSandbox

List of rehype plugins to use. 

import CodeEditor from '@uiw/react-textarea-code-editor';
import rehypePrism from "rehype-prism-plus";
import rehypeRewrite from "rehype-rewrite";
import "./styles.css";

function App() {
  const [code, setCode] = React.useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  return (
    <CodeEditor
      value={code}
      language="js"
      placeholder="Please enter JS code."
      onChange={(evn) => setCode(evn.target.value)}
      padding={15}
      rehypePlugins={[
        [rehypePrism, { ignoreMissing: true }],
        [
          rehypeRewrite,
          {
            rewrite: (node, index, parent) => {
              if (node.properties?.className?.includes("code-line")) {
                if (index === 0 && node.properties?.className) {
                  node.properties.className.push("demo01");
                  // console.log("~~~", index, node.properties?.className);
                }
              }
              if (node.type === "text" && node.value === "return" && parent.children.length === 1) {
                parent.properties.className.push("demo123");
              }
            }
          }
        ]
      ]}
      style={{
        fontSize: 12,
        backgroundColor: "#f5f5f5",
        fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
      }}
    />
  );
}

Remove Code Highlight

The following example can help you exclude code highlighting code from being included in the bundle. @uiw/react-textarea-code-editor/nohighlight component does not contain the rehype-prism-plus code highlighting package.

import React, { useState } from "react";
import CodeEditor from '@uiw/react-textarea-code-editor/nohighlight';

export default function App() {
  const [code, setCode] = useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  return (
    <CodeEditor
      value={code}
      language="js"
      placeholder="Please enter JS code."
      onChange={(evn) => setCode(evn.target.value)}
      padding={15}
      style={{
        backgroundColor: "#f5f5f5",
        fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
      }}
    />
  );
}

Show LineNumbers

import rehypePrism from 'rehype-prism-plus';
import React, { useState } from "react";
import CodeEditor from '@uiw/react-textarea-code-editor';

export default function App() {
  const [code, setCode] = useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  return (
    <CodeEditor
      value={code}
      language="js"
      placeholder="Please enter JS code."
      onChange={(evn) => setCode(evn.target.value)}
      rehypePlugins={[
        [rehypePrism, { ignoreMissing: true, showLineNumbers: true }]
      ]}
      style={{
        backgroundColor: "#f5f5f5",
        fontFamily: 'ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace',
      }}
    />
  );
}

Support Nextjs

Use examples in nextjs. #31

Open in CodeSandbox

npm install next-remove-imports
npm install @uiw/[email protected]

// next.config.js
const removeImports = require("next-remove-imports")();
module.exports = removeImports({
  experimental: { esmExternals: true }
});

import React from "react";
import dynamic from "next/dynamic";
import "@uiw/react-textarea-code-editor/dist.css";

const CodeEditor = dynamic(
  () => import("@uiw/react-textarea-code-editor").then((mod) => mod.default),
  { ssr: false }
);

function HomePage() {
  const [code, setCode] = React.useState(
    `function add(a, b) {\n  return a + b;\n}`
  );
  return (
    <div>
      <CodeEditor
        value={code}
        language="js"
        placeholder="Please enter JS code."
        onChange={(evn) => setCode(evn.target.value)}
        padding={15}
        style={{
          fontSize: 12,
          backgroundColor: "#f5f5f5",
          fontFamily:
            "ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace"
        }}
      />
    </div>
  );
}

export default HomePage;

Support dark-mode/night-mode

By default, the dark-mode is automatically switched according to the system. If you need to switch manually, just set the data-color-mode="dark" parameter for html Element. 

<html data-color-mode="dark">

document.documentElement.setAttribute('data-color-mode', 'dark')
document.documentElement.setAttribute('data-color-mode', 'light')

Inherit custom color variables by adding .w-tc-editor-var selector.

const Demo = () => {
  return (
    <div>
      <div className="w-tc-editor-var"> </div>
      <CodeEditor value={code} />
    </div>
  )
}

Set (data-color-mode="dark") dark theme.

import CodeEditor from '@uiw/react-textarea-code-editor';

function App() {
  return (
    <CodeEditor
      value="function add(a, b) {\n  return a + b;\n}"
      data-color-mode="dark"
    />
  );
}

Props

interface TextareaCodeEditorProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
  prefixCls?: string;
  /**
   * Support dark-mode/night-mode
   */
  ['data-color-mode']?: 'dark' | 'light';
  /**
   * Set what programming language the code belongs to.
   */
  language?: string;
  /**
   * Optional padding for code. Default: `10`.
   */
  padding?: number;
  /**
   * rehypePlugins (Array.<Plugin>, default: `[[rehypePrism, { ignoreMissing: true }]]`)  
   * List of [rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins) to use. See the next section for examples on how to pass options
   */
  rehypePlugins?: PluggableList;
  /**
   * The minimum height of the editor. Default: `16`.
   */
  minHeight?: number;
  onKeyDown?: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void | boolean;
  /**
   * The number of spaces for indentation when pressing tab key. Default: `2`.
   */
  indentWidth?: number
}

List of supported languages can be found here

Development

Runs the project in development mode. 

# Step 1, run first, listen to the component compile and output the .js file
# listen for compilation output type .d.ts file
npm run watch
# Step 2, development mode, listen to compile preview website instance
npm run start

production

Builds the app for production to the build folder.

npm run build

The build is minified and the filenames include the hashes. Your app is ready to be deployed!

See Also

Contributors

As always, thanks to our amazing contributors!

Made with github-action-contributors.

License

Licensed under the MIT License.

Frequently asked questions

Is react-textarea-code-editor free to use?

react-textarea-code-editor is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does react-textarea-code-editor do?

A simple code editor with syntax highlighting.

What is react-textarea-code-editor written in?

react-textarea-code-editor is primarily written in TypeScript. Its source is publicly available at https://github.com/uiwjs/react-textarea-code-editor, and it has 575 GitHub stars.