Skip to main content

Quick Reference Index

Fast Access to All TechDocs Resources and Features

Essential Documentation​

Component Documentation​

What's Available?​

Markdown & MDX Syntax​

Standard Markdown - Headers, lists, tables, links, images
MDX (React in Markdown) - Use components anywhere
Docusaurus Admonitions - Note, tip, info, warning, danger
Code Blocks - Syntax highlighting, titles, line numbers
Math Equations - KaTeX support for formulas
Live Code Blocks - Interactive React examples

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 Your 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 (if using .mdx)​

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

4. Write Your 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 - Quick access to everything
Start with MDX reference - One-page syntax guide
Copy from examples - See working code
Test responsive - Check mobile view
Use components wisely - Don't overload pages
Preview changes - Always run npm start

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​

You have access to:

  • Complete MDX/Markdown syntax
  • 11 interactive components
  • Docusaurus features
  • Math equations (KaTeX)
  • Live code blocks
  • Comprehensive examples

Everything in one organized place!

Last Updated: January 11, 2026

Bookmark this page for quick access to all TechDocs features!

Last updated on

Was this page helpful?