{"id":13671369,"url":"https://github.com/simonguo/react-code-view","last_synced_at":"2025-12-29T13:46:08.890Z","repository":{"id":27017728,"uuid":"112137131","full_name":"simonguo/react-code-view","owner":"simonguo","description":"A flexible playground for rendering Markdown and live editing React components.","archived":false,"fork":false,"pushed_at":"2025-02-18T09:28:30.000Z","size":22736,"stargazers_count":190,"open_issues_count":10,"forks_count":31,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-16T06:03:56.351Z","etag":null,"topics":["codeeditor","markdown","markdown-loader","markdown-viewer","playground","react","webpack"],"latest_commit_sha":null,"homepage":"https://simonguo.github.io/react-code-view/","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/simonguo.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"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,"zenodo":null}},"created_at":"2017-11-27T02:25:18.000Z","updated_at":"2025-04-01T17:13:20.000Z","dependencies_parsed_at":"2024-01-26T08:27:00.540Z","dependency_job_id":"90aec45d-fcbf-4b44-84ee-d29cb1c5184a","html_url":"https://github.com/simonguo/react-code-view","commit_stats":{"total_commits":98,"total_committers":4,"mean_commits":24.5,"dds":0.5612244897959184,"last_synced_commit":"9dfd81fc48054409e4cb0d82ee53fd8b37d5aa2a"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonguo%2Freact-code-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonguo%2Freact-code-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonguo%2Freact-code-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonguo%2Freact-code-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonguo","download_url":"https://codeload.github.com/simonguo/react-code-view/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254478186,"owners_count":22077675,"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","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":["codeeditor","markdown","markdown-loader","markdown-viewer","playground","react","webpack"],"created_at":"2024-08-02T09:01:07.742Z","updated_at":"2025-12-29T13:46:08.878Z","avatar_url":"https://github.com/simonguo.png","language":"TypeScript","readme":"# React Code View\n\n[![npm](https://img.shields.io/npm/v/react-code-view.svg)](https://www.npmjs.com/package/react-code-view)\n[![npm](https://img.shields.io/npm/dm/react-code-view.svg)](https://www.npmjs.com/package/react-code-view)\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](./LICENSE)\n\nA React component library for rendering code with **live preview** and syntax highlighting.\n\n[Docs](https://react-code-view-rsuite.vercel.app/)\n\n## ✨ Features\n\n- 🎨 **Live Preview** - Execute and preview React code in real-time\n- ✏️ **Editable Code** - Built-in code editor with syntax highlighting\n- 📝 **Markdown Support** - Render markdown content with code blocks\n- 🔌 **Universal Plugin** - Works with Webpack, Vite, Rollup, esbuild, and Rspack\n- 🎯 **TypeScript** - Full TypeScript support out of the box\n- 📦 **Tree-shakeable** - Import only what you need\n\n## ✅ Requirements\n\n- Node.js \u003e= 18\n- PNPM \u003e= 8 (monorepo managed via PNPM + Turbo)\n\n## 📦 Installation\n\n```bash\n# npm\nnpm install react-code-view\n\n# pnpm\npnpm add react-code-view\n\n# yarn\nyarn add react-code-view\n```\n\n## 🚀 Quick Start\n\n```tsx\nimport CodeView from 'react-code-view';\nimport 'react-code-view/styles';\n\nfunction App() {\n  const code = `\n\u003cbutton onClick={() =\u003e alert('Hello!')}\u003e\n  Click me\n\u003c/button\u003e\n  `.trim();\n\n  return (\n    \u003cCodeView \n      language=\"jsx\"\n      editable\n      renderPreview\n    \u003e\n      {code}\n    \u003c/CodeView\u003e\n  );\n}\n```\n\n## 📚 Packages\n\nThis monorepo contains the following packages:\n\n| Package | Version | Description |\n|---------|---------|-------------|\n| [`react-code-view`](./packages/react-code-view) | [![npm](https://img.shields.io/npm/v/react-code-view.svg)](https://www.npmjs.com/package/react-code-view) | Main package (re-exports all) |\n| [`@react-code-view/react`](./packages/react) | [![npm](https://img.shields.io/npm/v/@react-code-view/react.svg)](https://www.npmjs.com/package/@react-code-view/react) | React components |\n| [`@react-code-view/core`](./packages/core) | [![npm](https://img.shields.io/npm/v/@react-code-view/core.svg)](https://www.npmjs.com/package/@react-code-view/core) | Core transformation utilities |\n| [`@react-code-view/unplugin`](./packages/unplugin) | [![npm](https://img.shields.io/npm/v/@react-code-view/unplugin.svg)](https://www.npmjs.com/package/@react-code-view/unplugin) | Build tool plugins |\n\n## 🔧 Build Tool Integration\n\nReact Code View supports all major build tools through [unplugin](https://github.com/unjs/unplugin):\n\n### Vite\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport react from '@vitejs/plugin-react';\nimport reactCodeView from '@react-code-view/unplugin/vite';\n\nexport default defineConfig({\n  plugins: [\n    react(),\n    reactCodeView()\n  ]\n});\n```\n\n### Webpack\n\n```js\n// webpack.config.js\nconst ReactCodeViewPlugin = require('@react-code-view/unplugin/webpack');\n\nmodule.exports = {\n  plugins: [\n    ReactCodeViewPlugin()\n  ]\n};\n```\n\n### Rollup\n\n```js\n// rollup.config.js\nimport reactCodeView from '@react-code-view/unplugin/rollup';\n\nexport default {\n  plugins: [\n    reactCodeView()\n  ]\n};\n```\n\n### esbuild\n\n```js\nimport * as esbuild from 'esbuild';\nimport reactCodeView from '@react-code-view/unplugin/esbuild';\n\nawait esbuild.build({\n  plugins: [\n    reactCodeView()\n  ]\n});\n```\n\n### Rspack\n\n```js\n// rspack.config.js\nconst ReactCodeViewPlugin = require('@react-code-view/unplugin/rspack');\n\nmodule.exports = {\n  plugins: [\n    ReactCodeViewPlugin()\n  ]\n};\n```\n\n## 📖 API Reference\n\n### CodeView Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `children` | `string` | - | Source code to display |\n| `dependencies` | `object` | `{}` | Dependencies for code execution |\n| `language` | `string` | `'jsx'` | Syntax highlighting language |\n| `editable` | `boolean` | `true` | Enable code editing |\n| `renderPreview` | `boolean` | `true` | Show live preview |\n| `showLineNumbers` | `boolean` | `true` | Show line numbers |\n| `showCopyButton` | `boolean` | `true` | Show copy button |\n| `theme` | `string` | `'rcv-theme-default'` | Theme class name |\n| `beforeCompile` | `function` | - | Transform code before compile |\n| `afterCompile` | `function` | - | Transform code after compile |\n| `onChange` | `function` | - | Callback when code changes |\n| `onError` | `function` | - | Callback when error occurs |\n\n### Other Components\n\n- **`Renderer`** - Syntax-highlighted code display\n- **`MarkdownRenderer`** - Render markdown with syntax highlighting\n- **`CodeEditor`** - Editable code component\n- **`Preview`** - Display executed code output\n- **`CopyCodeButton`** - Copy code to clipboard button\n- **`ErrorBoundary`** - Error boundary for code execution\n\n### Hooks\n\n- **`useCodeExecution`** - Execute code and capture a rendered element\n\n  Example:\n\n  ```tsx\n  import { useCodeExecution } from '@react-code-view/react';\n\n  export function LivePreview({ source }: { source: string }) {\n    const { element, error, code, updateCode } = useCodeExecution(source, {\n      // Optional: inject deps into runtime scope\n      dependencies: { alert },\n      // Optional: configure transforms (e.g. TS + JSX)\n      transformOptions: { transforms: ['typescript', 'jsx'] },\n      beforeCompile: (c) =\u003e c.trim(),\n      afterCompile: (c) =\u003e c,\n      onError: (e) =\u003e console.error('Execution error:', e)\n    });\n\n    return (\n      \u003cdiv\u003e\n        \u003ctextarea value={code} onChange={(e) =\u003e updateCode(e.target.value)} /\u003e\n        {error ? \u003cdiv role=\"alert\"\u003e{String(error.message || error)}\u003c/div\u003e : element}\n      \u003c/div\u003e\n    );\n  }\n  ```\n\n## 🎨 Theming\n\nImport the base styles:\n\n```tsx\nimport 'react-code-view/styles';\n```\n\nUse theme classes:\n\n```tsx\n// Light theme (default)\n\u003cCodeView theme=\"rcv-theme-default\"\u003e...\u003c/CodeView\u003e\n\n// Dark theme\n\u003cCodeView theme=\"rcv-theme-dark\"\u003e...\u003c/CodeView\u003e\n```\n\nCustomize with CSS variables:\n\n```css\n.rcv-code-view {\n  --rcv-color-bg: #ffffff;\n  --rcv-color-bg-code: #f6f8fa;\n  --rcv-color-text: #24292f;\n  --rcv-color-border: #d0d7de;\n  --rcv-color-primary: #0969da;\n  --rcv-color-error: #cf222e;\n}\n```\n\n## 🛠️ Development\n\n```bash\n# Install dependencies\npnpm install\n\n# Build all packages (turbo)\npnpm build\n\n# Start docs dev server (Vite)\npnpm docs\n\n# Run tests (Vitest in each package)\npnpm test\n\n# Lint code (ESLint)\npnpm lint\n\n## 🤖 CI/CD\n\n- CI runs on Node 18+ and uses PNPM and Turbo to install, type-check, build, and test the monorepo.\n- Docs are built with Vite and deployed to GitHub Pages from `docs/dist`.\n\n## 🔄 Migration Guide (v2 → v3)\n\nMajor changes in v3.0.0 modernize the architecture and usage. Here’s how to update:\n\n- New packages: The project is now a PNPM monorepo with `@react-code-view/react`, `@react-code-view/core`, and `@react-code-view/unplugin`. The `react-code-view` package re-exports everything for convenience.\n- Component imports: Prefer `react-code-view` for quick usage, or import directly from `@react-code-view/react` for granular control.\n  - Before (v2): `import { CodeView } from 'react-code-view'`\n  - After (v3): `import CodeView from 'react-code-view'` or `import { CodeView } from '@react-code-view/react'`\n- Styles: Use the new CSS entry points.\n  - Before (v2): Less files (e.g., `react-code-view/less/styles.less`)\n  - After (v3): `import 'react-code-view/styles'` and optional syntax theme `import 'react-code-view/styles/highlight'`\n- Build tool integration: Replace legacy Webpack markdown loader with the unified unplugin across tools.\n  - Before (v2): `webpack-md-loader` and custom loader config\n  - After (v3): `@react-code-view/unplugin` for Vite/Webpack/Rollup/esbuild/Rspack (see examples above)\n- Hook behavior: `useCodeExecution` is stabilized to avoid unintended re-executions.\n  - New: `updateCode` alias for code changes; pass `dependencies` explicitly if runtime scope is needed\n  - If you relied on implicit re-runs via changing options, update to change `code` or manage your own triggers\n- Types \u0026 tests: Vitest + jest-dom types included via package `tsconfig.json`.\n  - Add `types: ['vitest/globals', '@testing-library/jest-dom']` if customizing your test config\n\nIf you need help migrating specific code paths from v2, open an issue and we’ll guide you through it.\n```\n\n## 📝 Changelog\n\nSee [CHANGELOG.md](./CHANGELOG.md) for release history.\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our [Contributing Guide](./CONTRIBUTING.md) for details.\n\n## 📄 License\n\n[MIT](./LICENSE) © [Simon Guo](https://github.com/simonguo)\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonguo%2Freact-code-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonguo%2Freact-code-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonguo%2Freact-code-view/lists"}