https://github.com/zkjon/live-js
Simple Live Javascript coding
https://github.com/zkjon/live-js
live-code-editor live-coding nuxt typescript
Last synced: 6 months ago
JSON representation
Simple Live Javascript coding
- Host: GitHub
- URL: https://github.com/zkjon/live-js
- Owner: zkjon
- License: mit
- Created: 2025-08-28T08:41:59.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2025-08-28T12:48:14.000Z (7 months ago)
- Last Synced: 2025-08-28T16:16:05.026Z (7 months ago)
- Topics: live-code-editor, live-coding, nuxt, typescript
- Language: Vue
- Homepage: https://live-javascript.vercel.app/
- Size: 1.43 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
## 🌟 Live JS
A modern web application for writing, executing, and sharing JavaScript code in real-time with a minimalist and elegant interface.
### Code Editor
- **Monaco Editor** with complete JavaScript syntax highlighting
- **Line numbers** and cursor positioning
- **Real-time syntax validation**
- **Keyboard shortcuts** (Ctrl+Enter to execute)
- **Professional code editing experience**
### Interactive Execution
- **Node.js** for real-time JavaScript execution
- **Real-time output streaming** with live results
- **Error handling** with detailed stack traces
- **Execution timeout** to prevent infinite loops
- **Process isolation** for secure code execution
### User Interface
- **Responsive design** that adapts to any screen size
- **Split panel layout** (60% editor, 40% output)
- **Dark/Light themes** with automatic system detection
- **Smooth transitions** and elegant animations
- **Minimalist interface** focused on productivity
### Advanced Features
- **Save and share** code with unique URLs
- **Auto-save** in localStorage
- **Customizable settings** (font, theme, timeout)
- **Interactive console** with input prompts
- **Real-time collaboration** ready architecture
## 🛠️ Technologies
### Frontend
- **Nuxt 3** - Vue.js framework with SSR
- **Vue 3** - Reactive framework with Composition API
- **TypeScript** - Static typing for enhanced robustness
- **Tailwind CSS** - Utility-first CSS framework
- **Monaco Editor** - VS Code's editor for the web
- **Socket.io Client** - Real-time WebSocket communication
### Backend
- **Nitro** - Universal server engine
- **Node.js** - JavaScript runtime and execution engine
- **RESTful APIs** - Endpoints for saving and sharing code
### Development Tools
- **Bun** - Ultra-fast runtime and package manager
- **Git** - Version control
- **TypeScript** - Type-safe development
## 📦 Installation
### Prerequisites
- **Bun** 1.0+ (recommended) or **Node.js** 20+
### Installation Steps
1. **Clone the repository**
```bash
git clone https://github.com/zkjon/live-js.git
cd live-js
```
2. **Install dependencies**
```bash
bun install
```
3. **Run in development mode**
```bash
bun run dev
```
4. **Open in browser**
```
http://localhost:3000
```
## 🚀 Usage
### Writing Code
1. Write your JavaScript code in the left editor panel
2. Use **Ctrl+Enter** to execute or click the "Run" button
3. See real-time results in the right output panel
### Theme Switching
1. Click the "Light Theme" or "Dark Theme" button
2. The interface automatically adapts to your preference
3. Theme preference is saved locally
### Code Management
1. Click "Clear" to reset the editor
2. Code is automatically saved in your browser's local storage
3. Your work persists between sessions
## 🧪 Development
```bash
# Start development server
bun run dev
# Build for production
bun run build
# Preview production build
bun run preview
```
## 📈 Performance
### Performance Metrics
- **Initial load time**: < 2s
- **Code execution**: < 100ms (simple code)
- **Bundle size**: < 500KB (gzipped)
- **Real-time communication**: WebSocket-based
### Optimizations
- **Automatic code splitting**
- **Lazy loading** of components
- **Tree shaking** to eliminate unused code
- **Gzip/Brotli compression**
- **Intelligent asset caching**
## 🔒 Security
Security is a top priority for Live JS. For detailed information about our security measures, reporting vulnerabilities, and best practices, please see our [Security Policy](SECURITY.md).
## 🤝 Contributing
We welcome contributions from the community! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated.
For detailed information about contributing, including development setup, coding standards, and the pull request process, please see our [Contributing Guide](CONTRIBUTING.md).
## 📄 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- **Monaco Editor** for the excellent code editor
- **Nuxt Team** for the incredible framework
- **Tailwind CSS** for the utility-first styling
- **Socket.io** for real-time communication
- **Open Source Community** for the tools and libraries
## 📞 Support
Have questions or issues?
- 🐛 **Issues**: [GitHub Issues](https://github.com/zkjon/live-js/issues)
- 💬 **Discussions**: [GitHub Discussions](https://github.com/zkjon/live-js/discussions)
- 📖 **Documentation**: [Project Wiki](https://github.com/zkjon/live-js/wiki)
---
**Live JavaScript coding! ⚡✨**