A modern, high-performance web API client built with React, TypeScript, and Vite. Flamingo Web provides a powerful interface for crafting HTTP requests, managing environments and collections, and syncing your data across devices — all from your browser.
- HTTP Request Builder — Full-featured editor for GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS requests with support for headers, query parameters, body (JSON, form-data, text), and authentication (Basic Auth, Bearer Token, API Key)
- Monaco Editor Integration — Code-grade editing for request/response bodies with syntax highlighting, autocompletion, and theming
- Environment Variables — Define reusable variables across environments (development, staging, production) with dynamic resolution in requests
- Collections — Organize requests into folders for project-level grouping and reuse
- Request History — Automatic saving of recent requests with search and filtering
- Multi-Tab Interface — Work on multiple requests simultaneously with resizable panels
- Sync Across Devices — Cloud sync with end-to-end encryption (AES-256-GCM) via the Flamingo Sync Server
- Theme Support — Light, dark, and system-following themes
- Keyboard Shortcuts — Power-user shortcuts for every action
- Auto-Save — Never lose your work with automatic state persistence via localStorage
- Loading Screen — Animated progress ring with real resource tracking and random tips
- Command Palette — Quick navigation with
Ctrl+K - Response Compare — Side-by-side response comparison
- cURL Import — Paste cURL commands directly into the request builder
| Layer | Technology |
|---|---|
| UI Framework | React 18 |
| Build Tool | Vite 5 |
| Language | TypeScript 5 |
| Styling | TailwindCSS 3 |
| Components | Radix UI (20+ primitives) |
| State Management | Zustand 5 |
| Editor | Monaco Editor (VS Code engine) |
| Animations | Framer Motion 11 |
| Icons | Lucide React |
| HTTP Client | Fetch API |
| Encryption | Web Crypto API (AES-256-GCM) |
webclient/
├── public/ # Static assets
│ ├── sync.json # Sync server URL config
│ ├── Onest.ttf # Onest font
│ └── GoogleSansCode.ttf # Google Sans Code font
├── src/
│ ├── components/
│ │ ├── layout/ # App shell (TitleBar, LoadingScreen)
│ │ ├── request/ # Request builder (URL, headers, body, auth)
│ │ ├── response/ # Response viewer (body, headers, status, compare)
│ │ ├── sidebar/ # Sidebar panels (History, Collections, Environments, Favorites, Settings)
│ │ ├── ui/ # Primitives (Button, Input, Tabs, Dialog, etc.)
│ │ └── workspace/ # TabBar, CommandPalette
│ ├── lib/
│ │ ├── sync/ # Sync client (crypto, store, provider, types)
│ │ ├── curl-parser.ts # cURL command parser
│ │ ├── script-runner.ts # Pre/post-request script engine
│ │ ├── monaco-setup.ts # Monaco editor initialization
│ │ ├── types.ts # Core type definitions
│ │ └── utils.ts # Utility functions
│ ├── main/
│ │ ├── index.tsx # App entry point (React root)
│ │ └── App.tsx # Root component
│ ├── stores/ # Zustand stores
│ │ ├── history-store.ts
│ │ ├── environment-store.ts
│ │ ├── collection-store.ts
│ │ ├── settings-store.ts
│ │ ├── tab-store.ts
│ │ ├── theme-store.ts
│ │ └── ui-store.ts
│ └── styles/
│ └── globals.css # Tailwind layers, @font-face, theme variables
├── index.html # Entry HTML with inline loading screen
├── vite.config.ts # Vite config
├── tailwind.config.ts # Tailwind config with theme tokens
├── tsconfig.json # TypeScript config
└── postcss.config.js # PostCSS config
Flamingo Web uses Zustand with the persist middleware for all application state. Each domain has its own store:
| Store | Purpose | Persisted |
|---|---|---|
history-store |
Request history entries | Yes |
environment-store |
Environment variables | Yes |
collection-store |
Request collections | Yes |
settings-store |
App preferences (font size, timeout, etc.) | Yes |
tab-store |
Open tabs and active tab | Yes |
theme-store |
Theme preference | Yes |
sync-store |
Login state and sync config | Yes |
ui-store |
UI state (modal open, panel width) | No |
Flamingo Web integrates with the Flamingo Sync Server for cross-device data synchronization:
- End-to-End Encryption — All data is encrypted with AES-256-GCM before leaving the client
- Master Key — A random 256-bit key is generated per user
- Multi-Device — Subsequent devices fetch the shared master key from the server
- Selective Sync — Users choose which data types to sync (history, environments, collections, settings)
- Token Auth — Device-authorization flow with temporary tokens and browser-based claim
- Node.js >= 18
- npm >= 9
cd webclient
pnpm installpnpm run dev # Vite dev server (http://localhost:5173)pnpm run build # TypeScript check + Vite production buildpnpm run preview # Preview production build locallypnpm run lint # TypeScript type-check (no emit)| Script | Description |
|---|---|
pnpm run dev |
Start Vite dev server (port 5173) |
pnpm run build |
TypeScript check + Vite production build |
pnpm run preview |
Preview Vite production build |
pnpm run lint |
TypeScript type-check (tsc --noEmit) |
| Shortcut | Action |
|---|---|
Ctrl+Enter |
Send request |
Ctrl+T |
New tab |
Ctrl+W |
Close tab |
Ctrl+Shift+T |
Reopen closed tab |
Ctrl+K |
Open command palette |
Ctrl+B |
Toggle sidebar |
Ctrl+, |
Open settings |
Flamingo Web builds to a static dist/ directory. Deploy it to any static host:
pnpm run build
# Upload dist/ to your hosting providerWorks with Vercel, Netlify, Cloudflare Pages, GitHub Pages, or any static file server.
MIT License — see LICENSE
Copyright (c) 2024 Javier Fernández (Jallox/Jayox)