Quick Start: Using Interactive Components

Use this guide when you need to add interactive elements to .mdx pages without breaking readability or performance.

Basic Usage

1) Import the component

Add imports at the top of your file:

import InteractiveCodeEditor from '@site/src/components/InteractiveCodeEditor';

2) Render the component

Place the component near the section where users need it:

<InteractiveCodeEditor 
  title="Example"
  initialCode="console.log('Hello!');"
/>

3) Validate locally

Run local preview:

npm start

Open http://localhost:3000 and validate keyboard, mobile, and dark-mode behavior.

Common patterns

Code Tutorial

import InteractiveCodeEditor from '@site/src/components/InteractiveCodeEditor';

<InteractiveCodeEditor 
  title="Learn JavaScript Arrays"
  initialCode={`const fruits = ['apple', 'banana', 'orange'];
console.log(fruits[0]);
fruits.push('grape');
console.log(fruits);`}
/>

Multi-Language Examples

import { CodeTabs } from '@site/src/components/InteractiveTabs';

<CodeTabs 
  examples={[
    {
      label: 'JavaScript',
      code: 'console.log("Hello");'
    },
    {
      label: 'Python',
      code: 'print("Hello")'
    }
  ]}
/>

FAQ Section

import { FAQAccordion } from '@site/src/components/InteractiveAccordion';

<FAQAccordion 
  faqs={[
    {
      question: 'How do I get started?',
      answer: 'Simply import the component and use it in your MDX file!'
    }
  ]}
/>

API Documentation

import APISimulator from '@site/src/components/APISimulator';

<APISimulator 
  endpoint="/api/data"
  method="GET"
  description="Fetch data from the API"
/>

Tutorial Progress

import ProgressTracker from '@site/src/components/ProgressTracker';

<ProgressTracker 
  title="Complete This Tutorial"
  steps={[
    { title: 'Step 1', description: 'First step', duration: '5 mins' },
    { title: 'Step 2', description: 'Second step', duration: '10 mins' }
  ]}
/>

Authoring recommendations

• Keep one component per learning objective.
• Use realistic sample data and commands.
• Prefer clarity over visual density.
• Add fallback text for users who skip interactive blocks.
• Validate accessibility before publishing.

Need Help?

• Full Documentation
• Contact Support
• See Markdown Features for additional examples

---

Ship interactive content intentionally, not decoratively.