A modern, powerful web UI for Elasticsearch
Features • Screenshots • Installation • Usage • Configuration • Contributing • License
ElasticScope is a feature-rich, open-source web application for managing and exploring Elasticsearch clusters. Built with React and TypeScript, it provides an intuitive interface for developers and data engineers to interact with their Elasticsearch data.
Unlike heavyweight alternatives, ElasticScope is lightweight, fast, and easy to deploy. It runs entirely in your browser with a minimal Node.js backend that proxies requests to your Elasticsearch cluster.
- Built-in Node.js proxy server eliminates CORS problems
- Connect to any Elasticsearch cluster without browser restrictions
- Support for self-signed SSL certificates
- Save and switch between multiple Elasticsearch connections
- Color-coded connections for easy identification
- Support for basic authentication
- Compare any two documents side-by-side with diff view
- Highlight differences between document versions
- Useful for debugging and auditing changes
- Copy documents between different Elasticsearch clusters
- Migrate data across environments (dev, staging, prod)
- Preserve document structure during transfer
- Default SQLite storage for zero-configuration setup
- Support for PostgreSQL and MySQL for scalable deployments
- Seamless switching between database backends via environment variables
- Select which fields to display in the table view
- Reorder and resize columns
- Pin frequently accessed fields in JSON viewer
- Save column preferences per index
- Browse all indices with health status indicators
- View index settings, mappings, and statistics
- Create and delete indices
- Manage index aliases
- Paginated document browsing with customizable page size
- Sort by any field
- Expandable JSON viewer with syntax highlighting
- Edit documents inline with JSON validation
- Real-time cluster health and performance monitoring
- Visualizations for CPU, Memory, Heap, and Disk usage
- Node-level statistics and resource tracking
- Active tasks management (view and cancel tasks)
- Execute raw Elasticsearch queries with context-aware autocomplete
- Multi-tab support for managing multiple queries
- Save, load, and organize requests in collections
- Split-screen view for request/response
- Redesigned interface for better usability
- Adjustable column widths and ordering
- Toggle visibility of any field
- Quick filters and advanced search integration
- Compact and comfortable view modes
Click to view screenshots
- Node.js v18 or higher
- npm or yarn
- Elasticsearch 7.x or 8.x (local or remote)
# Clone the repository
git clone https://github.com/fuykun/ElasticScope.git
cd elasticscope
# Install dependencies
npm install
# Start the application
npm run devThe application will be available at http://localhost:3001
# Pull and run the latest version
docker run -d \
--name elasticscope \
-p 3001:3001 \
-v elasticscope-data:/app/data \
fuykun/elasticscope:latest
# Access at http://localhost:3001Or with Docker Compose:
services:
elasticscope:
image: fuykun/elasticscope:latest
container_name: elasticscope
ports:
- "3001:3001"
volumes:
- elasticscope-data:/app/data
restart: unless-stopped
volumes:
elasticscope-data:Quick Start with Docker Compose:
# Run with Docker Compose (recommended)
docker compose up -d
# Access at http://localhost:3001Development Mode:
# Run with hot-reload enabled
docker compose --profile dev up elasticscope-devWith Local Elasticsearch (for testing):
# Start ElasticScope with a local Elasticsearch instance
docker compose --profile with-es up -d
# Elasticsearch will be available at http://localhost:9200
# ElasticScope at http://localhost:3001When adding a connection in ElasticScope, use these settings:
| Field | Value |
|---|---|
| URL | http://elasticsearch:9200 |
| Username | (leave empty) |
| Password | (leave empty) |
Note: Use
elasticsearch:9200(container name) instead oflocalhost:9200because ElasticScope runs inside the Docker network.
Build and Run Manually:
# Build the image
docker build -t elasticscope .
# Run the container
docker run -d \
--name elasticscope \
-p 3001:3001 \
-v elasticscope-data:/app/data \
elasticscope
# Access at http://localhost:3001# Build for production
npm run build
# Start production server
npm run start
# Or build and start in one command
npm run start:prod- Click the connection selector in the header
- Click "Add New Connection"
- Enter your Elasticsearch URL (e.g.,
https://localhost:9200) - Provide credentials if required
- Choose a name and color for easy identification
- Click "Connect"
- Select an index from the sidebar
- Use the search bar with simple text or JSON query mode
- Select which fields to search in
- Click on a document to expand and view details
- Select two documents using the checkboxes
- Click the "Compare" button in the toolbar
- View differences highlighted in the diff viewer
- Connect to your source Elasticsearch cluster
- Navigate to the document you want to copy
- Click the "Copy" button on the document row
- Select the target connection and index
- Confirm the copy operation
| Variable | Description | Default |
|---|---|---|
PORT |
Next.js server port | 3001 |
ElasticScope supports SQLite (default), PostgreSQL, and MySQL.
SQLite (Default):
DB_TYPE=sqlite
# DB_PATH=./data/connections.db # OptionalPostgreSQL:
DB_TYPE=postgresql
DB_HOST=localhost
DB_PORT=5432
DB_NAME=elasticscope
DB_USER=postgres
DB_PASSWORD=secretMySQL:
DB_TYPE=mysql
DB_HOST=localhost
DB_PORT=3306
DB_NAME=elasticscope
DB_USER=root
DB_PASSWORD=secretElasticScope supports:
- HTTP and HTTPS connections
- Basic authentication (username/password)
- Self-signed SSL certificates
- Custom CA certificates
| Layer | Technology |
|---|---|
| App/API | Next.js, React, TypeScript, Node.js |
| Database | SQLite, PostgreSQL, MySQL |
| ES Client | @elastic/elasticsearch |
| UI Icons | Lucide React |
| Diff View | react-diff-viewer-continued |
elasticscope/
├── src/ # Next.js app and React UI
│ ├── app/ # App Router pages and API route entrypoints
│ ├── api/ # Browser API client functions
│ ├── components/ # React components
│ ├── constants/ # Application constants
│ ├── hooks/ # Custom React hooks
│ ├── styles/ # CSS styles
│ ├── types/ # TypeScript types
│ └── utils/ # Utility functions
├── server/ # Node-only API and database logic
│ ├── api/ # Next API implementation
│ └── database/ # SQLite/PostgreSQL/MySQL adapters
├── public/ # Static assets
├── data/ # SQLite database files
└── docs/ # Documentation
🎉 We welcome contributions from the community! Whether you're fixing bugs, adding features, or improving documentation, your help is appreciated.
- 🐛 Report Bugs: Found a bug? Open an issue
- 💡 Suggest Features: Have an idea? Create a feature request
- 📖 Improve Documentation: Help others by improving our docs
- 🔧 Submit Pull Requests: Fix bugs or add features
- ⭐ Star the Project: Show your support!
Please read our Contributing Guidelines and Code of Conduct before contributing.
# Fork and clone the repo
git clone https://github.com/YOUR_USERNAME/ElasticScope.git
cd ElasticScope
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run buildNew to the project? Look for issues labeled good first issue.
- Use TypeScript strict mode
- Follow the existing code patterns
- Use Lucide icons (no emojis in UI)
- Keep components small and focused
- Write meaningful commit messages
- Add tests when applicable
- 📖 Documentation: Check our README and Docker Guide
- 💬 Questions: Open a question issue
- 🐛 Bug Reports: Report bugs
- 💡 Feature Requests: Suggest features
Found a security vulnerability? Please review our Security Policy for responsible disclosure.
This project is licensed under the MIT License - see the LICENSE file for details.
- Elasticsearch - The powerful search engine
- React - UI framework
- Lucide - Beautiful icons
- Next.js - React framework and API runtime
Made with care for the Elasticsearch community
If you find this project useful, please consider giving it a ⭐
