IDE

Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhancing code representation in marketing contexts.
  • Experimental
  • Not reviewed for accessibility
import {IDE} from '@primer/react-brand'

Examples

Default

The IDE does not automatically apply syntax highlighting to code snippets. Usage of this component in GitHub.com is expected to use the proprietary tokenizer and highlighter, the output of which can be passed directly into IDE as a parameter.

See Storybook for examples of IDE using highlight.js syntax highlighter.

See syntax highlighter examples

Animations

Line-by-line animations can be enabled using pre-formatted prop values. A replay button is enabled by default.

GitHub Copilot suggestions

Simulate GitHub Copilot suggestions using the suggestedLineStart property.

GitHub Copilot chat

Simulate GitHub Copilot Chat using the IDE.Chat sub-component. The script is fully customizable, and code snippets will require pre-formatting to enable syntax highlighting.

See Storybook for a comprehensive example of the Chat feature, inclusive of syntax highlighting.

See Chat example in Storybook

Glass variant

A glass variant is available to simplify placement of the IDE on background images. This variant adds alpha transparency and background blurring.