Conclavity is an embeddable, real-time, collaborative text editor for the browser.
This library is inspired by the Conclave editor created by the Conclave-Team. If you enjoy using the Conclave Editor and want to embed it into your own project, this is the library for you.
Note: Chrome 63 introduced a bug that we are currently dealing with. Conclavity still works with older versions of Chrome, Chrome Beta and Firefox.
Installing this editor is as easy as:
npm install --save conclavity
<html>
<head>
</head>
<body>
<div id="conclave"></div>
</body>
</html> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/conclavity/dist/conclavity.css" />// script.js
import Conclavity from 'conclavity';
new Conclavity();You can then use Browserify -- or any other bundling library -- to modularize the script file.
Conclavity provides an API with options for configurability.
| Option | Default | Description |
|---|---|---|
peerId |
null |
You can provide your own peerId to the Peer Server |
peer |
null |
Allows you to create your own instance of Peer Server. If left blank, Conclavity uses a default instance of Peer Server |
shareLink |
true |
Provides a link to share with other users to collaborate |
icons |
true |
If set to true, phone icons will appear next to users' name to indicate they can be called |
video |
true |
Allows the ability for users to do one-on-one video chat |
changeUrl |
true |
Changes the current URL so if user refreshes page, they will remain in collaboration session with other users |
errorMessage |
true |
Provides an error message when user gets disconnected from signaling server |
showPeers |
true |
Show the other peers that are user is collaborating with |
peersLeft |
true |
The peer lists appear to the left of document if true, otherwise to the right. |
placeholder |
message | Specify the placeholder message that will appear in the document. Defaults to Share the link to invite collaborators to your room |
Example
// script.js
import Peer from 'peerjs_fork_firefox40';
import Conclavity from 'conclavity';
const peer = new Peer({
host: location.hostname,
port: location.port || (location.protocol === 'https:' ? 443 : 80),
path: '/peerjs',
debug: 3
});
const demo = new Conclavity({
peer: peer,
shareLink: false,
icons: false,
video: false,
changeUrl: false,
placeholder: 'This is an example!'
});If you have cloned the repository, made changes and want to see how those changes look. You can run
npm run debugand open up the debug.html file listed under the example folder. You should be able to see any changes you've made.
MIT