Interactive Code Playground

This page demonstrates the Live Codeblock feature powered by @docusaurus/theme-live-codeblock.

What is Live Codeblock?

Live Codeblock allows you to write interactive React components directly in your documentation. Readers can edit and see the results in real-time!

Basic Example

Try editing the code below - your changes will appear instantly!

Live Editor

function WelcomeMessage() {
  const [name, setName] = React.useState('Developer');

  return (
    <div style={{
      padding: '20px',
      border: '2px solid #25c2a0',
      borderRadius: '8px',
      backgroundColor: '#f0f9ff'
    }}>
      <h3>Welcome, {name}!</h3>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
        style={{
          padding: '8px',
          fontSize: '16px',
          borderRadius: '4px',
          border: '1px solid #ccc'
        }}
      />
    </div>
  );
}

Result

Loading...

Counter Example

A classic React counter component:

Live Editor

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <h2>Counter: {count}</h2>
      <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
        <button
          onClick={() => setCount(count + 1)}
          style={{
            padding: '10px 20px',
            fontSize: '16px',
            backgroundColor: '#25c2a0',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Increment
        </button>
        <button
          onClick={() => setCount(count - 1)}
          style={{
            padding: '10px 20px',
            fontSize: '16px',
            backgroundColor: '#e74c3c',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Decrement
        </button>
        <button
          onClick={() => setCount(0)}
          style={{
            padding: '10px 20px',
            fontSize: '16px',
            backgroundColor: '#95a5a6',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer'
          }}
        >
          Reset
        </button>
      </div>
    </div>
  );
}

Result

Loading...

Water Level Monitor Example

Here's a water management themed example for FluxGen:

Live Editor

function WaterLevelMonitor() {
  const [waterLevel, setWaterLevel] = React.useState(50);

  const getColor = () => {
    if (waterLevel < 30) return '#e74c3c'; // Red - Low
    if (waterLevel < 70) return '#f39c12'; // Orange - Medium
    return '#27ae60'; // Green - Good
  };

  const getStatus = () => {
    if (waterLevel < 30) return 'Low - Action Required';
    if (waterLevel < 70) return 'Moderate - Monitor';
    return 'Optimal - All Good';
  };

  return (
    <div style={{
      padding: '30px',
      backgroundColor: '#f8f9fa',
      borderRadius: '10px',
      fontFamily: 'Arial, sans-serif'
    }}>
      <h3 style={{ textAlign: 'center', color: '#2c3e50' }}>
        Water Level Monitor
      </h3>

      <div style={{
        width: '100%',
        height: '40px',
        backgroundColor: '#ecf0f1',
        borderRadius: '20px',
        overflow: 'hidden',
        marginBottom: '20px'
      }}>
        <div style={{
          width: `${waterLevel}%`,
          height: '100%',
          backgroundColor: getColor(),
          transition: 'all 0.3s ease',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: 'white',
          fontWeight: 'bold'
        }}>
          {waterLevel}%
        </div>
      </div>

      <div style={{
        textAlign: 'center',
        marginBottom: '20px',
        fontSize: '18px',
        color: getColor(),
        fontWeight: 'bold'
      }}>
        Status: {getStatus()}
      </div>

      <input
        type="range"
        min="0"
        max="100"
        value={waterLevel}
        onChange={(e) => setWaterLevel(parseInt(e.target.value))}
        style={{
          width: '100%',
          height: '8px',
          cursor: 'pointer'
        }}
      />
    </div>
  );
}

Result

Loading...

How to Use

To create a live code block, simply add the live keyword after the language identifier:

```jsx live
function MyComponent() {
  return <div>Hello World!</div>;
}
```

Features

• Real-time preview: See changes as you type
• Full React support: Use hooks, state, and components
• Interactive: Great for tutorials and examples
• Educational: Helps users learn by doing

Use Cases for FluxGen Docs

• Interactive API response examples
• Data visualization components
• Form input demonstrations
• Alert and notification previews
• Dashboard widget prototypes

Try modifying any of the examples above to see how they work!