Skip to main content

Quick Reference Index

Use this page as a navigation hub for the most-used documentation assets.

Core docs​

Component Documentation​

What is available​

Markdown and MDX​

  • Standard Markdown: headings, lists, tables, links, and images
  • MDX: React components within content flow
  • Admonitions: structured notes, warnings, and cautions
  • Code blocks: syntax, titles, line highlights
  • Math: KaTeX support for formulas

See: MDX Features Reference

Interactive Components (11 total)​

Learning & Education​

  1. InteractiveQuiz - Test knowledge with scoring
  2. ProgressTracker - Track tutorial completion

Code & Development​

  1. InteractiveCodeEditor - Live JavaScript execution
  2. TerminalSimulator - CLI demonstrations
  3. InteractiveTabs - Multi-language examples

Data & Information​

  1. SearchableTable - Sortable data tables
  2. LiveSearch - Real-time filtering
  3. InteractiveAccordion - Collapsible FAQs

API & Integration​

  1. APISimulator - API endpoint testing

Visual & Media​

  1. ImageComparison - Before/after sliders
  2. InteractiveCallout - Styled alerts

See: All Interactive Components

By use case​

For Tutorials​

  • ProgressTracker - Track completion
  • InteractiveCodeEditor - Live coding
  • InteractiveQuiz - Test knowledge
  • TerminalSimulator - CLI commands

For API Documentation​

  • APISimulator - Test endpoints
  • InteractiveTabs - Multi-language examples
  • SearchableTable - Endpoint reference
  • CodeTabs - Request/response examples

For User Guides​

  • InteractiveAccordion - FAQs
  • InteractiveCallout - Important notes
  • ImageComparison - Before/after
  • LiveSearch - Content discovery

For Technical Writing​

  • Code blocks with highlighting
  • Docusaurus admonitions
  • Math equations (KaTeX)
  • Tables and diagrams

Quick start​

1) Choose content type​

Static Content (.md)

  • Pure markdown
  • No interactive components
  • Faster to write

Interactive Content (.mdx)

  • Markdown + React components
  • All 11 interactive components available
  • More engaging

2) Add frontmatter​

---
title: My Page Title
description: Page description
sidebar_position: 1
---

3) Import components (for .mdx)​

import InteractiveQuiz from '@site/src/components/InteractiveQuiz';
import TerminalSimulator from '@site/src/components/TerminalSimulator';

4) Draft content​

Mix markdown with components:

# My Tutorial

Regular markdown content here...

<InteractiveQuiz questions={[...]} />

More content...

<TerminalSimulator commands={{...}} />

5) Preview​

npm start

Visit: http://localhost:3000

Cheat sheet​

Most Used Syntax​

# Heading
**bold** *italic* `code`
[link](url)
![image](url)
- list item
> blockquote

Most Used Components​

// Code execution
<InteractiveCodeEditor initialCode="..." />

// Multi-language
<CodeTabs examples={[...]} />

// FAQs
<FAQAccordion faqs={[...]} />

// Alerts
<InteractiveCallout type="warning" title="...">

Most Used Admonitions​

:::tip
Helpful tip here
:::

:::warning
Important warning
:::

:::note
Additional information
:::

File structure​

docs/
├── mdx-features-reference.md           Complete syntax guide
├── all-interactive-components.mdx      All 11 components
├── interactive-components.mdx         Original 5 components
├── quick-start-components.md          Quick guide
└── tutorial-basics/
    └── markdown-features.mdx          Examples & tutorials

Learning path​

Beginner

  1. Read MDX Features Reference
  2. Try basic markdown syntax
  3. Add simple components (Callout, Tabs)

Intermediate 4. Use Quick Start Guide 5. Implement Accordion, LiveSearch 6. Combine multiple components

Advanced 7. Create interactive tutorials with Quiz + Progress 8. Build API docs with Simulator + Tabs 9. Customize component styling

Pro tips​

  • Bookmark this page for daily use.
  • Start with the MDX reference before composing complex pages.
  • Copy from working examples and adapt with intent.
  • Test responsive behavior before publishing.
  • Keep interactive content focused on user outcomes.

Find what you need​

"I want to..."​

...see all syntax → MDX Features Reference
...use components → All Interactive Components
...start quickly → Quick Start Guide
...see examples → Markdown Features

"I need..."​

...a quiz → InteractiveQuiz
...code examples → CodeTabs or InteractiveCodeEditor
...FAQs → InteractiveAccordion
...API docs → APISimulator
...data tables → SearchableTable
...search → LiveSearch
...alerts → InteractiveCallout
...terminal → TerminalSimulator
...comparisons → ImageComparison

Support​

Need Help?

Summary​

This index is your fastest route to syntax references, component docs, and implementation guides.

Last updated on

Was this page helpful?