https://github.com/httptoolkit/httptoolkit-ui

The UI of HTTP Toolkit
https://github.com/httptoolkit/httptoolkit-ui

developer-tools http http-proxy tools

Last synced: about 2 months ago
JSON representation

The UI of HTTP Toolkit

• Host: GitHub
• URL: https://github.com/httptoolkit/httptoolkit-ui
• Owner: httptoolkit
• License: agpl-3.0
• Created: 2018-01-09T00:01:38.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-07-29T17:16:47.000Z (about 2 months ago)
• Last Synced: 2024-07-29T23:08:28.605Z (about 2 months ago)
• Topics: developer-tools, http, http-proxy, tools
• Language: TypeScript
• Homepage: https://httptoolkit.com
• Size: 9.26 MB
• Stars: 281
• Watchers: 12
• Forks: 103
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
HTTP Toolkit UI [![Build Status](https://github.com/httptoolkit/httptoolkit-ui/workflows/CI/badge.svg)](https://github.com/httptoolkit/httptoolkit-ui/actions)

===================

This repo contains the UI for [HTTP Toolkit](https://httptoolkit.com), a beautiful, cross-platform & open-source HTTP(S) debugging proxy, analyzer & client.

Looking to file bugs, request features or send feedback? File an issue or vote on existing ones at [github.com/httptoolkit/httptoolkit](https://github.com/httptoolkit/httptoolkit).

## What is this?

HTTP Toolkit is built as a single-page web application (this repo), running on top of [a server](https://github.com/httptoolkit/httptoolkit-server) that provides access to non-web functionality (e.g. running a proxy server), typically run through [an electron desktop wrapper app](https://github.com/httptoolkit/httptoolkit-desktop). The core UI and the majority of HTTP Toolkit functionality all lives here, except for desktop-app specific behaviour & build configuration, or functionality that can't be implemented in a web app.

The UI is built as a TypeScript React app, using MobX for state and Styled Components for styling, with [Mockttp](https://github.com/httptoolkit/mockttp) used to manage the HTTP interception itself.

When running, the UI is typically used via [app.httptoolkit.tech](https://app.httptoolkit.tech), even in the desktop app (it's not embedded there, but hosted standalone). It can either be used through the desktop app (which starts its own server), or users can start their own server and open the UI in a browser directly.

## Contributing

If you want to change the behaviour of the HTTP Toolkit in almost any way, except the low-level HTTP handling (see [Mockttp](https://github.com/httptoolkit/mockttp)), how interceptors start applications (see [httptoolkit-server](https://github.com/httptoolkit/httptoolkit-server)) or how it's packaged and distributed (see [httptoolkit-desktop](https://github.com/httptoolkit/httptoolkit-desktop)), then you're in the right place :+1:.

To get started:

* Clone this repo.

* `npm install`

    * On an arm64 Mac, you may see a Puppeteer error saying "The chromium binary is not available for arm64". See https://github.com/puppeteer/puppeteer/issues/6622 for more details. As a quick fix you can run `export PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true` and then re-run npm install (you may need to delete node_modules first). In this case, the integration tests won't work but that's rarely important for local development.

* For pure UI development

    * Run `npm start` to start the UI along with a backing [httptoolkit server](https://github.com/httptoolkit/httptoolkit-server).

        * On an arm64 Mac, this may not work. You can run the server in development mode locally though (jump to the next section).

    * Open [`localhost:8080`](http://localhost:8080) to view the UI.

* To develop the UI & server together

    * Start [a server](https://github.com/httptoolkit/httptoolkit-server) locally

    * Run `npm run start:web` to start the UI without running a separate HTTP Toolkit server

    * Open [`localhost:8080`](http://localhost:8080) to view the UI

* `npm test` - run the tests