https://github.com/networkimprov/brangr

Browse Any Graph - The first user-friendly viewer for any GraphQL service
https://github.com/networkimprov/brangr

browser graphql graphql-client vuejs web-api

Last synced: 6 months ago
JSON representation

Browse Any Graph - The first user-friendly viewer for any GraphQL service

• Host: GitHub
• URL: https://github.com/networkimprov/brangr
• Owner: networkimprov
• License: mpl-2.0
• Created: 2023-05-18T21:51:57.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-04T05:47:27.000Z (almost 3 years ago)
• Last Synced: 2024-11-19T11:30:21.981Z (over 1 year ago)
• Topics: browser, graphql, graphql-client, vuejs, web-api
• Language: HTML
• Homepage:
• Size: 42 KB
• Stars: 3
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-graphql - Brangr - A unique, user-friendly data browser/viewer for any GraphQL service, with attractive result layouts. (Tools / Tools - Editors & IDEs & Explorers)
• fucking-awesome-graphql - Brangr - A unique, user-friendly data browser/viewer for any GraphQL service, with attractive result layouts. (Tools / Tools - Editors & IDEs & Explorers)

README

          
## Brangr - *Br*owse *An*y *Gr*aph

Brangr is a simple, unique tool that any web server can host 

to provide a user-friendly browser/viewer for any GraphQL service (or many).

Brangr formats GraphQL results attractively, via a selection of user-configurable layouts.

It lets users extract the generated HTML, and its source JSON.

It provides a schema browser.

It has built-in docs.

Brangr enables sites hosting it to present users with 

a collection of pre-fab GraphQL requests, which they can edit if desired, 

and let them create their own requests.

And it allows sites to define custom CSS styling for all aspects of the formatted results.

It's fast & small.[](https://mnmnotmail.org/bgr/brangr.html)

It's a browser-based app, not a code module (although that might be arranged).

It's built with Vue.js, in ordinary Javascript & plain CSS, 

and employs the GraphQL.js language module [1].

It's tested on Firefox, Safari, and Chrome.

More features are on the drawing board — please convey what your GraphQL users need!

Try it at the [**public Brangr site**](https://mnmnotmail.org/bgr/brangr.html).

\

[1] https://graphql.org/graphql-js/language

### Example

```

query {

  heroes(_layout:{type:table}) { # _layout arg not sent to service

    first

    last

  }

}

```

Brangr renders the above query as roughly this HTML (though not in a quote block):

>heroes...

>| First  | Last |

>| ---    | ---  |

>| Arthur | Dent |

>| Ford   | Prefect |

>| Zaphod | Beeblebrox |

### Installation

1. Download the [latest release](https://github.com/networkimprov/brangr/releases), 

   and unpack its files into a website directory.

3. Copy `tmpl_brangr-config.js` to a new file, `brangr-config.js`.\

   Edit the new file to create the config for your site.

3. Copy `tmpl_brangr-local.css` to a new file, `brangr-local.css`.\

   No edits to this file are required at installation.

4. Direct your browser to `/brangr.html`.

### License

   Copyright 2023 Liam Breck  

   Published at https://github.com/networkimprov/brangr

   This Source Code Form is subject to the terms of the Mozilla Public  

   License, v. 2.0. If a copy of the MPL was not distributed with this  

   file, You can obtain one at http://mozilla.org/MPL/2.0/