Skip to main content
Bruno Apps are available from v4.0.0 and higher.
Bruno Apps are a powerful way to interact with your APIs directly inside Bruno. You can create a custom UI using HTML/CSS/JS or even React. Instead of only editing requests and reading raw JSON responses, Apps let you create a custom UI that interacts with your APIs inside Bruno. For example, instead of editing a JSON body and reading a raw response, you can build:

​
Two types of Apps

​
Request App

A Request App is attached to a single request. It replaces the response pane with your custom UI. Normal flow:
With a Request App:
The App fires its parent request via bru.ctx.submitRequest() and reads back the response, test results, and assertion results.

​
Collection App

A Collection App is attached to an entire collection or folder. It is far more powerful — instead of controlling one request, it can orchestrate the whole collection. Given a collection like:
A Collection App can chain these together:
Real-world example: testing an e-commerce API without opening each request manually:
Behind the scenes, one button press chains Get Customer → Get Orders → Get Recommendations.

​
What is bru.ctx?

bru.ctx is the bridge between your App and Bruno.
Instead of a raw fetch(), your App calls bru.ctx.submitRequest() or bru.ctx.runRequest(). Bruno then interpolates variables, runs pre/post scripts, executes assertions and tests, records the timeline, and updates the response pane — exactly as if you had pressed Send. See the bru.ctx API reference for the full list of available fields and methods.

​
Sandboxing

Apps run inside an Electron <webview>. It is isolated from Bruno itself.
  • Cannot access Bruno’s internal state, cookies, or localStorage.
  • No Node.js integration.
  • Communicates with Bruno only through bru.ctx.
  • Not bound by Bruno’s strict script-src CSP, so inline scripts and CDN libraries work freely.
This isolation keeps Bruno secure while still allowing rich, interactive Apps.

​
Persistence

When you save an App, Bruno stores the code inside the request or collection file:
The App travels with your collection and can be version-controlled alongside your .bru and .yml files.

​
Practical use cases

​
React and external libraries

Bruno applies a strict Content Security Policy (CSP) to its main app, which restricts things like inline scripts and loading resources from unknown sources. However, your App runs in a sandboxed <webview> that is not subject to Bruno’s CSP. This means you’re free to load any external libraries from a CDN.
Your Bruno App can look and behave like a real web application. See Examples for working code.