A comprehensive code editing playground component for React applications
npm install react-playground-editorA comprehensive code editing playground component for React applications. This library provides a full-featured IDE-like experience with file management, code editing, live preview, terminal simulation, and dependency management.
- 🗂️ File Management: Create, edit, delete, and organize files
- ✏️ Code Editing: Monaco Editor with syntax highlighting and IntelliSense
- 🌐 Live Preview: Real-time rendering of React components
- 📦 Dependency Management: Automatic detection and CDN integration
- 🖥️ Terminal Simulation: Console output and network monitoring
- 🎨 Dark Theme: Consistent dark theme throughout
- ⌨️ Keyboard Shortcuts: Common IDE shortcuts
- 📱 Responsive Design: Works on different screen sizes
⚠️ Important: You must install the peer dependencies first before installing the library:
``bashInstall peer dependencies
npm install lucide-react zustand monaco-editor @monaco-editor/react react-resizable
$3
`bash
npm install react-playground-editor
or
yarn add react-playground-editor
or
pnpm add react-playground-editor
`$3
This library uses peer dependencies to:
- Prevent version conflicts between your project and the library
- Reduce bundle size by using your project's existing dependencies
- Allow flexibility in choosing dependency versions
Usage
$3
`tsx
import React from "react";
import { Playground } from "react-playground-editor";
import "react-playground-editor/dist/index.css";function App() {
return (
);
}export default App;
`$3
`tsx
import React from "react";
import { Playground } from "react-playground-editor";
import "react-playground-editor/dist/index.css";function App() {
const handleFileChange = (files) => {
console.log("Files changed:", files);
};
const handleActiveFileChange = (filePath) => {
console.log("Active file:", filePath);
};
return (
initialFiles={{
"src/App.jsx": import React from 'react';
function App() {
return Hello World!;
}
export default App;,
}}
defaultActiveFile="src/App.jsx"
showFileExplorer={true}
showTerminal={true}
showWebView={true}
showDependencies={true}
theme="dark"
onFileChange={handleFileChange}
onActiveFileChange={handleActiveFileChange}
/>
);
}export default App;
`Props
| Prop | Type | Default | Description |
| -------------------- | ----------------------------------------- | ----------- | --------------------------------- |
|
initialFiles | Record | {} | Initial files to load |
| defaultActiveFile | string | '' | Default active file path |
| showFileExplorer | boolean | true | Show file explorer panel |
| showTerminal | boolean | true | Show terminal panel |
| showWebView | boolean | true | Show web view panel |
| showDependencies | boolean | true | Show dependencies panel |
| theme | 'dark' \| 'light' | 'dark' | Theme variant |
| onFileChange | (files: Record | undefined | Callback when files change |
| onActiveFileChange | (filePath: string) => void | undefined | Callback when active file changes |
| className | string | '' | Additional CSS classes |
| style | React.CSSProperties | undefined | Inline styles |Supported File Types
- React Components:
.jsx, .tsx
- JavaScript/TypeScript: .js, .ts
- Stylesheets: .css
- HTML: .html
- Data: .json
- Documentation: .mdDependencies
The playground automatically detects and includes common dependencies:
- React:
react, react-dom
- Utilities: lodash, axios, moment, uuid
- And more...Keyboard Shortcuts
| Shortcut | Action |
| ---------------------- | ------------------------- |
|
Ctrl/Cmd + S | Save current file |
| Ctrl/Cmd + N | Create new file |
| Ctrl/Cmd + W | Close current file |
| Ctrl/Cmd + Tab | Switch between open files |
| F5 | Refresh preview |
| Ctrl/Cmd + \` | Toggle terminal |
| Ctrl/Cmd + Shift + E | Toggle file explorer |
| Ctrl/Cmd + Shift + V | Toggle web view |Advanced Usage
$3
`tsx
import { useFileStore, usePackageManagerStore } from "react-playground-editor";function MyComponent() {
const { files, activeFile, addFile } = useFileStore();
const { packages, installPackage } = usePackageManagerStore();
const handleAddFile = () => {
addFile("src/NewFile.jsx", "// New file content");
};
return (
Active file: {activeFile}
);
}
`$3
`tsx
import { Playground } from "react-playground-editor";const customFileTypes = [
{
name: "Python",
extension: "py",
icon: ,
template:
# Python script,
},
];function App() {
return ;
}
`Styling
The component uses Tailwind CSS classes. You can customize the appearance by:
1. CSS Variables: Override CSS custom properties
2. Tailwind Config: Extend the Tailwind configuration
3. Custom Classes: Pass custom className props
`css
/ Custom theme /
.playground-container {
--playground-bg: #1a1a1a;
--playground-text: #ffffff;
--playground-accent: #007acc;
}
`Troubleshooting
$3
If you encounter errors like
Module not found: Can't resolve 'lucide-react', it means you haven't installed the peer dependencies:`bash
Install all peer dependencies
npm install lucide-react zustand monaco-editor @monaco-editor/react react-resizable
`$3
1. Missing peer dependencies: Always install peer dependencies first
2. Version conflicts: Ensure your React version is >= 16.8.0
3. CSS not loading: Make sure to import the CSS file:
`tsx
import "react-playground-editor/dist/index.css";
`Browser Support
- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+
Contributing
1. Fork the repository
2. Create your feature branch (
git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)This project is licensed under the MIT License - see the LICENSE file for details.
- BREAKING: Moved dependencies to peer dependencies for better compatibility
- Fixed module resolution issues
- Updated installation instructions
- Added troubleshooting section
- Initial release
- File management system
- Code editing with Monaco Editor
- Live preview with React support
- Dependency management
- Terminal simulation
- Dark theme UI
- Keyboard shortcuts
- Responsive design