real-time-monaco

Demo

Check out the demo app: real-time-monaco Demo

A real-time collaborative code editor component using Monaco Editor and Yjs for state synchronization.

Features

• Real-time collaboration with multiple users.
• User cursors and selections highlighting.
• Easy integration with React applications.

Installation

npm install real-time-monaco

Usage

import React from 'react';
import { RealTimeMonaco } from 'real-time-monaco';

const App = () => {
  return (
    <RealTimeMonaco
      height='100vh'
      width='100vw'
      name="YourName"
      roomId="unique-room-id"
      color="#ff0000"
    />
  );
};

export default App;

Props

| Prop | Type | Description | | ------ | ------ | ---------------------------------- | | name | string | The name of the user. | | roomId | string | The unique ID for the collaboration room. | | color | string | The color used to represent the user. |

License

MIT License