一个 Web 应用程序，允许您直接在浏览器中实时编写和预览 React 组件。使用 Next.js、Tailwind CSS 和 Monaco Editor 构建。
- 实时预览： 在您输入时实时查看组件渲染效果。
- 代码编辑器： 使用 Monaco Editor（VS Code 背后的引擎），提供熟悉的编码体验和语法高亮。
- Tailwind CSS 支持： 使用 Tailwind CSS 工具类编写组件。
- 库支持：
- React 核心（包括 Hooks 如
useState、useEffect）。 - Lucide React 图标库。
- Recharts 图表库。
shadcn/ui组件。
- React 核心（包括 Hooks 如
- 示例： 加载预构建的示例组件以快速开始。
- 可调整窗格： 调整代码编辑器和预览窗格的宽度。
- 国际化： 支持英文和中文。
- 框架： Next.js
- 语言： TypeScript
- UI 库： React
- 样式： Tailwind CSS
- 代码编辑器： Monaco Editor
- 图标： Lucide React
- 图表： Recharts
- UI 组件：
shadcn/ui
- 克隆仓库：
git clone <your-repository-url> cd react-component-previewer
- 安装依赖：
npm install # 或 yarn install - 运行开发服务器：
npm run dev # 或 yarn dev - 在浏览器中打开 http://localhost:3000。
- 在浏览器中访问应用程序。
- 左侧窗格是代码编辑器，您可以在其中编写或粘贴 React 组件代码。
- 右侧窗格显示组件的实时渲染预览。
- 使用顶部的选项查看示例或切换语言。
- 浏览
/examples页面以加载不同的组件示例。
- Tailwind CSS:
tailwind.config.ts,styles/globals.css,postcss.config.mjs。 - Next.js:
next.config.mjs。 - TypeScript:
tsconfig.json。 - Shadcn/ui:
components.json。 - 国际化:
lib/language-context.tsx,lib/translations.ts(推测)。
🎉欢迎贡献！请随时提交 Pull Request 🔃 或开启 Issue 🐞。(不过可能回复不及时)
如果您在产品或项目中使用了本项目，请注明来源并加上作者署名（例如在文档、产品介绍页或开源声明中注明 "Created by TownBoats on GitHub" 并附上本项目链接）。感谢您的尊重与支持。 返回顶部
MIT License. 请查看 LICENSE 文件。
A web application that allows you to write and preview React components in real-time directly in your browser. Built with Next.js, Tailwind CSS, and Monaco Editor.
- Live Preview: See your component render in real-time as you type.
- Code Editor: Uses Monaco Editor (the engine behind VS Code) for a familiar coding experience with syntax highlighting.
- Tailwind CSS Support: Write components using Tailwind CSS utility classes.
- Library Support:
- React Core (including Hooks like
useState,useEffect). - Lucide React Icons.
- Recharts for charting.
shadcn/uicomponents .
- React Core (including Hooks like
- Examples: Load pre-built example components to get started quickly.
- Resizable Panes: Adjust the width of the code editor and preview panes.
- Internationalization: Supports English and Chinese languages.
- Static Export: Configured for static export using Next.js
output: 'export'.
- Framework: Next.js
- Language: TypeScript
- UI Library: React
- Styling: Tailwind CSS
- Code Editor: Monaco Editor
- Icons: Lucide React
- Charting: Recharts
- UI Components:
shadcn/ui
- Clone the repository:
git clone <your-repository-url> cd react-component-previewer
- Install dependencies:
npm install # or yarn install - Run the development server:
npm run dev # or yarn dev - Open http://localhost:3000 in your browser.
- Navigate to the application in your browser.
- The left pane contains the code editor where you can write or paste your React component code.
- The right pane shows the live rendered preview of your component.
- Use the header options to view examples or toggle the language.
- Explore the
/examplespage to load different component examples.
- Tailwind CSS:
tailwind.config.ts,styles/globals.css,postcss.config.mjs. - Next.js:
next.config.mjs. - TypeScript:
tsconfig.json. - Shadcn/ui:
components.json. - Internationalization:
lib/language-context.tsx,lib/translations.ts(implied).
🎉 Contributions welcome! Feel free to submit a Pull Request 🔃 or open an Issue 🐞. (Replies may be delayed, though!) Back to Top
If you use this project in your product or project, please indicate the source and add the author's signature (for example, state "Created by TownBoats on GitHub" in your documentation, product introduction page, or open-source statement, and attach the link to this project). Thank you for your respect and support. Back to Top
MIT License. Please check the 'LICENSE' file.