A 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:

# Install peer dependencies npm install lucide-react zustand monaco-editor @monaco-editor/react react-resizable # Or with yarn yarn add lucide-react zustand monaco-editor @monaco-editor/react react-resizable # Or with pnpm pnpm add lucide-react zustand monaco-editor @monaco-editor/react react-resizable

npm install react-playground-editor # or yarn add react-playground-editor # or pnpm add react-playground-editor

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

import React from "react"; import { Playground } from "react-playground-editor"; import "react-playground-editor/dist/index.css"; function App() { return ( <div className="h-screen"> <Playground /> </div> ); } export default App;

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 ( <div className="h-screen"> <Playground initialFiles={{ "src/App.jsx": `import React from 'react';    function App() {  return <div>Hello World!</div>;  }    export default App;`, }} defaultActiveFile="src/App.jsx" showFileExplorer={true} showTerminal={true} showWebView={true} showDependencies={true} theme="dark" onFileChange={handleFileChange} onActiveFileChange={handleActiveFileChange} /> </div> ); } export default App;

• React Components: .jsx, .tsx
• JavaScript/TypeScript: .js, .ts
• Stylesheets: .css
• HTML: .html
• Data: .json
• Documentation: .md

The playground automatically detects and includes common dependencies:

• React: react, react-dom
• Utilities: lodash, axios, moment, uuid
• And more...

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 ( <div> <p>Active file: {activeFile}</p> <button onClick={handleAddFile}>Add File</button> </div> ); }

import { Playground } from "react-playground-editor"; const customFileTypes = [ { name: "Python", extension: "py", icon: <FileCode />, template: `# Python script print("Hello, World!")`, }, ]; function App() { return <Playground fileTypes={customFileTypes} />; }

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

/* Custom theme */ .playground-container { --playground-bg: #1a1a1a; --playground-text: #ffffff; --playground-accent: #007acc; }

If you encounter errors like Module not found: Can't resolve 'lucide-react', it means you haven't installed the peer dependencies:

# Install all peer dependencies npm install lucide-react zustand monaco-editor @monaco-editor/react react-resizable

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:

   import "react-playground-editor/dist/index.css";

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

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)
5. Open a Pull Request

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