js-playground

KO | EN

gitlite — search

#hacktoberfest #react #ai #llm #go #android #macos #java #windows #kubernetes #vue #awesome-list #security #ios

(★ 13)

Free JS Playground

js-playground Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# JS Playground

A modern, feature-rich JavaScript playground built with Next.js and Monaco Editor. This project aims to provide a robust environment for testing, learning, and experimenting with JavaScript code.

![License](https://img.shields.io/badge/license-MIT-blue.svg)
![Next.js](https://img.shields.io/badge/Next.js-14.0-black)
![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)

## 🚀 Features

- **Monaco Editor Integration**: Professional code editing with syntax highlighting and autocompletion
- **Real-time Code Execution**: Execute JavaScript code instantly
- **Console Output**: Full console emulation (log, error, warn, info)
- **Customizable Layout**: Switch between horizontal and vertical layouts
- **Theme Support**: Light and dark themes available
- **Persistent Storage**: Your code and settings are automatically saved
- **TypeScript Support**: Full TypeScript type checking and IntelliSense

## 🛠️ Tech Stack

- [Next.js 14](https://nextjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Monaco Editor](https://microsoft.github.io/monaco-editor/)
- [Zustand](https://github.com/pmndrs/zustand)
- [Tailwind CSS](https://tailwindcss.com/)
- [shadcn/ui](https://ui.shadcn.com/)

## 📦 Installation

- Clone the repository:

```bash
git clone https://github.com/linder3hs/js-playground.git
cd js-playground
```

- Install dependencies:

```bash
yarn install
```

- Run the development server:

```bash
yarn dev
```

- Open [http://localhost:3000](http://localhost:3000) in your browser.

## 🤝 Contributing

We welcome contributions from the community! Here's how you can help:

### Contributing Guidelines

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request

### Code Style

- Use TypeScript for type safety
- Follow the existing coding style
- Write clear commit messages
- Add appropriate comments and documentation
- Update tests when necessary

### Project Structure

```md
js-playground/
├── src/
│   ├── app/                   # Next.js app directory
│   ├── components/            # React components
│   │   ├── editor/           # Editor-related components
│   │   ├── console/          # Console output components
│   │   ├── layout/           # Layout components
│   │   └── ui/               # shadcn/ui components
│   ├── hooks/                # Custom React hooks
│   ├── lib/                  # Utilities and helpers
│   │   ├── types/           # TypeScript types
│   │   └── utils/           # Utility functions
│   └── store/               # Zustand store
└── public/                  # Static files
```

### Roadmap and Future Features

- [ ] Multiple file support
- [ ] NPM package integration
- [ ] Custom themes
- [ ] Sharing capabilities
- [ ] Integrated terminal
- [ ] File system integration
- [ ] Project templates
- [ ] Code formatting options

## 🐛 Bug Reports and Feature Requests

If you find a bug or would like to request a new feature, please create an issue on GitHub. When creating an issue, please include:

- A clear and descriptive title
- A detailed description of the bug or feature
- Steps to reproduce (for bugs)
- Expected behavior
- Current behavior
- Screenshots (if applicable)
- Any relevant code snippets

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🙏 Acknowledgments

- [Monaco Editor](https://microsoft.github.io/monaco-editor/) team
- [shadcn/ui](https://ui.shadcn.com/) components
- All contributors who help improve this project

## 📫 Contact

Project Link: [https://github.com/linder3hs/js-playground](https://github.com/linder3hs/js-playground)

---

Made with ❤️ by contributors worldwide

js-playground

js-playground Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

js-playground

js-playground Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README