Giter Site home page Giter Site logo

hoppscotch / hoppscotch Goto Github PK

View Code? Open in Web Editor NEW
60.1K 476.0 4.2K 76.57 MB

๐Ÿ‘ฝ Open source API development ecosystem - https://hoppscotch.io

Home Page: https://hoppscotch.io

License: MIT License

JavaScript 2.61% Vue 33.33% Dockerfile 0.13% Shell 0.02% SCSS 0.95% TypeScript 61.71% HTML 0.06% Handlebars 0.66% Rust 0.55%
api api-client api-rest pwa api-testing vue vuejs tools testing-tools testing

hoppscotch's Introduction

Hoppscotch

Hoppscotch

Open Source API Development Ecosystem

contributions welcome Website Tests Tweet

Built with โค๏ธŽ by contributors


Hoppscotch

We highly recommend you take a look at the Hoppscotch Documentation to learn more about the app.

Support

Chat on Discord Chat on Telegram Discuss on GitHub

Features

โค๏ธ Lightweight: Crafted with minimalistic UI design.

โšก๏ธ Fast: Send requests and get responses in real time.

๐Ÿ—„๏ธ HTTP Methods: Request methods define the type of action you are requesting to be performed.

  • GET - Requests retrieve resource information
  • POST - The server creates a new entry in a database
  • PUT - Updates an existing resource
  • PATCH - Very similar to PUT but makes a partial update on a resource
  • DELETE - Deletes resource or related component
  • HEAD - Retrieve response headers identical to those of a GET request, but without the response body.
  • CONNECT - Establishes a tunnel to the server identified by the target resource
  • OPTIONS - Describe the communication options for the target resource
  • TRACE - Performs a message loop-back test along the path to the target resource
  • <custom> - Some APIs use custom request methods such as LIST. Type in your custom methods.

๐ŸŒˆ Theming: Customizable combinations for background, foreground, and accent colors โ€” customize now.

  • Choose a theme: System preference, Light, Dark, and Black
  • Choose accent colors: Green, Teal, Blue, Indigo, Purple, Yellow, Orange, Red, and Pink
  • Distraction-free Zen mode

Customized themes are synced with your cloud/local session.

๐Ÿ”ฅ PWA: Install as a Progressive Web App on your device.

  • Instant loading with Service Workers
  • Offline support
  • Low RAM/memory and CPU usage
  • Add to Home Screen
  • Desktop PWA

๐Ÿš€ Request: Retrieve response from endpoint instantly.

  1. Choose method
  2. Enter URL
  3. Send
  • Copy/share public "Share URL"
  • Generate/copy request code snippets for 10+ languages and frameworks
  • Import cURL
  • Label requests

๐Ÿ”Œ WebSocket: Establish full-duplex communication channels over a single TCP connection.

๐Ÿ“ก Server-Sent Events: Receive a stream of updates from a server over an HTTP connection without resorting to polling.

๐ŸŒฉ Socket.IO: Send and Receive data with the SocketIO server.

๐ŸฆŸ MQTT: Subscribe and Publish to topics of an MQTT Broker.

๐Ÿ”ฎ GraphQL: GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

  • Set endpoint and get schema
  • Multi-column docs
  • Set custom request headers
  • Query schema
  • Get query response

๐Ÿ” Authorization: Allows to identify the end-user.

  • None
  • Basic
  • Bearer Token
  • OAuth 2.0
  • OIDC Access Token/PKCE

๐Ÿ“ข Headers: Describes the format the body of your request is being sent in.

๐Ÿ“ซ Parameters: Use request parameters to set varying parts in simulated requests.

๐Ÿ“ƒ Request Body: Used to send and receive data via the REST API.

  • Set Content Type
  • FormData, JSON, and many more
  • Toggle between key-value and RAW input parameter list

๐Ÿ“ฎ Response: Contains the status line, headers, and the message/response body.

  • Copy the response to the clipboard
  • Download the response as a file
  • View response headers
  • View raw and preview HTML, image, JSON, and XML responses

โฐ History: Request entries are synced with your cloud/local session storage.

๐Ÿ“ Collections: Keep your API requests organized with collections and folders. Reuse them with a single click.

  • Unlimited collections, folders, and requests
  • Nested folders
  • Export and import as a file or GitHub gist

Collections are synced with your cloud/local session storage.

