tailscale-acl-editor/README.md

# Tailscale ACL Editor

<div align="center">
  <img src="https://img.shields.io/badge/React-18.3.1-blue?logo=react" alt="React 18.3.1" />
  <img src="https://img.shields.io/badge/TypeScript-5.5.3-blue?logo=typescript" alt="TypeScript 5.5.3" />
  <img src="https://img.shields.io/badge/Vite-5.4.2-blue?logo=vite" alt="Vite 5.4.2" />
  <img src="https://img.shields.io/badge/TailwindCSS-3.4.1-blue?logo=tailwindcss" alt="TailwindCSS 3.4.1" />
  <img src="https://img.shields.io/badge/Docker-Ready-blue?logo=docker" alt="Docker Ready" />
  <img src="https://img.shields.io/badge/License-MIT-green" alt="MIT License" />
</div>

<p align="center">
  <img src="https://tailscale.com/files/tailscale-logo-wordmark-horizontal-black.svg" width="400" alt="Tailscale Logo" />
</p>

A modern, user-friendly editor for creating and managing [Tailscale Access Control Lists (ACLs)](https://tailscale.com/kb/1018/acls). This tool simplifies the process of defining network access policies for your Tailnet without having to manually edit complex JSON structures.

## ✨ Features

- 🔒 Create and manage ACL rules with an intuitive UI
- 🌐 Support for all Tailscale source and destination types
- 📋 Import existing ACL configurations
- 💾 Export your ACLs as properly formatted JSON
- 🔍 Real-time JSON preview
- ✅ Comprehensive validation for IPs, CIDRs, ports, and more
- 🎨 Clean, responsive dark-themed interface
- 🐳 Docker support for easy deployment

## 🖥️ Screenshots

<div align="center">
  <i>More Screenshots coming soon</i>
  <img src="./docs/screenshots/blank-interface-v1.png" width="600" alt="Blank ACL" />
</div>

## 🚀 Quick Start

### Using Docker

```bash
# Pull and run the Docker image
docker-compose up -d

# Access the editor at http://localhost:8080
```

### Development Setup

```bash
# Clone the repository
git clone https://github.com/yourusername/tailscale-acl-editor.git
cd tailscale-acl-editor

# Install dependencies
npm install

# Start the development server
npm run dev
```

## 🛠️ Technology Stack

- **Frontend Framework**: React with TypeScript
- **Build Tool**: Vite
- **Styling**: TailwindCSS
- **Icons**: Lucide React
- **Validation**: ip-address, is-cidr libraries
- **Deployment**: Docker with Nginx

## 📖 Usage Guide

1. **Adding Rules**: Click "Add Rule" to create a new ACL rule
2. **Defining Sources**: Add users, groups, IPs, or other source types
3. **Setting Destinations**: Specify destination entities and port requirements
4. **Importing Existing ACLs**: Use the "Import ACL" button to load your current configuration
5. **Exporting**: Click "Download" to save your ACL as a JSON file ready for Tailscale

## 🧩 ACL Structure

The editor supports the full Tailscale ACL structure:

```typescript
interface ACLPolicy {
  acls: ACLRule[];
}

interface ACLRule {
  action: 'accept';
  src: SourceEntry[];
  proto?: Protocol;
  dst: DestinationEntry[];
}
```

## 🔗 Resources

- [Tailscale ACL Documentation](https://tailscale.com/kb/1018/acls)
- [Video Tutorial](https://youtu.be/Jn8_Sh4r8d4)

## 🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

## 📄 License

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

## 🙏 Acknowledgements

- [Tailscale](https://tailscale.com/) for their excellent networking tool and documentation
- All the open-source libraries that made this project possible