How a Lesson Is Written
See the source code behind a lesson, then watch the same components render live — proof that MDX keeps writing simple.
"Manjari," Leela asks, "you said this whole site is written in plain text. Can you show me what a lesson actually looks like before it becomes a page?"
Manjari taps the screen with her wing. "Of course. Here is a miniature lesson — the whole thing, from source to finished page."
The Source
This is a real .mdx file — the kind an author writes. Notice how it is just text: headings, sentences, and a few component tags.
---
title: A Mini Lesson
description: A tiny example lesson, just for the demo.
---
<LearningObjective>
Understand why Mars looks red.
</LearningObjective>
# A Mini Lesson
**Mars** is the fourth planet from the Sun.
<DidYouKnow>
Mars has two tiny moons, Phobos and Deimos.
</DidYouKnow>
<KeyTakeaway>
Mars is red because of rust in its soil.
</KeyTakeaway>
That is the whole file. No styling code, no layout code, no JavaScript — just words and a few tags. So how does it become a pretty page?
The Result
Docusaurus feeds that file through MDX, which understands the tags as React components. The same file, rendered:
Understand why Mars looks red.
Mars is the fourth planet from the Sun.
Mars has two tiny moons, Phobos and Deimos.
Mars is red because of rust in its soil.
The author never wrote a single line of CSS. The components carry their own polished styling — and every lesson on this site reuses them.
The Building Blocks
This site ships with a small library of learning components. Authors reach for them like stamps in a stationery box:
Leela, Manjari, and Astra speak through these
Highlight facts and gentle warnings
A ready-made summary card for any world
Interactive multiple-choice checks
The one thing to remember
Guide the learner forward
Because content is plain text, anyone can write a lesson with a simple editor. Because the components are reusable, every lesson is instantly polished. That combination is the heart of this demo.
An MDX lesson is a text file with component tags. MDX compiles it into styled, interactive pages — letting authors focus on teaching, not on code.