React Live Editor
Build interactive documentation using React Live Editor.
Write live codePermalink for this section
To include a live code editor, add live in the head of your code block:
import { LiveEditor } from "@visulima/nextra-theme-docs/components";<LiveEditor language="js"> <div>Example</div></LiveEditor>;
Result:
<div>Example</div>
Write complex examplesPermalink for this section
By default only a single JSX expression is allowed. It is common to have to write more complex examples. The noInline flag makes it possible. When activated, you have to call a render() method to define the expression rendered in preview:
import { LiveEditor } from "@visulima/nextra-theme-docs/components";<LiveEditor code={`const content = 'Example';render(<div>{content}</div>)`} language="jsx" noInline/>;
Result:
const content = 'Example'; render(<div>{content}</div>)
To know more about
noInlinemode, read react-live documentation (opens in a new tab).
Import modulesPermalink for this section
Importing modules is possible in a React Live Editor using ESM import syntax. It is an emulation of the import, it means you don't have access to all modules by default. To be able to import a module, first you have to specify it using LiveConfig component.
---title: Doc Page---import { x } from '@test/example'import { LiveEditor } from "@visulima/nextra-theme-docs/components";<!-- Define `@test/example` module as `{ x }` --><LiveEditor language="jsx" noInline modules={{ '@test/example': { x } }} code={`import { x } from '@test/example'// I can use example here.render( <x.div color="red"> <span>Example</span> </x.div>,)`} />
Once defined, you have access to the module in live editor