๐Ÿ“œ Pre-Request Scripts: Snippets of code associated with a request that is executed before the request is sent.

  • Set environment variables
  • Include timestamp in the request headers
  • Send a random alphanumeric string in the URL parameters
  • Any JavaScript functions

๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ Teams: Helps you collaborate across your teams to design, develop, and test APIs faster.

  • Create unlimited teams
  • Create unlimited shared collections
  • Create unlimited team members
  • Role-based access control
  • Cloud sync
  • Multiple devices

๐Ÿ‘ฅ Workspaces: Organize your personal and team collections environments into workspaces. Easily switch between workspaces to manage multiple projects.

  • Create unlimited workspaces
  • Switch between personal and team workspaces

โŒจ๏ธ Keyboard Shortcuts: Optimized for efficiency.

Read our documentation on Keyboard Shortcuts

๐ŸŒ Proxy: Enable Proxy Mode from Settings to access blocked APIs.

  • Hide your IP address
  • Fixes CORS (Cross-Origin Resource Sharing) issues
  • Access APIs served in non-HTTPS (http://) endpoints
  • Use your Proxy URL

Official proxy server is hosted by Hoppscotch - GitHub - Privacy Policy.

๐ŸŒŽ i18n: Experience the app in your language.

Help us to translate Hoppscotch. Please read TRANSLATIONS for details on our CODE OF CONDUCT and the process for submitting pull requests to us.

โ˜๏ธ Auth + Sync: Sign in and sync your data in real-time across all your devices.

Sign in with:

  • GitHub
  • Google
  • Microsoft
  • Email
  • SSO (Single Sign-On)1

๐Ÿ”„ Synchronize your data: Handoff to continue tasks on your other devices.

  • Workspaces
  • History
  • Collections
  • Environments
  • Settings

โœ… Post-Request Tests: Write tests associated with a request that is executed after the request's response.

  • Check the status code as an integer
  • Filter response headers
  • Parse the response data
  • Set environment variables
  • Write JavaScript code

๐ŸŒฑ Environments: Environment variables allow you to store and reuse values in your requests and scripts.

  • Unlimited environments and variables
  • Initialize through the pre-request script
  • Export as / import from GitHub gist
Use-cases
  • By storing a value in a variable, you can reference it throughout your request section
  • If you need to update the value, you only have to change it in one place
  • Using variables increases your ability to work efficiently and minimizes the likelihood of error

๐Ÿšš Bulk Edit: Edit key-value pairs in bulk.

  • Entries are separated by newline
  • Keys and values are separated by :
  • Prepend # to any row you want to add but keep disabled

๐ŸŽ›๏ธ Admin dashboard: Manage your team and invite members.

  • Insights
  • Manage users
  • Manage teams

๐Ÿ“ฆ Add-ons: Official add-ons for hoppscotch.

Add-ons are developed and maintained under Hoppscotch Organization.

For a complete list of features, please read our documentation.

Demo

hoppscotch.io

Usage

  1. Provide your API endpoint in the URL field
  2. Click "Send" to simulate the request
  3. View the response

Developing

Follow our self-hosting documentation to get started with the development environment.

Contributing

Please contribute using GitHub Flow. Create a branch, add commits, and open a pull request.

Please read CONTRIBUTING for details on our CODE OF CONDUCT, and the process for submitting pull requests to us.

Continuous Integration

We use GitHub Actions for continuous integration. Check out our build workflows.

Changelog

See the CHANGELOG file for details.

Authors

This project owes its existence to the collective efforts of all those who contribute โ€” contribute now.

License

This project is licensed under the MIT License โ€” see the LICENSE file for details.

Footnotes

  1. Enterprise edition feature. Learn more. โ†ฉ

hoppscotch's People

Contributors

0xc0der avatar allcontributors[bot] avatar amk-dev avatar andrewbastin avatar ankitsridhar16 avatar anwarulislam avatar athul avatar balub avatar carlos-ds avatar dependabot-preview[bot] avatar dependabot[bot] avatar dihmeetree avatar hosseinnedaee avatar izerozlu avatar jacobanavisca avatar jamesgeorge007 avatar joeljacobstephen avatar kyteinsky avatar leomp12 avatar liyasthomas avatar mirarifhasan avatar nbtx avatar nickpalenchar avatar nityanandagohain avatar nivedin avatar pmankar avatar reefqi037 avatar samjakob avatar thehollidayinn avatar yubathom avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

hoppscotch's Issues

Editorconfig file

Is your feature request related to a problem? Please describe.
Related to development process. In some files indentations are not synchronized.

Describe the solution you'd like
It'd be useful to have an .editorconfig file to synchronize formatting between files.

Describe alternatives you've considered
Manual formatting. It was painful.

Additional context

[*.vue]
indent_style = tab
indent_size = 4

Not working on Brave Browser anymore

Describe the bug
When the project was released, I was using it on Brave and everything was fine. The code right now is very different from before, but is not working anymore.
I know that this is a small project, but I'm just opening this issue because it was working before and now it isn't, maybe it's just a small fix that someone can do it :)

The error message that is showing in the console is:

TypeError: Cannot read property 'className' of undefined

To Reproduce
Open https://liyasthomas.github.io/postwoman/ on a up to date Brave Browser.

Expected behavior
It should work like Chrome, because for me it's still working on Chrome.

Screenshots
image

Desktop (please complete the following information):

  • OS: Ubuntu 18.04 or Window 10
  • Browser Brave
  • Version 0.68.131 Chromium: 76.0.3809.100 (Official Build) (64-bit)

Additional context
If you don't want to support Brave you can close this issue, no problem, I can still use it on Chrome.

Serialize a request into JSON?

Hey there, have you already planned for serializing entire request into JSON? I'm looking for a simple way to document a REST API, and make it "interactable" in the same time.
Like postman has these "Collections" but simpler I think...

PWA not installable

Describe the bug
"Install PWA" button doesn't work

To Reproduce
Steps to reproduce the behavior:
2. Click on 'Install PWA' button
4. Effect - Not installed

Expected behavior
Doesn't provide "Install App?" dialog to proceed

Screenshots
Lighthouse suggestions through 'Audit' tab in devtools for troubleshooting
image

Additional context for resolution
Try updating the "start_url" in manifest.json to
"start_url": "https://liyasthomas.github.io/postwoman" or "." instead

Request Body Is Not Sent

Describe the bug
During a POST/CREATE/PUT/PATCH request the request body is not actually being sent.

To Reproduce
Steps to reproduce the behavior:

  1. Go to postwoman.io
  2. Switch to POST
  3. Enter: https://jsonplaceholder.typicode.com as URL and /users as path
  4. Add a field "name" with value "foo"
  5. Send the request
  6. Check the response and see missing field "name" with value "foo"

Expected behavior
The response should be { "name":"foo", "id": 11}

Desktop (please complete the following information):

  • OS: Ubuntu 18.04
  • Browser: Chrome (Incognito Tab)
  • Version: 76

Additional context
Iโ€™ve tested this both with a local development project as well as the JSONPlaceholder API and the results are both the same. This problem did not yet occur 20 hours ago, so perhaps itโ€™s a regression from one of the more recent commits.

The query string is built incorrectly when the path contains a parameter

Describe the bug
The URL is crafted incorrectly when the path already contains a query string and when additional parameters are added through the options.
Example: https://reqres.in/api/users?param1=value1?param2=value2

To Reproduce
Steps to reproduce the behavior:
url: http://whatever.com
path: /whatever?param1=value1
parameters: param2 as Key1 and value2 as Value1
Open the developer tools and select the network tab. Filter requests by XHR
Send the request by hitting the Send button.
Using the developer tools, analyze the HTTP request crafted by postwoman, especially the URL

The URL is https://reqres.in/api/users?param1=value1?param2=value2 which isn't valid. The query string isn't valid since the parameters are preceded twice by a question mark. The second parameter should be preceded by a "&" instead.

Expected behavior
The crafted URL should be https://reqres.in/api/users?param1=value1&param2=value2.
In other words, if the path already contains a query string then the additional parameters specified through the parameter section must be correctly added.

Screenshots
Screenshot from 2019-08-28 18-36-24

Screenshot from 2019-08-28 18-34-09

Readable

A test flow should be readable in a repository. It should not require a UI to run the tests. It should be succinct and compact.

Reference ansible uri and strest for examples.

Handling loops, if conditions, and wait should also be possible without requiring the tester to write JavaScript.

Fast URL entry

Is your feature request related to a problem? Please describe.
No.

Describe the solution you'd like
Similar to Postman's interface, I think we should make the URL entry a single bar at the top, with the method on the left. Then we should just parse the URL and fill in the relevant information.

We could keep the extra sections but this would make Postwoman a lot more intuitive and faster to use.

Describe alternatives you've considered
n/a

Additional context
image
As shown, Postman parses the URL as it is entered and automatically fills in the relevant sections.

Add linter semistandard

Hi,

I would like to add the linter in this project with semistandard. What do u think?

Best,
Alpha

Show "Send" button all over the page or enable hotkeys

Is your feature request related to a problem? Please describe.
I'm always frustrated when configuring the request and then having to scroll up the page just to hit the "Send" button.

Describe the solution you'd like
Set a fixed position for the button "Send" or/and enable hotkeys.

HTTP request with different library

Is your feature request related to a problem?
No

Describe the solution you'd like
Why the need to use xhr instead, for example, Axios.
One factor should be the need to use interceptors before or after request

Describe alternatives you've considered
Any

Additional context
No

Cannot use localhost as base url

Describe the bug
Unable to use 'localhost' as base url.

To Reproduce
Steps to reproduce the behavior:

  1. Go to https://liyasthomas.github.io/postwoman/
  2. Click on URL field
  3. Type in: http://localhost:3002 (any port will do, I just happen to have a Node.js server running on that port)
  4. Send button is disabled

Expected behavior
I expect the Send button to be enabled

Desktop (please complete the following information):

  • OS: Arch Linux (64-bit)
  • Browser: Chromium
  • Version: 75.0.3770.142 (Official Build)

Additional context
I cloned the repo and I think the issue is related to pages/index.vue line 247 on urlNotValid's validation pattern, I changed the return statement to always be false, and the problem was solved.

Add support for "application/hal+json" Content-Type

Is your feature request related to a problem? Please describe.
Working with a HATEOAS service that uses HAL, I would like to be able to make requests with the "application/hal+json" media type.

Describe the solution you'd like
I would like an additional option from the content type dropdown.

Additional context
I believe I have made the necessary code changes, but as the CONTRIBUTING.md file for this repo has no information, I'm not sure how to submit the PR.

Vue template

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Why don't move to a standard vue template using vue-cli and benefit of the base configuration ?

Describe alternatives you've considered
Maybe could be cool to move to v3 of vue and starting with Composition API

Additional context
No

Handling request failures when build number is obtained from GitHub

Per discussion in #121, this issue is to determine what we should do if we can't get the latest build number from GitHub at build time. The options I can think of are as follows:

  1. Hide the name section in the version information.
  2. Use 'deep clone' on Travis and get the tag from the git history. (Could make builds slower over time but probably wouldn't have that big an impact)
  3. Get it from package.json but make sure the value in package.json stays up-to-date. (Perhaps use GitHub Actions or something to automatically change it to the version number in GitHub releases?) - Overall this is my preferred option.

/CC: @larouxn @liyasthomas

Simple Misspelling

Describe the bug
Misspelling

To Reproduce
Parameter List Dropdown - (add atleast one parameter)

Expected behavior
"At least", are two words, not one - though English is a pain...

Screenshots
image

Desktop (please complete the following information):

  • OS: W10
  • Browser: Chrome
  • Version: 76.0.3809.100 Official 64-bit

Autoresize the textarea

Is your feature request related to a problem? Please describe.
No (I think)

Describe the solution you'd like
Autoresize the textarea parts such as "Parameter List" and "Header List" so that the rows increase/decrease accordingly when Parameters or Headers are being added/remove instead of showing the scrollbar inside.

Describe alternatives you've considered

  • Do not show the list at all?
  • Use vuetify textarea with auto-grow properties enabled

Additional context

header

Raw request body for POST requests and Authorization key/value in Header

Is your feature request related to a problem? Please describe.
I use Postman and it allows raw JSON to be used for the request body. I'd like to be able to copy/paste this raw JSON to use in Postwoman :)

Also I'd like to add Authorization as a key/value to the Header.

Describe the solution you'd like
Add a dropdown to the content-type selector for raw and provide a text area for me to past e my raw JSON for use in a POST request body.

Add an option to set key/value pairs in the Header.

Describe alternatives you've considered
I don't want to have to add key/value for each piece of information in the request body.

Additional context
none

Last added history entry is removed automatically after refresh

Describe the bug
Entries are added to history[] but after refresh, the last added entry were automatically removed.

To Reproduce
Steps to reproduce the behavior:

  1. Send a mock request
  2. History entry will be added to history section
  3. Refresh the page
  4. Last added history entry automatically removed
  5. Further refresh won't remove entries though

Expected behavior
History shouldn't be removed

Additional context
Add any other context about the problem here.

Dynamic Headers

It would be great if we could create dynamic headers.

for example, some APIs may use a nonce and then based on the nonce we would need to create the hash and also update headers with that hash.

Change .editorconfig

Can we please change the editor config to

indent_size = 2
indent_style = tab

At the very least, I think indent_style should be tab, as the tabs can be visually changed in the editor to the developer's preference.
I think indent_size should be changed because when set to 1, it's actually hard to see where the lines are indented.

Request Headers

Is your feature request related to a problem? Please describe.
Would like to be able to add custom request headers to requests before sending and control headers that are sent.

Describe the solution you'd like
A section the has request headers where you can control and add headers to be sent with API request

Add copy response to clipboard button

Add a button with a caption like "Copy to clipboard" or some fancy icon above the response text field to directly copy the response to the users clipboard.

Comparison with Postman is missing

A comparison with the obvious competitor is must-have for this repository, especially taking into account that you're referencing to it in the name of your app :)

Add DB cache

Add Firebase DB for storage of requests, and cache with Auth to access this log. Have workspace tabs, too maybe?

Styling with Tailwindcss

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Same opinionated question ๐Ÿ˜„: why didn't move to a css framework, for example Tailwindcss ? I think we could gain benefit on already done variation for screen size, theming, and an increasing community

Describe alternatives you've considered
No

Additional context
No

Not Working in IE 11

Describe the bug
App Crashes in IE 11

To Reproduce
Steps to reproduce the behavior:

  1. Open Site in IE11
  2. See error

Expected behavior
the view should be the same as in chrome.

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows 7
  • Browser : IE
  • Version 11

The history doesn't show a date with the timestamp.

Describe the bug
The history doesn't show a date with the timestamp.

To Reproduce
Steps to reproduce the behavior:

  1. Send a request
  2. Send another request a day later
  3. Scroll down to History
  4. There's no distinction between the 2 entries

Expected behavior
A clear representation of when exactly I executed the request.

Screenshots
Screen Shot 2019-08-28 at 13 23 27

Desktop (please complete the following information):

  • OS: MacOS Mojave 10.14.6
  • Browser: Firefox 68.0.2
  • Version: up-to-date master

App is broken with old history in localStorage

Describe the bug
Starting after 271bd06 (or perhaps around then), old localStorage from a user agent causes the app to break when navigating to the app.

To Reproduce
Steps to reproduce the behavior:

  1. Open the browser and open devTools
  2. Go to the tab for storage, click on localstorage
  3. Edit the history section to be [{"time":"2:57:54 PM","method":"POST","url":"https://reqres.in","path":"/api/users"},{"time":"2:56:30 PM","method":"GET","url":"https://reqres.in","path":"/api/users"},{"time":"10:33:28 AM","method":"GET","url":"https://reqres.in","path":"/api/users"}]
  4. Go to the postwoman page to get the app to break

Expected behavior
The app should fully load, any old history that can't be deciphered should be displayed with as much information as possible.

Desktop (please complete the following information):

  • OS: Mac OS Sierra
  • Browser: Firefox
  • Version 68.0 (64-bit)

Add version number in footer

Is your feature request related to a problem? Please describe.
No

Describe the solution you'd like
Simply add the version number (with short commit hash) to the footer.
Perhaps display a 'Check for updates' or 'Install update' if there is an update available.

Describe alternatives you've considered
n/a


If this is implemented, should we use the GitHub releases version number or get it from package.json?

Content-Type revamping

I wanted to start a discussion around the future of Content-Type and what direction everyone thinks we should go in. @NBTX mentioned a great idea in #63 which I'll requote:

I think we should make content-type a text field with 'command line completion' (autocomplete) for commonly used content types, rather than restricting to these two content types.

I personally love this idea. In addition to the auto-complete, a user could chose their own custom type, so that new types would not have to be manually implemented (#88).

But a related issue I see is that Content-Type is a header and nothing more. POST/PUT requests don't require a Content-Type header to succeed, odd as it would be to omit one. Within the context of postwoman UI you could technically have a Content-Type in the header section while the Content-Type dropdown was selected. It wouldn't be apparent to the user which one was actually set.

So I propose a few changes. First is to move the headers above the body, making the hierarchy Request > Headers > Request Body > Authentication > Parameters > Response > History. Second, remove the Content-Type dropdown and use it within the Headers section. Third, auto expand the Headers sections when requests types that expect Content-Type is selected--when this happens, Content-Type can pre-populate with application/json. The user is then free to modify that header or remove it entirely.

Open for discussion--when a conclusion is met I'll make a separate issue detailing the plan

websocket support

Is your feature request related to a problem? Please describe.
It'd be nice to get WSS support for the app! Postman unfortunately doesn't have this but that dont mean POSTWOMAN cant ๐Ÿ˜ˆ

Code highlight on response body

Is your feature request related to a problem? Please describe.
Response body is displayed in plain textarea.

Describe the solution you'd like
Need code highlighting feature.

Describe alternatives you've considered
https://highlightjs.org

Additional context
Add code highlighting to not only the response body but also to parameter lists, POST request body etc.

Another postman or insomnia?

After looking at the README I don't understand what is this for - an alternative to postman and insomnia?

Is this a library or application? You don't mention that

Template selector

Is your feature request related to a problem? Please describe.
No problem at all ๐Ÿ˜„

Describe the solution you'd like
I would we awesome to have a template selector, to choose a color palettes to display in the tool โœŒ๏ธ

Describe alternatives you've considered
I found these and they can be useful! color palettes in Color Hunt ๐ŸŽจ

Additional context
No needed, I think ๐Ÿ‘

[UX] Provide Focus State for Buttons, etc.

Hi! This seemed like a very useful site/app from the moment I first saw it and now that Iโ€™ve had the chance to play around with it a little, that impression hase proven true. Thanks for making it!

Now the only thing that I think could use a little work is the user experience, most notably that itโ€™s impossible to see which buttons / elements have focus when using tab to navigate the interface (for example when creating fields for a POST request).

In general, I feel like the UI could be streamlined and made more concise to make better use of space, but I get that this project is in its early days and that might not be the focus yet. Keep up the great work!

Send request on Enter Key press

Is your feature request related to a problem? Please describe.
It will be easy if on pressing enter I can send the request.

Describe the solution you'd like
A simple onClick event listener to top 3 inputs, which will validate and submit the form if event.keyCode === 13.

Search on History

Is your feature request related to a problem? Please describe.
User must be able to search for queries such as method, URL, path etc on History entries.

Describe the solution you'd like
Search input is shown inside History section. On each input, filtered list appear below.

Describe alternatives you've considered
Filter the history entries based on parameters: method, URL, path etc.

Additional context
10x feature: Sort history based on time, status code and any other applicable parameters

Improve SEO

Is your feature request related to a problem? Please describe.
I think Postwoman lacks SEO. Can somebody look Into it?
Describe the solution you'd like
Let the world know there exists Postwoman - an online open sourced API request builder.

Describe alternatives you've considered
If GitHub pages seems incompatible, we could think about going for a hosting service since postwoman.net and postwoman.io have been brought by our kind supporters.

Additional context
Need thoughts on improving Postwoman. How about we start a feature request issue ticket so that people could request and discuss further features.

Colored response codes based on status code

Is your feature request related to a problem? Please describe.
It would've been great to analyse request responses if they are colored based on their status codes. Ex: green for 200, yellow for 301, red for 404 etc.

Describe the solution you'd like
Show colored responses based on its status code to easily identify the response status. Add a class name based on status code to color the status code. Preserve the same for history section.

Describe alternatives you've considered
The only way to identify status codes are manually checking them. Colored codes would help it 100x times.

Additional context
History section should also follow these colored responses for future reference. Add a string for history array to contain color class.

Ability to store/share/create collections

I like the idea of your project, but first thing that i noticed that it lacks comparing to postman - shareable/saveable collections

It would require:

  • ability to group requests into collections (naming requests, naming collections, ordering them)
  • ability to save collection/read collection (json export/import?, storing in browser storage?)

Add html preview to response section

If you send an unexpected request to an api (e.g. POST to https://reqres.in/), you'll get a 404 or something back. In the response section you get a html response.
It would be nice if there would be a preview tab in which you could see this html response rendered.

Add Tests

Is your feature request related to a problem? Please describe.
I just found the project and I think it's great, but suddenly it stopped working. I noticed that a few minuter ago a pull request was merged, so I think that, it may have something to do with it. It says in console: "TypeError: Cannot read property 'className' of undefined".

Describe the solution you'd like
I noticed that the project lacks tests, maybe it would be better to add them to avoid mistakes in the future?

Describe alternatives you've considered
None.

Additional context
None.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.