Pages
How to create and manage content pages in your classroom
What is a page?
Section titled “What is a page?”A page is a piece of course content you write and host for your students. Think lecture notes, project specs, reference guides, or any structured material you want to share alongside assignments.
Pages live in a Github repository that Classmoji creates automatically for your classroom (named content-{org}-{namespace}). Each page is stored as a structured JSON file in the editor’s block format, and Classmoji reads it back through the Github content API to render it. Students access pages directly from the classroom.
Creating a page
Section titled “Creating a page”Go to Pages and click New Page. There are three ways to create a page.
Create blank
Creates an empty page you fill in with the editor. Good for writing content from scratch.
- Title: becomes the page slug (e.g. “Week 3 Notes” ->
week-3-notes)
Import
Convert an existing Markdown file into a hosted page.
- Title: the page name
- Markdown file: upload a
.mdfile and it gets converted into an editable page - Images: optionally upload image files alongside the markdown. Classmoji matches references in the markdown to the uploaded files and rewrites the paths automatically
Batch import
Import multiple pages at once from a folder of Markdown files. Useful when migrating existing course notes.
Pages are uploaded sequentially with a progress bar. Failed pages are reported at the end without stopping the rest.
Editing a page
Section titled “Editing a page”Click a page title (or the edit button) from the Pages list. This opens the pages editor where you can write and format content visually. Changes are saved back to Github automatically.
Blocks you can use
Section titled “Blocks you can use”A page is a stack of blocks. Type / on an empty line to open the block menu, then keep typing to filter it (/code, /image). Markdown shortcuts work too: # for a heading, - or 1. for a list, > for a quote, and three backticks for code. The examples below show each block as students see it; the Headings, Check list and Locked section examples work, so you can try them as a student would.
Text
/h1 to /h6, or # to ###### Structure the page. Checkable heading 1, 2 or 3 (/check) adds a tick box students use to mark that section done. Try it below. Checkable headings
Clone the starter repository and run npm install.
Request the list from the API and show each item on the page.
/toggle heading A heading 1–3 that folds away the blocks nested under it. Readers open it with the arrow. Three more problems for anyone who wants them. They aren't graded.
/paragraph Select text for bold, italic, underline, strikethrough, colour, highlight and links. Wrap words in backticks for inline code; /emoji inserts an emoji.
Read chapter 4 before Tuesday, and bring your laptop.
Office hours are Monday Wednesday at 3pm.
Late work loses points unless you
ask before the deadline. Start from the
setup guide and run
npm test before you push. 🎉
/quote or > Set off a quotation or a passage from a reading. Programs must be written for people to read, and only incidentally for machines to execute.
/callout A highlighted note. In the editor, click the emoji to change it. Lists
/bullet or - Items in no particular order. Press Tab to nest. - Laptop with a code editor
- A Github account
- with two-factor sign-in
- Notebook
/numbered or 1. Steps that happen in order. - Fork the starter repository
- Make your changes on a branch
- Push and open a pull request
/check list or [] A list with boxes you tick in the editor; readers see them as you left them. In a Student check list (/student check list, or Students tick their own in an item's block menu) each signed-in student ticks their own. Try it below. Check list
Student check list
/toggle list An item that folds its nested blocks away. Readers open it with the arrow. Line endings. Set core.autocrlf to input and clone again.
Code
/code or ``` Code with syntax highlighting. Pick the language from the bar; readers get a Copy button, which you can turn off per block. Collapse long code (the button beside it) shows readers the first few lines of a block longer than 15, with a bar to show the rest. def average(scores):
"""Return the mean of a list of scores."""
if not scores:
return 0
return sum(scores) / len(scores)/terminal Commands to run, in a terminal window with its own title. Readers get a Copy button, which you can turn off per block. git clone https://github.com/your-org/starter.git
cd starter
npm install
npm run devMedia
/image Upload a picture or paste its link. Drag the edges to resize it and add a caption underneath. 
The Modules page, with this week's module open
/video Paste a YouTube or Vimeo link, or upload a video file. It plays on the page, with an optional caption. 
Walkthrough: setting up the project
/embed Show another site in a frame on the page: a CodePen, a Google Doc or Map, a slide deck. /file Attach a file. Signed-in members get a Download button. Everything you need for part 1
Download/audio Upload or link a recording; it plays on the page. Signed-in members get a Download button. Interview with a guest speaker
DownloadLayout and links
/table Rows and columns of text. Add rows and columns from the table's edges; the first row can be a header. | Week | Topic | Due |
|---|---|---|
| 1 | Tools and setup | Lab 0 |
| 2 | Functions and testing | Lab 1 |
| 3 | Working with data | Project proposal |
/columns (two or three) Put blocks side by side. Each column holds any blocks; drag a block next to another to make columns too. Read the chapter and try the warm-up problems.
Finish the lab and push your work by Friday.
/link Link to another page in the classroom: start typing and pick it by name. /divider A horizontal line between parts of a page. Part one ends here.
Part two starts here.
/directory A grid of tiles linking to pages, the course schedule or outside sites, in one or two columns. Handy at the top of a home page. /profile A person with a photo, name and role, such as the teaching staff on a syllabus. Put several in columns. /lock A title with a hidden body. Students press and hold the lock for about a second (or hold Space or Enter) to open it. Try it below. Staff can see when you unlock this.
res.json() returns a promise: await it.
const res = await fetch(url);
const items = await res.json();Checkable and locked sections
Section titled “Checkable and locked sections”Two kinds of section help students work through a page at their own pace: checkable sections they tick off as they go, and locked sections that stay closed until a student chooses to open them.
Checkable sections
Any heading 1, 2 or 3 can be checkable. Type / and pick Checkable heading 1, 2 or 3 (/check lists all three), or click a heading’s drag handle and turn on Checkable section. A small tick-box mark beside the heading shows it is checkable while you edit.
A section runs from its heading to the next heading of the same or a higher level. Students get a tick box next to the heading (try it in the Headings example). Ticking it marks the section done and fades it; pointing at the section brings it back, and ticking again marks it not done. Ticks are saved per student, so they are still there the next time the student opens the page.
In the editor, each checkable heading shows Done by and how many of your current students have ticked it. Click it to see who and when. Owners and teachers can also ask Claude (or another AI tool) connected through the MCP server for the page’s section status.
Student check lists
A check list can work the same way: type / and pick Student check list, or click an item’s drag handle in an existing list and turn on Students tick their own (it applies to the whole list). Each signed-in student ticks their own boxes (try it in the Check list example), and their ticks are saved like checkable headings. Signed-out visitors and the class website see the list as you left it. The editor shows no counts for list items; owners and teachers can see who ticked what through the MCP server.
Locked sections
Type / and pick Locked section. Give it a title, then write the body underneath it; the body can hold any blocks. Use it for anything students should try on their own first, such as a worked solution.
Students see the title on a card with the body hidden. To open it they press and hold the lock for about a second (on a keyboard, hold Space or Enter); letting go early cancels. Try it in the Locked section example. The card tells them staff can see when they unlock it. Unlocking is recorded and can’t be undone: from then on the section is open for that student, with the time they unlocked it.
In the editor, each locked section shows Unlocked by and how many of your current students have opened it. Click it to see who and when.
| Reader | What they see |
|---|---|
| Owners, teachers, assistants | The whole section, always. Nothing is recorded. |
| Students | The title, until they unlock it |
| Signed-out visitors (public pages) | The title, with Sign in to unlock |
| Class website visitors, staff included | The title, with Open in Classmoji to unlock (or Sign in to unlock when signed out) |
A locked body is never sent to a student who hasn’t unlocked it, so it can’t be read from the page source. Search finds a locked section by its title only, for everyone. An AI tool working for a student, such as Ask Moji or their own MCP connection, sees only the sections that student has unlocked; staff’s AI tools see every body, as staff do on the page. Students who use the MCP server can tick and unlock sections from there too, and their AI tool asks them to confirm before unlocking.
On the class website, checkable headings show as plain headings.
Page status
Section titled “Page status”Each page has a status that controls who can see it.
| Status | Who can access |
|---|---|
| Draft | Nobody. The page is hidden from all students. |
| Private | Enrolled students only (requires login) |
| Public | Anyone with the link, no login required |
Change status from the dropdown in the Pages table. This is useful for releasing content on a schedule: draft it first, then set it to private or public when you’re ready.
Student navigation menu
Section titled “Student navigation menu”The Menu toggle controls whether a page appears in the student sidebar navigation. Turn it on for pages you want students to find easily (e.g. the course syllabus or a reference sheet). Leave it off for supplemental content you link to from within assignments.
What students see
Section titled “What students see”Students navigate to a page via the classroom menu or a direct link. The page renders as a clean, styled document. Public pages work without a login, so you can share them with anyone. Checkable headings carry a tick box, and locked sections show only their title until the student opens them (see Checkable and locked sections).
Viewer tracking
Section titled “Viewer tracking”The Pages list shows recent viewers for each page, with avatars grouped by role (students, teaching team). Hover to see total view counts. Useful for knowing which materials students are actually reading.