https://github.com/uiwjs/react-code-preview
Code edit preview for React.
https://github.com/uiwjs/react-code-preview
code-preview codemirror editor react react-codemirror reactjs typescript
Last synced: 6 months ago
JSON representation
Code edit preview for React.
- Host: GitHub
- URL: https://github.com/uiwjs/react-code-preview
- Owner: uiwjs
- License: mit
- Created: 2019-08-05T15:58:58.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-04-02T09:25:36.000Z (11 months ago)
- Last Synced: 2025-07-02T15:55:01.587Z (7 months ago)
- Topics: code-preview, codemirror, editor, react, react-codemirror, reactjs, typescript
- Language: TypeScript
- Homepage: https://uiwjs.github.io/react-code-preview
- Size: 192 MB
- Stars: 67
- Watchers: 2
- Forks: 11
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
## React Code Preview
[](https://github.com/uiwjs/react-code-preview/actions)
[](https://github.com/uiwjs/react-code-preview/releases)
[](https://www.npmjs.com/package/@uiw/react-code-preview)
[](https://uiw.gitee.io/react-code-preview/)
Code edit preview for React. Preview Demo: https://uiwjs.github.io/react-code-preview
There are often a lot of sample code in the documentation. We hope that you can run the sample code to view the rendering interface as you read the document.
## Install
```bash
npm install @uiw/react-code-preview --save
```
## Usage
### In React 18
[](https://codesandbox.io/embed/uiw-react-code-preview-react-18-1bmhhd?fontsize=14&hidenavigation=1&theme=dark)
```jsx
import Button from '@uiw/react-button';
import CodePreview from '@uiw/react-code-preview';
const code = `import Button from '@uiw/react-button';
import ReactDOM from 'react-dom/client';
ReactDOM.createRoot(_mount_).render(
主要按钮
成功按钮
,
);`;
export default function App() {
return ;
}
```
### In React 17
[](https://codesandbox.io/embed/uiw-react-code-preview-react-17-t6ro9?fontsize=14&hidenavigation=1&theme=dark)
```jsx
import Button from '@uiw/react-button';
import CodePreview from '@uiw/react-code-preview';
const code = `import Button from '@uiw/react-button';
import ReactDOM from 'react-dom';
ReactDOM.render(
主要按钮
成功按钮
,
_mount_
);`;
export default function App() {
return ;
}
```
- `_mount_` Special strings, the compilation will be replaced.
### Props
```typescript
interface CodePreviewProps extends SplitProps {
prefixCls?: string;
style?: React.CSSProperties;
/**
* To specify a CSS class, use the className attribute.
*/
className?: string;
/**
* Whether to display the border.
*/
bordered?: boolean;
/**
* `JSX` source code
*/
code?: string;
/**
* Whether to display the code interface.
*/
noCode?: boolean;
/**
* Is the background white or plaid?
*/
bgWhite?: boolean;
/**
* Only show Edit
*/
onlyEdit?: boolean;
/**
* Whether to display the preview interface.
*/
noPreview?: boolean;
/**
* Preview area does not display scroll bars
*/
noScroll?: boolean;
/**
* Modify ReactCodemirror props.
*/
editProps?: ReactCodeMirrorProps;
/**
* Dependent component
*/
dependencies?: Record;
codePenOption?: CodepenProps & {
/**
* Packages that do not require comments.
* @example ['uiw']
*/
includeModule?: string[];
};
codeSandboxOption?: CodeSandboxProps;
/** @default 'Code' */
btnText?: string;
/** @default 'Hide Editor' */
btnHideText?: string;
/**
* `light` / `dark` / `Extension` Defaults to `light`.
* @default light
*/
theme?: ReactCodeMirrorProps['theme'];
/**
* Specifies the initial state of the source panel.
*/
sourceState?: 'hidden' | 'shown';
}
```
```typescript
type CodePenOption = {
title?: string;
html?: string;
js?: string;
css?: string;
editors?: string;
css_external?: string;
js_external?: string;
js_pre_processor?: string;
};
type CodepenProps = CodePenOption & React.FormHTMLAttributes;
```
```typescript
type CodeSandboxProps = React.FormHTMLAttributes & {
/**
* Whether we should redirect to the embed instead of the editor.
*/
embed?: boolean;
/**
* The query that will be used in the redirect url. `embed` must be equal to `true`, `embed=true`.
* [CodeSandbox Embed Options](https://codesandbox.io/docs/embedding#embed-options)
* @example `view=preview&runonclick=1`
*/
query?: string;
/**
* Instead of redirecting we will send a JSON reponse with `{"sandbox_id": sandboxId}`.
*/
json?: boolean;
/**
* Parameters used to define how the sandbox should be created.
*/
files?: Record<
string,
{
content?: string | Record;
isBinary?: boolean;
}
>;
};
```
## Development
The components are placed in the [`src`](./src) directory.
```bash
npm run watch # Listen compile .tsx files.
npm run build # compile .tsx files.
npm run doc
```
### Related
- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser.
- [@uiw/react-codemirror](https://github.com/uiwjs/react-codemirror): CodeMirror component for React. @codemirror
- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React.
- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.
- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript.
## Contributors
As always, thanks to our amazing contributors!
Made with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).
### License
Licensed under the MIT License.