---
title: Code Editor
description: A code editor component featuring syntax highlighting and animation.
author:
  name: imskyleen
  url: https://github.com/imskyleen
---

<ComponentPreview name="code-editor-demo" />

## Installation

<ComponentInstallation name="code-editor" />

## Usage

```tsx
<CodeEditor lang="tsx">
  {`const a = 1;
const b = 2;
const c = a + b;`}
</CodeEditor>
```

## Props

<TypeTable
  type={{
    children: {
      description: 'The code to display in the editor.',
      type: 'string',
      required: true,
    },
    lang: {
      description: 'The language of the code.',
      type: 'string',
      required: true,
    },
    themes: {
      description:
        'The theme of the code editor (see https://shiki.style/themes).',
      type: '{ light: string; dark: string }',
      required: false,
      default: '{ light: "github-light"; dark: "github-dark" }',
    },
    duration: {
      description: 'The duration of the animation.',
      type: 'number',
      required: false,
      default: '5',
    },
    delay: {
      description: 'The delay of the animation.',
      type: 'number',
      required: false,
      default: '0',
    },
    header: {
      description: 'Whether to show the header.',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    dots: {
      description: 'Whether to show the top left dots.',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    icon: {
      description: 'The icon to display in the header.',
      type: 'React.ReactNode',
      required: false,
    },
    cursor: {
      description: 'Whether to show the cursor.',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    inView: {
      description: 'Enable animation when in view.',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    inViewMargin: {
      description: 'The margin of the in view.',
      type: 'string',
      required: false,
      default: '0px',
    },
    inViewOnce: {
      description: 'Enable animation only once when in view.',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    copyButton: {
      description: 'Whether to show the copy button.',
      type: 'boolean',
      required: false,
      default: 'false',
    },
    writing: {
      description: 'Enable writing animation.',
      type: 'boolean',
      required: false,
      default: 'true',
    },
    title: {
      description: 'The file name.',
      type: 'string',
      required: false,
    },
    onDone: {
      description: 'Callback when the animation is done.',
      type: '() => void',
      required: false,
    },
    onCopy: {
      description: 'The function to call when copy is successful.',
      type: '(content: string) => void',
      required: false,
    },
  }}
/>