Skip to content
Code edit preview for React.
TypeScript CSS JavaScript HTML
Branch: master
Clone or download
Latest commit b53c5c6 Aug 16, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
public chore: Update favicon.ico Aug 6, 2019
src chore: Rename componentWillReceiveProps to UNSAFE_componentWillReceiv… Aug 15, 2019
test Init project. Aug 4, 2019
website Update website font family. Aug 12, 2019
.babelrc Init project. Aug 4, 2019
.gitignore chore: Add dist to .gitignore Aug 5, 2019
.kktrc.js chore: Update .kktrc.js Aug 5, 2019
package-lock.json released v1.4.2 Aug 15, 2019
package.json released v1.4.2 Aug 15, 2019

React Code Preview

Code edit preview for React. Preview Demo:

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.


npm install @uiw/react-code-preview --save


import React from 'react';
import { Button } from 'uiw';
import CodePreview from '@uiw/react-code-preview';

const code = `import { Button, Divider, Icon } from 'uiw';
    <Button type="primary">主要按钮</Button>
    <Button type="success">成功按钮</Button>

class Demo extends React.Component {
  render() {
    return (
        dependencies={{ Button }}
  • _mount_ Special strings, the compilation will be replaced.


export interface ICodePreviewProps extends ISplitProps {
  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;
   * Whether to display the preview interface.
  noPreview?: boolean;
   * Preview area does not display scroll bars
  noScroll?: boolean;
   * Dependent component
  dependencies?: { [key: string]: any };
  codePenOption?: ICodePenOption;
interface ICodePenOption {
  title?: string;
  html?: string;
  js?: string;
  css?: string;
  editors?: string;
  css_external?: string;
  js_external?: string;
  js_pre_processor?: string;


The components are placed in the src directory.

npm run watch # Listen compile .tsx files.
npm run build # compile .tsx files.

npm run doc


Licensed under the MIT License.

You can’t perform that action at this time.