IDE

Use the IDE to showcase a simulated integrated developer environment, complete with a code editor and AI chat that's intended to enhance code representation in marketing contexts.

On this page

import {IDE} from '@primer/react-brand'

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

<IDE
  alternativeText="An interactive development environment displaying two code files: 'index.js' and 'parse_expenses.py'. The 'index.js' file contains JavaScript code for a function that fetches data and draws a scatterplot. The 'parse_expenses.py' file contains Python code for a function that parses expense data."
  height={500}
>
  <IDE.Editor
    showReplayButton={false}
    files={[
      {
        name: 'index.js',
        code: `import { fetch } from "fetch-h2";

async function isPositive(text: string): Promise<boolean> {
  const response = await fetch(...)
  const drawScatterplot = (data, height, width) => {
    const svg = d3.select("#scatterplot")
      .data(data)
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("r", 5)
  }
  const json = await response.json();
  return json.label === "pos";
}`,
      },
      {
        name: 'parse_expenses.py',
        code: `import datetime
  
def parse_expenses(expenses_string):
Ignore lines starting with #.
Parse the date using datetime.
Example expenses_string:
2016-01-02 -34.01 USD
2016-01-03 2.59 DKK
2016-01-03 -2.72 EUR
"""
expenses = []
for line in expenses_string.splitlines():
if line.startswith("#"):
continue
date, value, currency = line.split(" ")
expenses.append((datetime.datetime.strptime(date, "%Y-%m-%d"),
          float(value),
          currency))
return expenses`,
      },
    ]}
  />
</IDE>

<IDE
  alternativeText="An interactive development environment displaying two code files: 'index.js' and 'parse_expenses.py'. The 'index.js' file contains JavaScript code for a function that fetches data and draws a scatterplot. The 'parse_expenses.py' file contains Python code for a function that parses expense data."
  height={500}
>
  <IDE.Editor
    showReplayButton={false}
    files={[
      {
        name: 'index.js',
        code: `import { fetch } from "fetch-h2";

async function isPositive(text: string): Promise<boolean> {
  const response = await fetch(...)
  const drawScatterplot = (data, height, width) => {
    const svg = d3.select("#scatterplot")
      .data(data)
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("r", 5)
  }
  const json = await response.json();
  return json.label === "pos";
}`,
      },
      {
        name: 'parse_expenses.py',
        code: `import datetime
  
def parse_expenses(expenses_string):
Ignore lines starting with #.
Parse the date using datetime.
Example expenses_string:
2016-01-02 -34.01 USD
2016-01-03 2.59 DKK
2016-01-03 -2.72 EUR
"""
expenses = []
for line in expenses_string.splitlines():
if line.startswith("#"):
continue
date, value, currency = line.split(" ")
expenses.append((datetime.datetime.strptime(date, "%Y-%m-%d"),
          float(value),
          currency))
return expenses`,
      },
    ]}
  />
</IDE>

Animations

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

<IDE
  alternativeText="An interactive development environment displaying one code file: 'index.js'. The 'index.js' file contains JavaScript code for a function that fetches data and draws a scatterplot. Each line animates into view line-by-line."
  height={500}
>
  <IDE.Editor
    files={[
      {
        name: 'index.js',
        code: `import { fetch } from "fetch-h2";

async function isPositive(text: string): Promise<boolean> {
  const response = await fetch(...)
  const drawScatterplot = (data, height, width) => {
    const svg = d3.select("#scatterplot")
      .data(data)
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("r", 5)
  }
  const json = await response.json();
  return json.label === "pos";
}`
          .split('\n')
          .map((line) => line || ' '),
      },
    ]}
  />
</IDE>

<IDE
  alternativeText="An interactive development environment displaying one code file: 'index.js'. The 'index.js' file contains JavaScript code for a function that fetches data and draws a scatterplot. Each line animates into view line-by-line."
  height={500}
