Live TSX

LiveTSX renders an editable, instantly evaluated TSX example with react-live. It shows a live preview, a code editor, and any evaluation errors.

Usage

import { LiveTSX } from 'idea-react';

<LiveTSX scope={{ Button }}>
  <Button theme="primary">Edit me live</Button>
</LiveTSX>;

React element children are serialized to JSX source for the editor; string children are used as the code directly. Provide every referenced component or value through scope.

Error handling

Evaluation errors render below the editor in a fg-danger block, so broken edits never crash the page.