Skip to main content

Getting started

Installation​

The packaging may be subject to change as the library evolves. At the moment, everything is shipped in a single package, @intellij-platform/core. There is a peer dependency on styled-components. While styled-components@4 might work too, only v5 has been tested.

yarn add @intellij-platform/core styled-components

Or with npm:

npm i @intellij-platform/core styled-components

Configuring theme​

All components rely on Theme to be provided. So you need to wrap your application code in a ThemeProvider:

import { ThemeProvider } from "@intellij-platform/core";
import darculaThemeJson from "@intellij-platform/core/themes/darcula.theme.json";

const theme = new Theme(darculaThemeJson);

function App() {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

The only required value for creating a Theme object is a theme json object. You can use any valid theme json but the default themes are available under @intellij-platform/core/themes. See more options for creating theme in theming docs.

tip

Set resolveJsonModule to true in your tsconfig.json to allow importing theme json files.

Hello World!​

Result
Loading...
Live Editor
// import { Item, List, Theme, ThemeProvider } from "@intellij-platform/core";
// import darculaThemeJson from "@intellij-platform/core/themes/darcula.theme.json";

function App() {
  const darculaTheme = new Theme(darculaThemeJson);
  return (
    <ThemeProvider theme={darculaTheme}>
      <List selectionMode="multiple">
        <Item>Hello React!</Item>
        <Item>Hello Intellij Platform</Item>
        <Item>Hello World!</Item>
      </List>
    </ThemeProvider>
  );
}

Next steps​

A good next step would be to check out Tool Windows. It's the centric component in most apps. A few other commonly used components to start with would be SpeedSearchTree, SpeedSearchList and Tabs.