# @sanity/code-input

> Sanity input component for code, powered by CodeMirror

Latest version **7.3.14** (published 2026-10-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sanity/code-input
pnpm add @sanity/code-input
yarn add @sanity/code-input
bun add @sanity/code-input
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 7.3.14 |
| Published | 2026-10-23 |
| First published | 2017-06-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Node | >=20.19 <22 \|\| >=22.12 |
| Dependencies | 17 |
| Unpacked size | 181.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 20 |
| Author | Sanity.io <hello@sanity.io> |
| Maintainers | sanity-svc.npm, sanity-io |
| Keywords | cms, code-editor, code-input, content, headless, realtime, sanity, sanity-plugin |

## Links

- npm: https://www.npmjs.com/package/@sanity/code-input
- Repository: https://github.com/sanity-io/plugins
- Homepage: https://github.com/sanity-io/plugins/tree/main/plugins/@sanity/code-input#readme
- Issues: https://github.com/sanity-io/plugins/issues
- npm.io page: https://npm.io/package/@sanity/code-input

## Dependencies (17)

- [@sanity/ui](https://npm.io/package/@sanity/ui.md) ^4.4.9
- [@sanity/icons](https://npm.io/package/@sanity/icons.md) ^5.2.3
- [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.43.14
- [@lezer/highlight](https://npm.io/package/@lezer/highlight.md) ^1.2.3
- [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.7.6
- [@sanity/lezer-groq](https://npm.io/package/@sanity/lezer-groq.md) ^1.0.4
- [@codemirror/lang-php](https://npm.io/package/@codemirror/lang-php.md) ^6.0.2
- [@codemirror/lang-sql](https://npm.io/package/@codemirror/lang-sql.md) ^6.10.0
- [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.13.1
- [@codemirror/lang-html](https://npm.io/package/@codemirror/lang-html.md) ^6.4.12
- [@codemirror/lang-java](https://npm.io/package/@codemirror/lang-java.md) ^6.0.2
- [@codemirror/lang-json](https://npm.io/package/@codemirror/lang-json.md) ^6.0.2
- [@uiw/react-codemirror](https://npm.io/package/@uiw/react-codemirror.md) ^4.25.11
- [@uiw/codemirror-themes](https://npm.io/package/@uiw/codemirror-themes.md) ^4.25.11
- [@codemirror/legacy-modes](https://npm.io/package/@codemirror/legacy-modes.md) ^6.5.5
- [@codemirror/lang-markdown](https://npm.io/package/@codemirror/lang-markdown.md) ^6.5.2
- [@codemirror/lang-javascript](https://npm.io/package/@codemirror/lang-javascript.md) ^6.2.5

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 7.3.14 (latest) — 2026-10-23
- 7.0.5-canary.0 (canary) — 2026-01-12
- 2.36.0 (studio-v2) — 2022-11-25
- 3.0.0-v3-studio.15 (studio-v3) — 2022-11-04
- 2.34.3-cdr-ga-4.23 (cdr-ga-4) — 2022-10-20
- 2.34.3-cdr-ga-2.19 (cdr-ga-2) — 2022-10-20
- 2.34.3-cdr-ga.20 (cdr-ga) — 2022-10-20
- 2.34.3-cdr-preview.20 (cdr-preview) — 2022-10-20
- 2.34.2-empty-template-cli.0 (empty-template-cli) — 2022-10-13
- 2.33.4-shopify.8 (shopify) — 2022-09-22
- 2.33.4-performance-opts.16 (performance-opts) — 2022-09-22
- 2.33.3-edge.8 (edge) — 2022-09-20
- 2.30.7-findability.87 (findability) — 2022-09-20
- 2.33.1-performance-opts-doc-pane.2 (performance-opts-doc-pane) — 2022-09-12
- 2.32.1-next.22 (next) — 2022-09-08
- … 892 more at https://npm.io/package/@sanity/code-input/versions

## README

# @sanity/code-input

## What is it?

Code input for [Sanity](https://sanity.io/).

A subset of languages and features are exposed by default. More can be added via the plugin options.

![Code input](assets/basic-input.png)

Click the line numbers to toggle line highlighting.

## Installation

```sh
npm install @sanity/code-input
```

## Usage

Add it as a plugin in `sanity.config.ts` (or .js):

```js
import {codeInput} from '@sanity/code-input'
import {defineConfig} from 'sanity'

export default defineConfig({
  // ...
  plugins: [codeInput()],
})
```

Now you can use the `code` type in your schema types:

```js
import {defineType, defineField} from 'sanity'

defineType({
  // [...]
  fields: [
    defineField({
      type: 'code',
      name: 'myCodeField',
      title: 'My code field',
    }),
  ],
})
```

## Options

- `language` - Default language for this code field.
- `languageAlternatives` - Array of languages that should be available (se its format in the example below)
- `withFilename` - Boolean option to display input field for filename
- `disableFullscreen` - Boolean option to hide the "Expand editor" button (expanding is enabled by default)

```js
//...fields,
defineField({
  type: 'code',
  name: 'myCodeField',
  title: 'Code with all options',
  options: {
    language: 'javascript',
    languageAlternatives: [
      {title: 'Javascript', value: 'javascript'},
      {title: 'HTML', value: 'html'},
      {title: 'CSS', value: 'css'},
    ],
    withFilename: true,
    disableFullscreen: false,
  },
})
```

The code editor can be expanded to fill the document pane using the "Expand
editor" button in the top-right corner of the editor (press `Escape` to
collapse). Set `disableFullscreen: true` to hide this button.

![Code input with all options in dark mode](assets/all-options.png)

## Add support for more languages

Only a subset of languages are have syntax highlighting support by default (see full list [here](https://github.com/sanity-io/plugins/blob/main/plugins/@sanity/code-input/src/codemirror/defaultCodeModes.ts)).

### Mode: Reuse an existing language

Some languages are similar enough, that reusing one of the default highlighters will be "good enough".
To reuse an existing language, specify mode for a value in `languageAlternatives`:

```js
//...fields,
defineField({
  name: 'zhOnly',
  type: 'code',
  options: {
    language: 'zh',
    languageAlternatives: [
      //Adds support for zh language, using sh syntax highlighting
      {title: 'ZH', value: 'zh', mode: 'sh'},
    ],
  },
})
```

### Add more languages

You can add support for additional languages, or override existing ones, by providing a `codeModes` array to the plugin.
`codeModes` should be an array where each value is an object with a name and a loader function.
The loader function should return a codemirror `Extension` or a `Promise` that resolves to `Extension`.

The loader function will be invoked when the language is selected.

For a full list of officialy code-mirror languages, see:

### Example: Add support for CodeMirror 6 language (Angular)

We can add support for a [CodeMirror 6 lang package](https://github.com/orgs/codemirror/repositories?language=&q=lang-&sort=&type=all):

```js
// sanity.config.js

// ... in the plugins array of defineConfig, where we add the codeInput plugin
codeInput({
  codeModes: [
    {
      name: 'angular',
      // dynamic import the angular package, and initialize the plugin after it is loaded
      // This way, the language is only when it is selected
      loader: () => import('@codemirror/lang-angular').then(({angular}) => angular()),
    },
  ],
})
```

```js
// in a code field, you can now use rust as a language as a value, or mode
defineField({
  name: 'exampleRust',
  title: 'Example usage',
  type: 'code',
  options: {
    languageAlternatives: [
      {title: 'Javascript', value: 'javascript'},
      {title: 'Angular', value: 'angular'},
      {title: 'Angular-like', value: 'angular-like', mode: 'angular'}, // uses angular highlighter
    ],
  },
})
```

For this to work, you will have to run `npm i @codemirror/lang-angular` as this package is not included by @sanity/code-input.

### Example: Add support for CodeMirror 5 legacy language (Rust)

We can add support for any [CodeMirror 5 legacy language](https://github.com/codemirror/legacy-modes/tree/main/mode) using
[CodeMirror 6 StreamLanguage](https://codemirror.net/docs/ref/#language.StreamLanguage).

```js
// sanity.config.js
import {StreamLanguage} from '@codemirror/language'

// ... in the plugins array of defineConfig, where we add the codeInput plugin
codeInput({
  codeModes: [
    {
      name: 'rust',
      // dynamic import so the language is only be loaded on demand
      loader: () =>
        import('@codemirror/legacy-modes/mode/rust').then(({rust}) => StreamLanguage.define(rust)),
    },
  ],
})
```

```js
// in a code field, you can now use rust as a language as a value, or mode
defineField({
  name: 'exampleRust',
  title: 'Example usage',
  type: 'code',
  options: {
    languageAlternatives: [
      {title: 'Javascript', value: 'javascript'},
      {title: 'Rust', value: 'rust'},
      {title: 'Rust-like', value: 'rust-like', mode: 'rust'}, // uses rust highlighter
    ],
  },
})
```

Note: `@sanity/code-input` already includes the `@codemirror/legacy-modes` and `@codemirror/language` dependencies,
so no need to install them explicitly.

## Data model

```js
{
  _type: 'code',
  language: 'js',
  highlightedLines: [1, 2],
  code: 'const foo = "bar"\nconsole.log(foo.toUpperCase())\n// BAR',
  filename: 'available when enabled'
}
```

## Example usage in frontend (React)

You can use any syntax highlighter you want - but not all of them might support highlighted lines or the syntax you've defined.

As outlined above, the actual code is stored in a `code` property, so if your schema has a field called `codeExample` of type `code`, the property you'd want to pass to the highlighter would be `codeExample.code`.

Here's an example using [react-refractor](https://github.com/rexxars/react-refractor):

```jsx
import Refractor from 'react-refractor'
import js from 'refractor/lang/javascript'

Refractor.registerLanguage(js)

export function Code(props) {
  return (
    <Refractor
      // In this example, `props` is the value of a `code` field
      language={props.language}
      value={props.code}
      markers={props.highlightedLines}
    />
  )
}
```

Other syntax highlighters include:

- [react-lowlight](https://github.com/rexxars/react-lowlight)
- [react-syntax-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter)
- [highlight.js](https://github.com/highlightjs/highlight.js)
- [prism](https://github.com/PrismJS/prism)

## License

MIT-licensed. See LICENSE.

---
_Source: https://npm.io/package/@sanity/code-input · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._