React UI Snippet Previewer

Code Input (React JSX)

// React, ReactDOM, and hooks like React.useState are globally available.
// No 'import React from "react";' statement is needed.

const MyTestComponent = () => {
  const [count, setCount] = React.useState(0);
  const [showMessage, setShowMessage] = React.useState(false);

return (
    <div className="p-6 bg-card text-card-foreground rounded-lg shadow-md max-w-md mx-auto">
      <h1 className="text-3xl font-bold text-primary mb-4">
        React Test Snippet (Arrow Fn)
      </h1>
      <p className="text-muted-foreground mb-2">Current count: <span className="font-semibold text-lg text-accent">{count}</span></p>
      
      {showMessage && (
        <p className="mt-2 text-green-500">This is a conditional message!</p>
      )}
      
      <div className="flex space-x-3 mt-4">
        <button 
          onClick={() => setCount(count + 1)}
          className="bg-primary text-primary-foreground px-5 py-2.5 rounded-md hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
        >
          Increment Count
        </button>
        <button 
          onClick={() => setShowMessage(!showMessage)}
          className="bg-secondary text-secondary-foreground px-5 py-2.5 rounded-md hover:bg-secondary/80 transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
        >
          Toggle Message
        </button>
      </div>
      <p className="text-xs text-muted-foreground mt-6">
        This component is rendered using React within the preview.
      </p>
    </div>
  );
};

// IMPORTANT: To render your component, make sure its name
// is the last expression in this snippet.
// Do NOT use 'export default YourComponent;'
MyTestComponent;

How to Use This React Previewer

React is Global: React, ReactDOM, and hooks (e.g., React.useState) are pre-loaded. Do not use import React from 'react';.

Component Definition: Define your React component. The const MyComponent = () => ; style is currently recommended for best reliability in this previewer.

Render by Last Expression: To render your component, ensure its name is the final expression in your snippet (e.g., after defining MyComponent, add MyComponent; on the last line).

Alternative - Direct Render: You can call ReactDOM.render(<YourComponent />, document.getElementById('react-root')); directly in your snippet. If so, the "last expression" rule is not needed.

No Module Exports: Do not use export default MyComponent;.

Styling: Tailwind CSS (CDN) and your app's theme variables (e.g., text-primary) are applied.

Project Component Imports: Direct import of project components (like ShadCN UI) is not supported. Define components within the snippet or use standard HTML styled with Tailwind.

Live Preview

Loading preview environment...