TuiPost

A terminal-based HTTP client inspired by Postman, built with React and OpenTUI.

Features

• Postman-like interface in your terminal
• Support for GET, POST, PUT, PATCH, DELETE, HEAD, and OPTIONS methods
• Request history tracking with click-to-load
• Query parameters editor with inline editing
• Headers editor with inline editing
• JSON body editor with full text editing
• Response viewer with status, timing, and size metrics
• Full keyboard navigation and mouse support

Requirements

• Bun >= 1.0.0 (required - OpenTUI uses Bun-specific features)

Installation

# Install Bun if you don't have it
curl -fsSL https://bun.sh/install | bash

# Clone the repository
git clone https://github.com/rosdyana/TuiPost.git
cd TuiPost

# Install dependencies
bun install

# Build
bun run build

# Run
bun run start

Usage

# Run the application
bun run start

# Or run directly
bun dist/cli.js

Keyboard Shortcuts

Key	Action
Tab	Cycle focus forward through UI elements
Shift+Tab	Cycle focus backward
Enter	Send request (when in URL input) / Select item
Ctrl+Enter	Send request from anywhere
Ctrl+L	Focus URL input
Escape	Clear focus
↑/↓	Navigate in dropdowns/lists
Ctrl+C	Exit application

Mouse Interactions

• Click URL input to focus and type
• Click Send button to send request
• Click method dropdown to open, then click/arrow to select
• Click history items to load previous requests
• Click tabs (Params/Headers/Body) to switch views
• Click key-value fields to edit inline
• Click "+ Add new" to add new parameters/headers

Layout

┌─────────────────┬──────────────────────────────────────────┐
│  History        │  [GET ▼] [URL...                ] [SEND] │
│                 │──────────────────────────────────────────│
│  GET  /posts/1  │  [Params] [Headers] [Body]               │
│  POST /posts    │──────────────────────────────────────────│
│  GET  /users    │  Request Body (JSON)                     │
│                 │  ┌──────────────────────────────────────┐│
│                 │  │ {                                    ││
│                 │  │   "title": "foo",                    ││
│                 │  │   "body": "bar"                      ││
│                 │  │ }                                    ││
│                 │  └──────────────────────────────────────┘│
│                 ├──────────────────────────────────────────│
│  3 requests     │  Response      Status: 200 | Time: 45ms  │
└─────────────────│──────────────────────────────────────────│
                  │  {                                       │
                  │    "id": 1,                              │
                  │    "title": "foo"                        │
                  │  }                                       │
                  │                                          │
                  │  Completed                               │
                  └──────────────────────────────────────────┘

Development

Project Structure

TuiPost/
├── src/
│   ├── components/         # React components
│   │   ├── KeyValueEditor.tsx   # Editable key-value pairs
│   │   ├── RequestBar.tsx       # Method, URL, Send button
│   │   ├── ResponsePanel.tsx    # Response display
│   │   ├── Sidebar.tsx          # History panel
│   │   ├── TabBar.tsx           # Params/Headers/Body tabs
│   │   ├── TabContent.tsx       # Tab content renderer
│   │   └── index.ts
│   ├── hooks/              # Custom React hooks
│   │   ├── useFocus.ts          # Focus management
│   │   ├── useHistory.ts        # Request history
│   │   ├── useRequest.ts        # HTTP request state
│   │   └── index.ts
│   ├── utils/              # Utility functions
│   │   ├── colors.ts            # Color helpers
│   │   └── index.ts
│   ├── App.tsx             # Main application component
│   ├── cli.tsx             # CLI entry point
│   ├── index.ts            # Library exports
│   └── types.ts            # TypeScript type definitions
├── package.json
├── tsconfig.json
└── README.md

Scripts

# Install dependencies
bun install

# Build for production
bun run build

# Run the app
bun run start

# Type check
bun run typecheck

# Lint
bun run lint

# Format code
bun run format

Technology Stack

• Bun - JavaScript runtime (required)
• React 19 - Component model
• OpenTUI - Terminal UI framework
• TypeScript - Type safety

Contributing

Contributions are welcome! Please read our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

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

Acknowledgments

• Postman for the inspiration
• OpenTUI for the terminal UI framework
• React for the component model