Component Input Guidelines

This playground renders pasted components by transpiling JSX in the browser. Use the formats below.

Supported

  • Plain JSX fragments or elements.
  • Export default function that returns JSX: export default function C() { return ( ... ) }
  • Tailwind classes and inline style attributes.
  • Static JSX with no external dependencies.

Not Supported

  • Arrow functions or const declarations: const C = () => ...
  • Stateful logic or React hooks like useState, useEffect.
  • Imports/exports other than a single default function wrapper.
  • Async/await, fetch, or side effects.
  • Custom components that rely on external files.
  • Event handlers with external references.

Tips

  • Prefer static JSX with Tailwind classes for styling.
  • Wrap multiple elements in a fragment: <>...</>
  • Use inline style only for quick color/size tweaks.