We all know the specific frustration of the "Syllabus Sprawl." You spend weeks designing a beautiful course page in the Rich Content Editor (RCE), but the moment you copy it to next semester’s shell, the formatting drifts. Links break. Styles revert. Worst of all, if you discover a typo in your policy section, you have to manually update it across five different active sections.
As developers and instructional designers, we treat our software code with rigorous version control, yet we often manage our course content like it’s 1999—manually editing live production files in a WYSIWYG editor.
I built The Living Syllabus to solve this. It is an open-source toolchain that brings "Docs-as-Code" methodologies to the Canvas LMS.
The Philosophy: Syllabus as Code
The core premise is simple: The RCE is for deployment, not development.
In this workflow, you never write content directly inside Canvas. Instead, you maintain your course materials as flat Markdown (.md) or structured Word (.docx) files in a local Git repository. This becomes your "Single Source of Truth."
You then run a build engine that compiles these source files into Canvas-Ready HTML—sanitized, styled, and mobile-responsive—which you simply paste into the HTML view of your Page.
The Architecture: How It Works
The engine (generate.js) is a Node.js wrapper that pipes content through three stages to negotiate the strict constraints of the Canvas Sanitizer.
1. Normalization (Pandoc)
First, we use Pandoc to convert the source text (Markdown or Docx) into clean, semantic HTML5. This ensures that a # Header in Markdown and a Heading 1 in Word result in the exact same <h1> tag, stripping away the proprietary MSO-XML garbage that usually plagues Word-to-HTML conversions.
2. Theming (Juice + Classless CSS)
This is the critical step. As you know, Canvas strips <link> tags and <style> blocks for security. To get around this, we use Juice to take a "Classless CSS" theme (like Sakura, Tacit, or Water) and inline the CSS directly into the HTML tags.
Instead of:
<link rel="stylesheet" href="theme.css"><h1>Syllabus</h1>
The engine outputs:
<h1 style="color: #2b2b2b; border-bottom: 2px solid #eaeaea; font-family: sans-serif;">Syllabus</h1>
This produces a "flat" HTML artifact that carries its own styling dependencies with it, making it immune to global CSS changes in the LMS.
3. Scoping & Sanitization
Finally, the script wraps the output in a unique scope (e.g., .living-syllabus) to ensure our styles don't bleed out and break the global Canvas UI (like the navigation bar or SpeedGrader).
The Dev Experience
For the power users here, the project includes a Makefile and a Watcher script. You can set up a live-preview environment where you edit your syllabus.md in VS Code, and every time you hit Save, the engine recompiles the HTML instantly.
It effectively treats your Canvas course like a static site generator (SSG).
Version Control: Store your entire course history in GitHub.
Batch Updates: Change a policy in your source Markdown, run make, and generate updated HTML files for every assignment in seconds.
Theme Agnostic: Want to refresh your course look? Swap the CSS theme file, rebuild, and your entire course has a new visual design without touching a single line of content.
Compatibility Note
The output is engineered specifically to survive the canvas_sanitize filter. We rely on Safe List features:
Layouts: Uses display: flex; flex-wrap: wrap; for columns (avoiding grid, which can be spotty, and media queries, which are often stripped).
Interactivity: Uses native <details> and <summary> tags for accordions, which are the only interactive elements currently allowed by the whitelist.
Dark Mode: The themes use intelligent RGBA transparency rules (e.g., background: rgba(0,0,0,0.05)) so content automatically adapts to high-contrast or dark mode user preferences.
Get the Code
The project is open source (MIT License). You can clone the repo, grab the generate.js script, and start building your own themes today.
GitHub Repository: https://github.com/ryanncode/living-syllabus](https://github.com/ryanncode/living-syllabus
Documentation: https://thing.rodeo/living-syllabus
Web Generator: https://ryanncode.github.io/living-syllabus/generate.html
I’d love to see what custom themes this community can build. If you have ideas for improving the sanitization handling or expanding the component library, please open a PR!