>
  <IDE.Editor
    files={[
      {
        name: 'index.js',
        code: `import { fetch } from "fetch-h2";

async function isPositive(text: string): Promise<boolean> {
  const response = await fetch(...)
  const drawScatterplot = (data, height, width) => {
    const svg = d3.select("#scatterplot")
      .data(data)
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("r", 5)
  }
  const json = await response.json();
  return json.label === "pos";
}`
          .split('\n')
          .map((line) => line || ' '),
      },
    ]}
  />
</IDE>

GitHub Copilot suggestions

Simulate GitHub Copilot suggestions using the suggestedLineStart property.

<IDE
  alternativeText="An interactive development environment displaying one code file: 'index.js'. The 'index.js' file contains JavaScript code for a function that fetches data and draws a scatterplot. Line 6 onwards contains a GitHub Copilot auto suggestion."
  height={500}
>
  <IDE.Editor
    files={[
      {
        name: 'index.js',
        // Line number at which the suggestion will apply
        suggestedLineStart: 6,
        code: `import { fetch } from "fetch-h2";

async function isPositive(text: string): Promise<boolean> {
  const response = await fetch(...)
  const drawScatterplot = (data, height, width) => {
    const svg = d3.select("#scatterplot")
      .data(data)
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("r", 5)
  }
  const json = await response.json();
  return json.label === "pos";
}`
          .split('\n')
          .map((line) => line || ' '),
      },
    ]}
  />
</IDE>

<IDE
  alternativeText="An interactive development environment displaying one code file: 'index.js'. The 'index.js' file contains JavaScript code for a function that fetches data and draws a scatterplot. Line 6 onwards contains a GitHub Copilot auto suggestion."
  height={500}
>
  <IDE.Editor
    files={[
      {
        name: 'index.js',
        // Line number at which the suggestion will apply
        suggestedLineStart: 6,
        code: `import { fetch } from "fetch-h2";

async function isPositive(text: string): Promise<boolean> {
  const response = await fetch(...)
  const drawScatterplot = (data, height, width) => {
    const svg = d3.select("#scatterplot")
      .data(data)
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("r", 5)
  }
  const json = await response.json();
  return json.label === "pos";
}`
          .split('\n')
          .map((line) => line || ' '),
      },
    ]}
  />
</IDE>

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

<IDE
  alternativeText="A chat interface showing a conversation between a user named 'monalisa' and an assistant named 'GitHub Copilot'. Monalisa asks 'How do I concatenate two arrays in JavaScript"
  height={700}
>
  <IDE.Chat
    script={[
      {
        role: 'user',
        handle: 'monalisa',
        avatar: 'https://github.com/mona.png',
        message: 'How do I concatenate two arrays in JavaScript?',
      },
      {
        role: 'assistant',
        handle: 'GitHub Copilot',
        avatar: 'https://github.com/copilot.png',
        message:
          "To concatenate two arrays in JavaScript, you can use the `concat` method. Here's an example:",
        codeSnippet: `const array1 = [1, 2, 3];\nconst array2 = [4, 5, 6];\nconst resultArray = array1.concat(array2);\nconsole.log(resultArray); // Output: [1, 2, 3, 4, 5, 6]`,
      },
      {
        role: 'user',
        handle: 'monalisa',
        avatar: 'https://github.com/mona.png',
        message: 'It worked!',
      },
    ]}
  />
</IDE>

<IDE
  alternativeText="A chat interface showing a conversation between a user named 'monalisa' and an assistant named 'GitHub Copilot'. Monalisa asks 'How do I concatenate two arrays in JavaScript"
  height={700}
