### Install OpenPolotno

Source: https://github.com/therutvikp/openpolotno/blob/main/README.md

Install the OpenPolotno package using npm.

```bash
npm install openpolotno
```

--------------------------------

### Vanilla JS Programmatic Approach

Source: https://github.com/therutvikp/openpolotno/blob/main/README.md

Initialize OpenPolotno programmatically using Vanilla JavaScript. This method allows for direct manipulation of the editor's state and elements.

```ts
import { createRaeditorApp } from 'openpolotno';

const { store } = createRaeditorApp({
  container: document.getElementById('app'),
  key: 'YOUR_API_KEY',
  showCredit: true,
  sections: undefined, // pass string[] to show only specific side panel sections
});

// Add elements programmatically
const page = store.pages[0];
page.addElement({
  type: 'text',
  text: 'Hello OpenPolotno',
  x: 100,
  y: 100,
  fontSize: 40,
});
```

--------------------------------

### React Component Approach

Source: https://github.com/therutvikp/openpolotno/blob/main/README.md

Integrate OpenPolotno into a React application using its component-based approach. Ensure you have a valid API key.

```tsx
import { createStore } from 'openpolotno/model';
import { RaeditorContainer, SidePanelWrap, WorkspaceWrap } from 'openpolotno';
import { SidePanel } from 'openpolotno/side-panel';
import { Toolbar } from 'openpolotno/toolbar';
import { Workspace } from 'openpolotno/canvas';

const store = createStore({ key: 'YOUR_API_KEY' });
store.addPage();

export default function App() {
  return (
    <RaeditorContainer>
      <SidePanelWrap>
        <SidePanel store={store} />
      </SidePanelWrap>
      <WorkspaceWrap>
        <Toolbar store={store} />
        <Workspace store={store} />
      </WorkspaceWrap>
    </RaeditorContainer>
  );
}
```

--------------------------------

### OpenPolotno Store API - State Management

Source: https://github.com/therutvikp/openpolotno/blob/main/README.md

Functions for serializing, loading, and clearing the entire state of the OpenPolotno store.

```typescript
store.toJSON()
store.loadJSON(json)
store.clear()
```

--------------------------------

### OpenPolotno Store API - Playback Control

Source: https://github.com/therutvikp/openpolotno/blob/main/README.md

Functions to control playback for animations and video within OpenPolotno.

```typescript
store.play()
store.stop()
store.seek(timeMs)
```

--------------------------------

### OpenPolotno Store API - Page Management

Source: https://github.com/therutvikp/openpolotno/blob/main/README.md

Methods for adding, deleting, and selecting pages within the OpenPolotno store.

```typescript
store.addPage()
store.deletePages(ids)
store.selectPage(id)
```

--------------------------------

### Registering Customization Functions in OpenPolotno

Source: https://github.com/therutvikp/openpolotno/blob/main/README.md

Import and use these functions to customize OpenPolotno's behavior, such as registering new shapes, components, fonts, and handlers for uploads or background removal.

```typescript
import {
  registerShapeModel,
  registerShapeComponent,
  registerToolbarComponent,
  setGoogleFonts,
  addGlobalFont,
  setTranslations,
  setUploadFunc,
  setRemoveBackground,
  setHighlighterStyle,
  setTransformerStyle,
} from 'openpolotno/config';
```

--------------------------------

### OpenPolotno Store API - History Management

Source: https://github.com/therutvikp/openpolotno/blob/main/README.md

Methods for undoing, redoing, and clearing the history of actions in OpenPolotno.

```typescript
store.history.undo()
store.history.redo()
store.history.clear()
```

--------------------------------

### OpenPolotno Store API - Element Management

Source: https://github.com/therutvikp/openpolotno/blob/main/README.md

Methods for selecting, deleting, grouping, and ungrouping elements on the canvas.

```typescript
store.selectElements(ids)
store.deleteElements(ids)
store.groupElements(ids)
store.ungroupElements(id)
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.