Edrys.js: The Engine Behind the Edrys Modules

Behind every Edrys-Lite module we’ve explored - from the Editor to the Survey Module - lies a powerful JavaScript library that makes it all work seamlessly: Edrys.js. This library handles the complex parts of real-time collaboration so module developers can focus on creating great learning experiences.

Edrys.js is the client library that connects modules to the Edrys-Lite classroom environment. It provides a simple API for:

Think of it as the foundation that transforms independent web components into collaborative classroom tools.

Building real-time collaborative applications from scratch is complex. You need to handle WebSocket connections, state synchronization, conflict resolution, and more. Edrys.js abstracts all this complexity:

// Instead of managing WebSocket connections manually...
// Just send a message
Edrys.sendMessage("execute", codeContent);

// Instead of implementing state synchronization...
// Just use reactive state
const state = Edrys.getState("data", "Map");
state.set("key", "value");

Module developers get collaboration features for free, letting them focus on pedagogy rather than plumbing.

Edrys.js makes module-to-module communication trivial. The Editor Module sends code to the Terminal Module with a single function call:

// Send code to any listening module
Edrys.sendMessage("execute", userCode);

// Receive messages from other modules
Edrys.onMessage(({ from, subject, body }) => {
  if (subject === "execute") {
    runCode(body);
  }
});

This pub-sub pattern lets modules work together without knowing about each other’s internals - loose coupling at its finest.

The library uses Yjs for conflict-free state synchronization. Changes made by one user automatically propagate to everyone:

// Get a shared map that syncs across all users
const sharedData = Edrys.getState("canvas", "Map");

// Changes update for everyone in real-time
sharedData.set("drawing", canvasData);

// React to changes from other users
Edrys.onUpdate(() => {
  renderCanvas(sharedData.get("drawing"));
});

This powers collaborative features like synchronized editor content and shared whiteboards.

Modules adapt to different user roles automatically:

// Access role-specific configuration
if (Edrys.role === "teacher") {
  showAdminControls();
  loadTeacherConfig(Edrys.module.teacherConfig);
} else if (Edrys.role === "student") {
  loadStudentConfig(Edrys.module.studentConfig);
}

This single library supports different experiences for teachers, students, and stations without duplicating code.

Edrys.js handles the complexity of WebRTC and WebSocket streaming:

// Share a video stream with everyone
const stream = await navigator.mediaDevices.getUserMedia({
  video: true,
  audio: true
});

Edrys.sendStream(stream, {
  method: "webrtc" // or "websocket"
});

// Receive streams from others
Edrys.onStream((stream, settings) => {
  videoElement.srcObject = stream;
});

The Streaming Module uses this to share live video effortlessly.

With Edrys.js, building custom modules is straightforward:

The library handles all the classroom integration automatically. Module developers just need to know a bit of JavaScript and HTML.

Edrys.js is open source, meaning:

Every module we’ve discussed in this blog series is built with Edrys.js, demonstrating its versatility and power.

Edrys.js doesn’t just power existing modules - it enables future innovation. Educators and developers can create:

The library provides the foundation; imagination provides the direction.

Want to create your own Edrys-Lite module? The Edrys.js library makes it accessible. Start with a simple HTML file, include the library, and begin building. The full API documentation guides you through everything from basic messaging to advanced state management.

Edrys.js proves that powerful collaboration tools don’t require complex frameworks or extensive infrastructure. Sometimes, the right abstraction is all you need to transform complexity into simplicity.

Explore module examples: edrys-labs on GitHub

Ready to build your own collaborative learning tools? Edrys.js provides the foundation - you bring the creativity!