Skip to content
+

Getting Started with the Editor

Learn how to install and use the Editor component in your React application.

Installation

Install the package in your project directory with:

npm install @stoked-ui/editor

or with pnpm:

pnpm add @stoked-ui/editor

The Editor component requires the following peer dependencies:

npm install @mui/material @emotion/react @emotion/styled

Quick Start

Here's a basic example to get you started:

import * as React from 'react';
import { Editor, EditorProvider, Controllers } from '@stoked-ui/editor';

function App() {
  return (
    <div style={{ height: '600px', width: '100%' }}>
      <EditorProvider controllers={Controllers}>
        <Editor />
      </EditorProvider>
    </div>
  );
}

export default App;

Basic Usage

The Editor component must be wrapped in an EditorProvider to function properly:

import { Editor, EditorProvider, Controllers } from '@stoked-ui/editor';

<EditorProvider controllers={Controllers}>
  <Editor
    fileView={true}
    labels={true}
  />
</EditorProvider>

Key Props

  • fileView - Shows the file explorer panel
  • labels - Displays track labels in the timeline
  • minimal - Enables a simplified editor interface
  • fullscreen - Displays the editor in fullscreen mode

Next Steps