ltn-classroom-layout is a standalone vanilla-JavaScript module (no framework, zero runtime dependencies) that renders an interactive classroom seating chart: a desk grid, round and oval tables, per-desk rotation and colour, drag-and-drop student assignment, border objects (wall, board, door, window), wheel zoom, print / PDF export and JSON import / export.

I originally built it for Le Tableau Noir and released it as a reusable package so any teacher or app can embed it.

Get the code

GitHub repository npm package
npm install ltn-classroom-layout

import { ClassroomLayout } from "ltn-classroom-layout";
import "ltn-classroom-layout/style.css";

const layout = new ClassroomLayout(document.getElementById("app"), {
  students: [{ id: "1", firstName: "Ada", lastName: "Lovelace", level: "Grade 5" }],
});
await layout.ready;

Live demo

This demo loads ltn-classroom-layout@1.3.0 — the current npm release — straight from the jsDelivr CDN. On the left, every option accepted by new ClassroomLayout(…) shown with its default value; on the right, the live result. Edit the JSON and press Apply to re-render. The roster is the 29 physicists of the 1927 Solvay Conference, with their Nobel year as the desk badge.