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> ); }

// 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.