Skip to main content

Interactive Components Demo

Welcome to the interactive components showcase! This page demonstrates all the reactive components available in TechDocs to make your documentation more engaging and intuitive.

Quick Navigation​

Jump to any component:

Interactive Code Editor​

The Interactive Code Editor allows readers to write, edit, and execute JavaScript code directly in your documentation. Perfect for tutorials and code demonstrations.

Features​

  • Live code execution
  • Instant output display
  • Error handling
  • Reset functionality

Demo​

Try JavaScript Here

Code
Output
Click "Run Code" to see output...

How to Use​

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

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

Interactive Tabs​

The Interactive Tabs component lets you organize multiple related pieces of content in a clean, tabbed interface. Perfect for showing code examples in different languages or comparing different approaches.

Features​

  • Smooth transitions
  • Keyboard accessible
  • Icon support
  • Responsive design

Demo​

// JavaScript Example
fetch('/api/users')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

Custom Content Tabs​

What are Interactive Tabs?

Interactive tabs help organize related content in a space-efficient manner. Users can switch between different views without leaving the page.

  • Easy navigation
  • Reduced scrolling
  • Better UX

How to Use​

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

// For code examples
<CodeTabs 
  examples={[
    { label: 'JavaScript', code: '...' },
    { label: 'Python', code: '...' }
  ]}
/>

// For custom content
<InteractiveTabs 
  tabs={[
    { label: 'Tab 1', content: <div>Content here</div> },
    { label: 'Tab 2', content: <div>More content</div> }
  ]}
/>

Interactive Accordion​

The Interactive Accordion component creates collapsible sections perfect for FAQs, documentation sections, and detailed explanations that users can expand on demand.

Features​

  • Smooth animations
  • Single or multiple expansion
  • Icon support
  • Accessible

Demo​

To get started with interactive components, simply import them into your MDX files:

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

Then use them like any other React component in your markdown content.

FAQ Example​

How to Use​

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

// Regular accordion
<InteractiveAccordion 
  allowMultiple={true}
  items={[
    { title: 'Section 1', content: <div>Content</div> },
    { title: 'Section 2', content: <div>Content</div> }
  ]}
/>

// FAQ accordion
<FAQAccordion 
  faqs={[
    { question: 'Question?', answer: 'Answer here' }
  ]}
/>

API Simulator​

The API Simulator provides an interactive way to demonstrate API endpoints, allowing users to modify parameters and see mock responses in real-time.

Features​

  • Multiple HTTP methods
  • Query parameters
  • Request body editing
  • Mock response simulation
  • Response time tracking

Demo​

🔌 API Simulator

Fetch user data from the API

POST Request Example​

🔌 API Simulator

Create a new user

How to Use​

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

<APISimulator 
  endpoint="/api/endpoint"
  method="GET"
  description="API description"
  initialParams={{"key": "value"}}
  initialBody='{"data": "value"}'
/>

Progress Tracker​

The Progress Tracker component helps users track their progress through tutorials, learning paths, or multi-step guides. It's perfect for educational content.

Features​

  • Visual progress bar
  • Click to mark steps complete
  • Duration indicators
  • Completion celebration

Demo​

Learn TechDocs Components

0 of 6 completed
0%
1

Setup Your Environment

Install Node.js and Docusaurus to get started with building documentation.

⏱️ 10 mins
2

Learn Interactive Code Editor

Understand how to add live code execution to your docs.

⏱️ 15 mins
3

Master Interactive Tabs

Create multi-language code examples and tabbed content.

⏱️ 10 mins
4

Use Accordion Components

Build collapsible FAQs and detailed sections.

⏱️ 12 mins
5

Implement API Simulator

Add interactive API documentation to your site.

⏱️ 20 mins
6

Track Progress

Help users track their learning journey with progress trackers.

⏱️ 8 mins

How to Use​

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

<ProgressTracker 
  title="Tutorial Progress"
  steps={[
    {
      title: 'Step 1',
      description: 'Description here',
      duration: '5 mins'
    },
    {
      title: 'Step 2',
      description: 'Description here',
      duration: '10 mins'
    }
  ]}
/>

Best Practices​

When using interactive components in your documentation:

  1. Use Sparingly - Don't overload pages with too many interactive elements
  2. Provide Context - Always explain what the component does before showing it
  3. Set Good Defaults - Pre-fill with meaningful examples
  4. Mobile First - Test on mobile devices to ensure good UX
  5. Accessibility - Ensure keyboard navigation works properly

Tips for Success​

  • Code Editor: Great for tutorials and coding exercises
  • Tabs: Perfect for multi-language code examples
  • Accordion: Ideal for FAQs and optional detailed information
  • API Simulator: Excellent for API documentation and testing
  • Progress Tracker: Essential for tutorials and learning paths

Next Steps​

Ready to start using these components?

  1. Copy the component import statement
  2. Paste it at the top of your MDX file
  3. Add the component with your custom props
  4. Preview your documentation

Need help? Check out our documentation guide or contact support.

Connect with the author: Roushan Gupta on LinkedIn

Start Building Interactive Docs Today!

These components are ready to use in all your documentation pages.

Last updated on

Was this page helpful?