{"id":29966220,"url":"https://github.com/uiwjs/react-code-preview","last_synced_at":"2025-08-04T02:32:30.122Z","repository":{"id":35049377,"uuid":"200686896","full_name":"uiwjs/react-code-preview","owner":"uiwjs","description":"Code edit preview for React.","archived":false,"fork":false,"pushed_at":"2025-04-02T09:25:36.000Z","size":201264,"stargazers_count":67,"open_issues_count":14,"forks_count":11,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-07-02T15:55:01.587Z","etag":null,"topics":["code-preview","codemirror","editor","react","react-codemirror","reactjs","typescript"],"latest_commit_sha":null,"homepage":"https://uiwjs.github.io/react-code-preview","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uiwjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":"https://jaywcjlove.github.io/#/sponsor"}},"created_at":"2019-08-05T15:58:58.000Z","updated_at":"2025-05-27T13:51:28.000Z","dependencies_parsed_at":"2023-01-15T12:45:25.935Z","dependency_job_id":"ce06a56c-f6a2-48d2-98ad-143b2314ffb9","html_url":"https://github.com/uiwjs/react-code-preview","commit_stats":null,"previous_names":[],"tags_count":63,"template":false,"template_full_name":null,"purl":"pkg:github/uiwjs/react-code-preview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-code-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-code-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-code-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-code-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uiwjs","download_url":"https://codeload.github.com/uiwjs/react-code-preview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Freact-code-preview/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268505778,"owners_count":24260970,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-03T02:00:12.545Z","response_time":2577,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-preview","codemirror","editor","react","react-codemirror","reactjs","typescript"],"created_at":"2025-08-04T02:31:31.880Z","updated_at":"2025-08-04T02:32:30.085Z","avatar_url":"https://github.com/uiwjs.png","language":"TypeScript","funding_links":["https://jaywcjlove.github.io/#/sponsor"],"categories":[],"sub_categories":[],"readme":"## React Code Preview\n\n\u003c!--dividing--\u003e\n\n[![Build \u0026 Deploy](https://github.com/uiwjs/react-code-preview/workflows/Build%20\u0026%20Deploy/badge.svg)](https://github.com/uiwjs/react-code-preview/actions)\n[![Release](https://img.shields.io/github/release/uiwjs/react-code-preview)](https://github.com/uiwjs/react-code-preview/releases)\n[![npm version](https://img.shields.io/npm/v/@uiw/react-code-preview.svg)](https://www.npmjs.com/package/@uiw/react-code-preview)\n[![Gitee](https://jaywcjlove.github.io/sb/ico/gitee.svg)](https://uiw.gitee.io/react-code-preview/)\n\nCode edit preview for React. Preview Demo: https://uiwjs.github.io/react-code-preview\n\nThere 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.\n\n## Install\n\n```bash\nnpm install @uiw/react-code-preview --save\n```\n\n## Usage\n\n### In React 18\n\n[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/uiw-react-code-preview-react-18-1bmhhd?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n```jsx\nimport Button from '@uiw/react-button';\nimport CodePreview from '@uiw/react-code-preview';\n\nconst code = `import Button from '@uiw/react-button';\nimport ReactDOM from 'react-dom/client';\n\nReactDOM.createRoot(_mount_).render(\n  \u003cdiv\u003e\n    \u003cButton type=\"primary\"\u003e主要按钮\u003c/Button\u003e\n    \u003cButton type=\"success\"\u003e成功按钮\u003c/Button\u003e\n  \u003c/div\u003e,\n);`;\n\nexport default function App() {\n  return \u003cCodePreview code={code} dependencies={{ Button }} /\u003e;\n}\n```\n\n### In React 17\n\n[![Open in CodeSandbox](https://img.shields.io/badge/Open%20in-CodeSandbox-blue?logo=codesandbox)](https://codesandbox.io/embed/uiw-react-code-preview-react-17-t6ro9?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n```jsx\nimport Button from '@uiw/react-button';\nimport CodePreview from '@uiw/react-code-preview';\n\nconst code = `import Button from '@uiw/react-button';\nimport ReactDOM from 'react-dom';\n\nReactDOM.render(\n  \u003cdiv\u003e\n    \u003cButton type=\"primary\"\u003e主要按钮\u003c/Button\u003e\n    \u003cButton type=\"success\"\u003e成功按钮\u003c/Button\u003e\n  \u003c/div\u003e,\n  _mount_\n);`;\n\nexport default function App() {\n  return \u003cCodePreview code={code} dependencies={{ Button }} /\u003e;\n}\n```\n\n- `_mount_` Special strings, the compilation will be replaced.\n\n### Props\n\n```typescript\ninterface CodePreviewProps extends SplitProps {\n  prefixCls?: string;\n  style?: React.CSSProperties;\n  /**\n   * To specify a CSS class, use the className attribute.\n   */\n  className?: string;\n  /**\n   * Whether to display the border.\n   */\n  bordered?: boolean;\n  /**\n   * `JSX` source code\n   */\n  code?: string;\n  /**\n   * Whether to display the code interface.\n   */\n  noCode?: boolean;\n  /**\n   * Is the background white or plaid?\n   */\n  bgWhite?: boolean;\n  /**\n   * Only show Edit\n   */\n  onlyEdit?: boolean;\n  /**\n   * Whether to display the preview interface.\n   */\n  noPreview?: boolean;\n  /**\n   * Preview area does not display scroll bars\n   */\n  noScroll?: boolean;\n  /**\n   * Modify ReactCodemirror props.\n   */\n  editProps?: ReactCodeMirrorProps;\n  /**\n   * Dependent component\n   */\n  dependencies?: Record\u003cstring, any\u003e;\n  codePenOption?: CodepenProps \u0026 {\n    /**\n     * Packages that do not require comments.\n     * @example ['uiw']\n     */\n    includeModule?: string[];\n  };\n  codeSandboxOption?: CodeSandboxProps;\n  /** @default 'Code' */\n  btnText?: string;\n  /** @default 'Hide Editor' */\n  btnHideText?: string;\n  /**\n   * `light` / `dark` / `Extension` Defaults to `light`.\n   * @default light\n   */\n  theme?: ReactCodeMirrorProps['theme'];\n  /**\n   * Specifies the initial state of the source panel.\n   */\n  sourceState?: 'hidden' | 'shown';\n}\n```\n\n```typescript\ntype CodePenOption = {\n  title?: string;\n  html?: string;\n  js?: string;\n  css?: string;\n  editors?: string;\n  css_external?: string;\n  js_external?: string;\n  js_pre_processor?: string;\n};\ntype CodepenProps = CodePenOption \u0026 React.FormHTMLAttributes\u003cHTMLFormElement\u003e;\n```\n\n```typescript\ntype CodeSandboxProps = React.FormHTMLAttributes\u003cHTMLFormElement\u003e \u0026 {\n  /**\n   * Whether we should redirect to the embed instead of the editor.\n   */\n  embed?: boolean;\n  /**\n   * The query that will be used in the redirect url. `embed` must be equal to `true`, `embed=true`.\n   * [CodeSandbox Embed Options](https://codesandbox.io/docs/embedding#embed-options)\n   * @example `view=preview\u0026runonclick=1`\n   */\n  query?: string;\n  /**\n   * Instead of redirecting we will send a JSON reponse with `{\"sandbox_id\": sandboxId}`.\n   */\n  json?: boolean;\n  /**\n   * Parameters used to define how the sandbox should be created.\n   */\n  files?: Record\u003c\n    string,\n    {\n      content?: string | Record\u003cstring, any\u003e;\n      isBinary?: boolean;\n    }\n  \u003e;\n};\n```\n\n## Development\n\nThe components are placed in the [`src`](./src) directory.\n\n```bash\nnpm run watch # Listen compile .tsx files.\nnpm run build # compile .tsx files.\n\nnpm run doc\n```\n\n### Related\n\n- [@uiw/react-markdown-preview](https://github.com/uiwjs/react-markdown-preview): React component preview markdown text in web browser.\n- [@uiw/react-codemirror](https://github.com/uiwjs/react-codemirror): CodeMirror component for React. @codemirror\n- [@uiw/react-monacoeditor](https://github.com/jaywcjlove/react-monacoeditor): Monaco Editor component for React.\n- [@uiw/react-markdown-editor](https://github.com/uiwjs/react-markdown-editor): A markdown editor with preview, implemented with React.js and TypeScript.\n- [@uiw/react-md-editor](https://github.com/uiwjs/react-md-editor): A simple markdown editor with preview, implemented with React.js and TypeScript.\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n\u003ca href=\"https://github.com/uiwjs/react-code-preview/graphs/contributors\"\u003e\n  \u003cimg src=\"https://uiwjs.github.io/react-code-preview/CONTRIBUTORS.svg\" /\u003e\n\u003c/a\u003e\n\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n### License\n\nLicensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiwjs%2Freact-code-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuiwjs%2Freact-code-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiwjs%2Freact-code-preview/lists"}