React Playground Editor

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.

Features

• 🗂️ 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

Installation

Step 1: Install Peer Dependencies

⚠️ 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

Step 2: Install the Library

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

Why Peer Dependencies?

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

Basic Usage

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;

Advanced Usage

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;

Props

Prop	Type	Default	Description
initialFiles	Record<string, string>	{}	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<string, string>) => void	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: .md

Dependencies

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

Using Stores Directly

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>
  );
}

Custom File Types

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} />;
}

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

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

Troubleshooting

"Module not found" Errors

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

Common Issues

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";

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

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

1.0.1

• BREAKING: Moved dependencies to peer dependencies for better compatibility
• Fixed module resolution issues
• Updated installation instructions
• Added troubleshooting section

1.0.0

• 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