Pluto Components

Use Pluto components to build custom user interfaces.

Powering the inner workings of the Synnax Console, Pluto is a React component library designed to build high-performance, real-time user interfaces on top of Synnax. It provides a number of components from simple buttons to complex data visualizations.

Installation

Pluto is available on npm, and can be installed with your package manager of choice. We’ll be using npm in our documentation, but feel free to use yarn, pnpm, or any other package manager you prefer.

npm install @synnaxlabs/pluto

Prerequisites and Important Notes

Pluto is designed for high performance and flexibility, which comes at the cost of ease of use. We’re working hard to improve user friendliness!

Browser Compatibility

Pluto leverages Web Workers and the OffscreenCanvas API. These features are generally available on the latest versions of all major browsers, but may not be compatible with older versions.

See here for the OffscreenCanvas compatibility table.

Bundle Size and Import Structure

Pluto is relatively large at around ~500kb minified and gzipped. We don’t recommend deploying applications that use Pluto in serverless environments or when building interfaces designed to serve users with a slow network.

The component library is designed to be tree-shakeable, so you can import only the components you need. For example, when importing a Button component, you can do:

import { Button } from "@synnaxlabs/pluto/button";

instead of importing the entire library:

import { Button } from "@synnaxlabs/pluto";

Strict Mode Incompatibility

Pluto uses several mechanisms to manage communication between the main thread and the Web Worker. These mechanisms are not yet compatible with React’s Strict Mode. If you do use Strict Mode, you may encounter errors or unexpected behavior.

Components as Modules

When you import the Button above, you’re not actually importing the Button component itself. Instead, you’re importing a module that exports the Button, along with other useful utilities. You’ll see this syntax with almost every component in Pluto:

import { Button } from "@synnaxlabs/pluto/button";

const regularButton = <Button.Button>Click me!</Button.Button>;
const onlyIconButton = <Button.Icon>🚀</Button.Icon>;

We’re accessing the Button or the Icon component from the Button module. We like this syntax as it adds clarity to the codebase. Some of our users don’t like it. If you prefer to access the components directly, we recommend destructuring the module:

import { Button as PButton } from "@synnaxlabs/pluto/button";
const { Button, Icon: IconButton } = PButton;

const regularButton = <Button>Click me!</Button>;
const onlyIconButton = <IconButton>🚀</IconButton>;

Next Steps

Now that you’ve installed Pluto, it’s time to set up the provider and canvas in your application.