Beo Echo is a powerful API mocking service with a robust Golang backend and sleek Svelte frontend. It serves as a comprehensive control panel for creating, managing, and monitoring mock APIs and request forwarding, similar to popular tools like Beeceptor and Mockoon.
Beo Echo provides a user-friendly interface for:
- Creating and configuring mock APIs
- Forwarding requests to existing endpoints
- Real-time request logging and inspection
- API behavior management with multiple response types
Run Beo Echo using the pre-built Docker image:
docker run -d \
--platform linux/amd64 \
-p 8080:80 \
-v $(pwd)/beo-echo-config/:/app/configs/ \
ghcr.io/yogasw/beo-echo:latestNote: The Docker image is built for x86 architecture only. ARM builds are not provided because GitHub Actions requires significantly longer build times for ARM architecture. The
--platform linux/amd64flag ensures compatibility across different systems, including ARM-based machines running Docker through emulation.
After running the container, access the application at http://localhost:8080
Default Login Credentials:
- Email:
admin@admin.com - Password:
admin
For development purposes, you can run the backend and frontend separately:
The project follows a clean architecture with:
/beo-echo/
├── .github/ # GitHub Actions and workflows
├── .vscode/ # VSCode settings
├── backend/ # Golang Backend
│ └── ... # Go files for the backend service
└── frontend/ # Svelte Frontend
└── ... # Svelte and TypeScript files
- Language: Go
- Framework: Gin
- ORM: GORM
- Database: SQLite (configurable)
- Framework: SvelteKit
- Styling: Tailwind CSS
- Language: TypeScript
- State Management: Svelte stores
Beo Echo supports multiple execution modes:
- Mock Mode: Create and serve mock API responses
- Forwarder Mode: Forward requests to existing endpoints
- Hybrid Mode: Conditionally mock or forward based on rules
Track and analyze all incoming requests with detailed logs including:
- Request method, path, headers, and body
- Response status, time, and content
- Execution mode indicators
Secure access to your mock APIs with:
- JWT-based authentication
- Role-based access control
- Workspace isolation
Choose your preferred visual experience:
- Dark mode (default)
- Light mode
- Consistent design across all components
- Clone the repository:
git clone https://github.com/yogasw/beo-echo.git
cd beo-echo- Start the backend:
cd backend
go run main.go- Start the frontend:
cd frontend
npm install
npm run dev- Access the application at http://localhost:5173
Beo Echo now uses Caddy for simplified deployment instead of Traefik:
caddy runThe Caddyfile in the project root handles all the necessary routing.
By default, Beo Echo uses a SQLite database stored in the configured data directory. You can override the database connection by setting the DATABASE_URL environment variable to use PostgreSQL instead:
DATABASE_URL=postgresql://username:password@host:port/database go run main.goWhen a valid PostgreSQL connection string is provided in the DATABASE_URL environment variable, the system automatically uses PostgreSQL instead of SQLite.
- This is an active development project
- Feel free to fork and adapt it to suit your needs
- If you encounter issues or bugs, contributions are welcome
- Background: Dark grayish blue (
bg-gray-800) with lighter accents (bg-gray-700,bg-gray-750) - Text: Clean white (
text-white) with muted variants (text-gray-300,text-gray-400) - Accent Colors: Blue highlights (
text-blue-400,bg-blue-600), status indicators in green, red, and yellow
- Background: Clean white (
bg-white) with subtle gray accents (bg-gray-50,bg-gray-100) - Text: Dark gray (
text-gray-800) with lighter variants - Accent Colors: Consistent with dark mode for brand recognition
- Cards & Panels: Rounded containers with subtle shadows and borders
- Form Elements: Consistent styling with clear focus states
- Buttons: Color-coded by action type (primary, secondary, destructive)
- Status Indicators: Color-coded method badges (GET: green, POST: blue, etc.)
- Responsive grid layouts that adapt to different screen sizes
- Mobile-optimized touch targets and navigation
- Properly stacked elements on smaller screens
Beo Echo uses a dual-approach theme system:
- Tailwind Dark Mode: Class-based strategy for toggling themes
- Theme Utility Functions: Consistent application of theme styles
<ThemeToggle showLabel={true} size="default" />This provides an elegant interface for users to switch between dark and light modes, with the selected preference persisted across sessions.
- Keep components modular and focused on a single responsibility
- Use Svelte stores for shared state
- Follow TypeScript best practices with proper typing
- All API calls should be centralized in the
$lib/apidirectory - Handle loading states and error conditions consistently
- Ensure keyboard navigation works properly
- Use proper ARIA attributes for interactive elements
- Maintain sufficient color contrast ratios
- Test with screen readers
Based on the existing components, follow these established patterns:
- Main container with
w-full bg-gray-800 p-4 relative - Header section with title, subtitle, and action buttons
- Content area with appropriate spacing between sections
- Optional notification system for feedback
- Section Headers: Include an icon in a colored background with title
- Expandable Sections: Toggle visibility with chevron indicators
- Search Fields: Include icon prefix and clear, descriptive placeholder text
- Status Indicators: Use color-coding for status representation
- Data Displays: Use structured layouts with proper labeling
- Ensure touch targets are sufficiently large (min 44px)
- Stack elements vertically on small screens
- Use responsive grids:
grid-cols-1 md:grid-cols-2 - Test on various screen sizes