>
  <IDE.Chat
    script={[
      {
        role: 'user',
        handle: 'monalisa',
        avatar: 'https://github.com/mona.png',
        message: 'How do I concatenate two arrays in JavaScript?',
      },
      {
        role: 'assistant',
        handle: 'GitHub Copilot',
        avatar: 'https://github.com/copilot.png',
        message:
          "To concatenate two arrays in JavaScript, you can use the `concat` method. Here's an example:",
        codeSnippet: `const array1 = [1, 2, 3];\nconst array2 = [4, 5, 6];\nconst resultArray = array1.concat(array2);\nconsole.log(resultArray); // Output: [1, 2, 3, 4, 5, 6]`,
      },
      {
        role: 'user',
        handle: 'monalisa',
        avatar: 'https://github.com/mona.png',
        message: 'It worked!',
      },
    ]}
  />
</IDE>

Glass variant

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

<Box
  padding={48}
  borderRadius="large"
  style={{
    backgroundImage: `url(https://github.com/primer/brand/assets/13340707/7fe496dc-f6e0-417e-9453-32cec638ca68)`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  }}
>
  <IDE height={400} variant="glass">
    <IDE.Editor
      showReplayButton={false}
      files={[
        {
          name: 'index.js',
          code: `import { fetch } from "fetch-h2";

async function isPositive(text: string): Promise<boolean> {
  const response = await fetch(...)
  const drawScatterplot = (data, height, width) => {
    const svg = d3.select("#scatterplot")
      .data(data)
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("r", 5)
  }
  const json = await response.json();
  return json.label === "pos";
}`,
        },
        {
          name: 'parse_expenses.py',
          code: `import datetime
  
def parse_expenses(expenses_string):
Ignore lines starting with #.
Parse the date using datetime.
Example expenses_string:
2016-01-02 -34.01 USD
2016-01-03 2.59 DKK
2016-01-03 -2.72 EUR
"""`,
        },
      ]}
    />
  </IDE>
</Box>

<Box
  padding={48}
  borderRadius="large"
  style={{
    backgroundImage: `url(https://github.com/primer/brand/assets/13340707/7fe496dc-f6e0-417e-9453-32cec638ca68)`,
    backgroundRepeat: 'no-repeat',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
  }}
>
  <IDE height={400} variant="glass">
    <IDE.Editor
      showReplayButton={false}
      files={[
        {
          name: 'index.js',
          code: `import { fetch } from "fetch-h2";

async function isPositive(text: string): Promise<boolean> {
  const response = await fetch(...)
  const drawScatterplot = (data, height, width) => {
    const svg = d3.select("#scatterplot")
      .data(data)
      .attr("cx", d => d.x)
      .attr("cy", d => d.y)
      .attr("r", 5)
  }
  const json = await response.json();
  return json.label === "pos";
}`,
        },
        {
          name: 'parse_expenses.py',
          code: `import datetime
  
def parse_expenses(expenses_string):
Ignore lines starting with #.
Parse the date using datetime.
Example expenses_string:
2016-01-02 -34.01 USD
2016-01-03 2.59 DKK
2016-01-03 -2.72 EUR
"""`,
        },
      ]}
    />
  </IDE>
</Box>

Component props

IDE Required

name	type	default	required	description
`alternativeText`	`string`		`true`	Alternative description of the IDE
`height`	`number`	`800`	`false`	The optionally configurable height of the IDE
`variant`	`'default'` `'glass'`	`default`	`false`	Alternative presentation of the IDE

IDE.Editor

name	type	required	description
`activeTab`	`number`	`false`	Active tab index
`files`	`IDEEditorFile[]`	`true`	Array of editor files
`showLineNumbers`	`boolean`	`false`	Show line numbers in the editor
`size`	`'small'` `'medium'` `'large'`	`false`	Controls editor text size
`triggerAnimation`	`boolean`	`false`	Trigger animation externally
`showReplayButton`	`boolean`	`false`	Show replay button

Supported file extensions in the editor include: py, ts, js, jsx, hs, html, css, scss, json, md, yml, yaml, txt, sh, sql

IDE.Chat

name	type	default	required	description
`script`	`IDEChatMessage[]`		`false`	Array of chat messages
`animationDelay`	`number`	`3000`	`false`	Delay for the chat animation

Primer Design System

Site navigation