Code Editor
A code editor component featuring syntax highlighting and animation.
Made by imskyleenPowered by
Installation
Loading component...
Usage
<CodeEditor lang="tsx">
{`const a = 1;
const b = 2;
const c = a + b;`}
</CodeEditor>If you want to toggle between light and dark themes, you can use the theme prop.
<CodeEditor lang="tsx" theme="dark">
{`const a = 1;
const b = 2;
const c = a + b;`}
</CodeEditor>When to use
Use this decision tree to determine when to use the Code Editor component:
Props
Prop
Type
Credits
- We use Animate UI for the code editor component and style.
- We use Animate UI from imskyleen for all the animations.
Recent changes
- patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
- minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
- minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
- majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
- minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109
Built by malinskibeniamin. The source code is available on GitHub.