Skip to main content

​
Overview

Bruno is an Electron-based desktop application built with React. It uses a monorepo structure managed by npm workspaces, with multiple specialized packages working together.
Bruno is offline-only by design. All data is stored locally on your filesystem, with no cloud sync. This ensures your API collections remain private and under your control.

​
Technology Stack

​
Frontend

React 19

Modern React with hooks and functional components

Redux Toolkit

State management with @reduxjs/toolkit

Styled Components

CSS-in-JS for component styling

Tailwind CSS

Utility-first CSS for layout

​
Build Tools

  • Rsbuild: Fast build tool for React (development and production)
  • Electron Builder: Package and build desktop apps
  • Babel: JavaScript transpilation
  • Jest: Testing framework
  • Playwright: End-to-end testing

​
Key Libraries

  • CodeMirror 5: Code editors for requests/responses
  • Tabler Icons: Icon library
  • Tippy.js: Tooltips and popovers
  • React DnD: Drag and drop functionality
  • Formik + Yup: Form handling and validation

​
Monorepo Structure

Bruno uses npm workspaces to manage 15+ packages: 
bruno/
├── packages/
│   ├── bruno-app/          # React frontend application
│   ├── bruno-electron/     # Electron main process
│   ├── bruno-cli/          # Command-line interface
│   ├── bruno-common/       # Shared utilities
│   ├── bruno-converters/   # Import/export converters
│   ├── bruno-filestore/    # File system operations
│   ├── bruno-graphql-docs/ # GraphQL documentation
│   ├── bruno-js/           # JavaScript sandbox
│   ├── bruno-lang/         # Bru language parser
│   ├── bruno-query/        # Query language
│   ├── bruno-requests/     # HTTP request handling
│   ├── bruno-schema/       # Schema definitions
│   ├── bruno-schema-types/ # TypeScript schema types
│   ├── bruno-tests/        # Test collections
│   └── bruno-toml/         # TOML parsing
└── package.json            # Root workspace config

​
Core Packages

The React FrontendMain UI application built with React 19 and Rsbuild. Handles:
  • Request/response interface
  • Collection management
  • Code editors (CodeMirror)
  • Authentication flows
  • Environment variables
  • Testing and assertions
Tech Stack:
  • React 19.0.0
  • Redux Toolkit for state
  • Styled Components + Tailwind CSS
  • CodeMirror for code editing
  • GraphiQL for GraphQL
The Electron Main ProcessManages the desktop application shell and native integrations:
  • Window management
  • File system access via IPC
  • Native menus and dialogs
  • Auto-updates
  • Terminal integration (@lydell/node-pty)
Key Dependencies:
  • Electron 37.6.1
  • Chokidar for file watching
  • Electron Store for settings
Command-Line InterfaceRun Bruno collections from the command line:
  • Execute collections programmatically
  • CI/CD integration
  • Automated testing
  • Environment variable support
Published to npm as: @usebruno/cli
# Run a collection
bru run collection
Bru Language ParserParser for Bruno’s .bru file format:
  • Plain text markup language
  • Git-friendly format
  • Request/response definitions
  • Metadata and assertions
This is what makes Bruno collections version-control friendly.
HTTP Request EngineCore request handling logic:
  • HTTP/HTTPS requests
  • Authentication (Bearer, Basic, OAuth2, AWS Signature)
  • Proxy support
  • SSL/TLS configuration
  • Request/response interceptors
Import/Export ConvertersConvert between different API client formats:
  • Postman collections
  • Insomnia collections
  • OpenAPI/Swagger
  • HAR files
Enables easy migration to Bruno from other tools.
File System ManagementHandles collection storage:
  • Read/write .bru files
  • Collection organization
  • File system watching
  • Workspace management
Shared UtilitiesCommon code shared across packages:
  • Utility functions
  • Constants
  • Type definitions
  • Shared logic
Schema DefinitionsDefines the structure of Bruno collections:
  • Request schema
  • Collection schema
  • Environment schema
  • Validation rules

​
Data Flow

1

User Interaction

User interacts with the React UI (bruno-app)
2

Redux State

Actions dispatch to Redux store, updating application state
3

IPC Communication

Frontend sends IPC messages to Electron main process for file/system operations
4

File Operations

bruno-filestore reads/writes .bru files using bruno-lang parser
5

Request Execution

bruno-requests handles HTTP requests with appropriate auth and proxies
6

Response Handling

Response flows back through IPC to Redux state, updating UI

​
File Storage Format

Bruno uses its own .bru file format:
Example Request
meta {
  name: Get Users
  type: http
  seq: 1
}

get {
  url: {{baseUrl}}/api/users
}

headers {
  Authorization: Bearer {{token}}
  Content-Type: application/json
}

assert {
  res.status: eq 200
  res.body.users: isDefined
}
The .bru format is designed to be:
  • Human-readable: Easy to understand and edit
  • Git-friendly: Produces clean diffs
  • Plain text: No binary formats

​
Build Process

​
Development Build

  1. Package builds: TypeScript packages compile to JavaScript
  2. React app: Rsbuild starts dev server with hot reload
  3. Electron: Launches with DevTools enabled
  4. File watching: Chokidar monitors collection changes

​
Production Build

  1. Build packages: All TypeScript packages compile
  2. Bundle React app: Rsbuild creates optimized production bundle
  3. Package Electron: electron-builder creates installers
  4. Platform-specific: Separate builds for Mac, Windows, Linux
npm run build:electron:mac

​
Testing Architecture

Jest for unit testing:
  • Package-level tests
  • Utility function tests
  • Parser tests
  • Schema validation tests
npm test --workspaces --if-present

​
Authentication Architecture

Supported authentication methods:
  • Basic Auth: Username/password
  • Bearer Token: JWT and API tokens
  • OAuth 2.0: Full OAuth flow
  • AWS Signature v4: AWS API authentication
  • API Key: Custom header/query auth
  • Digest Auth: RFC 2617 digest authentication
  • NTLM: Windows authentication

​
Key Design Principles

Offline-First

No cloud dependencies, all data stays local

Git-Friendly

Plain text format for easy version control

Privacy-Focused

Your data never leaves your machine

Open Source

Transparent, auditable codebase

​
Performance Optimizations

  • Code splitting: Dynamic imports for large features
  • Virtualization: Large lists use react-virtuoso
  • Memoization: React.memo and useMemo for expensive renders
  • Worker threads: Heavy processing offloaded where possible
  • Lazy loading: Components loaded on demand

​
Next Steps

Now that you understand Bruno’s architecture:
Start with smaller packages like bruno-common or bruno-converters to get familiar with the codebase before tackling bruno-app or bruno-electron.

Build docs developers (and LLMs) love

Get started for freeTalk to us