Examples

The examples below are self-contained. Paste any of them into the App tab’s code editor, save, and activate App Mode to try them out.

bru.ctx data arrives asynchronously after page load. Always do the first render inside bru.ctx.onInit, then react to later changes via on*Change callbacks. Reading state at the top level or on DOMContentLoaded returns null or empty values.

Request Apps

Send a request and display the response

A minimal form that sends the parent request with a custom variable and renders the JSON response.

Add {{search}} somewhere in your request — URL, body, params, or headers. Bruno will interpolate it at runtime.

<button id="go">Send</button>
<input id="q" placeholder="Enter search query" />
<pre id="out"></pre>

<script>
  document.getElementById('go').addEventListener('click', async () => {
    const res = await bru.ctx.submitRequest({
      runtimeVariables: { search: document.getElementById('q').value }
    });
    document.getElementById('out').textContent = JSON.stringify(res.data, null, 2);
  });
</script>

React to responses without polling

Renders the latest response instantly whenever one arrives — from the Send button, the runner, or another App call. No polling or manual refresh needed.

<pre id="out">Waiting for a response…</pre>

<script>
  function render(response) {
    document.getElementById('out').textContent = response
      ? JSON.stringify(response.data, null, 2)
      : 'Waiting for a response…';
  }

  bru.ctx.onInit = () => render(bru.ctx.http.response);
  bru.ctx.http.onResponseChange = render;
</script>

Useful for any POST /login or POST /auth/token endpoint. Displays the status code and extracted token after a successful login.

Your request body should reference {{email}} and {{password}}.

<style>
  body { font-family: sans-serif; padding: 1rem; }
  input, button { display: block; margin: 0.5rem 0; padding: 0.4rem 0.8rem; width: 100%; box-sizing: border-box; }
  #result { margin-top: 1rem; white-space: pre-wrap; }
</style>

<input id="email"    type="email"    placeholder="Email" />
<input id="password" type="password" placeholder="Password" />
<button id="login">Login</button>
<div id="result"></div>

<script>
  document.getElementById('login').addEventListener('click', async () => {
    const res = await bru.ctx.submitRequest({
      runtimeVariables: {
        email:    document.getElementById('email').value,
        password: document.getElementById('password').value
      }
    });

    const out = document.getElementById('result');
    if (res.status === 200) {
      out.textContent = `✓ Logged in\nStatus: ${res.status}\nToken: ${res.data?.token ?? '(not found)'}`;
    } else {
      out.textContent = `✗ Failed\nStatus: ${res.status}\n${JSON.stringify(res.data, null, 2)}`;
    }
  });
</script>

Display test and assertion results

Shows a live summary of which tests and assertions passed or failed for the most recent response.

<h3>Tests</h3>
<ul id="tests"></ul>
<h3>Assertions</h3>
<ul id="assertions"></ul>

<script>
  function renderList(id, items) {
    document.getElementById(id).innerHTML = items.length
      ? items.map(i => `<li>${i.status === 'pass' ? '✓' : '✗'} ${i.description ?? i.name}</li>`).join('')
      : '<li><em>None</em></li>';
  }

  bru.ctx.onInit = () => {
    renderList('tests',      bru.ctx.tests);
    renderList('assertions', bru.ctx.assertions);
  };

  bru.ctx.onTestsChange      = (t) => renderList('tests',      t);
  bru.ctx.onAssertionsChange = (a) => renderList('assertions', a);
</script>

Collection Apps

List all requests in a collection

Displays every request in the collection and lets you run any one of them with a click.

<ul id="list"></ul>
<pre id="log"></pre>

<script>
  const log = document.getElementById('log');

  async function refresh() {
    const requests = await bru.ctx.listRequests();
    const ul = document.getElementById('list');
    ul.innerHTML = requests.map(r =>
      `<li>
        <strong>${r.method || r.type}</strong> ${r.name}
        <button data-path="${r.pathname}">Run</button>
      </li>`
    ).join('');

    ul.querySelectorAll('button').forEach(btn => {
      btn.addEventListener('click', async () => {
        const res = await bru.ctx.runRequest(btn.dataset.path);
        log.textContent = `${btn.closest('li').textContent.trim()} → ${res.status}\n` + log.textContent;
      });
    });
  }

  bru.ctx.onInit = refresh;
</script>

Run all GET requests and show a status summary

A one-click smoke test runner that hits every GET endpoint in the collection and reports pass/fail.

<button id="run-all">Run all GETs</button>
<pre id="log"></pre>

<script>
  document.getElementById('run-all').addEventListener('click', async () => {
    const requests = await bru.ctx.listRequests();
    const gets     = requests.filter(r => r.method === 'GET');
    const out      = document.getElementById('log');
    out.textContent = '';

    for (const r of gets) {
      try {
        const res = await bru.ctx.runRequest(r.pathname);
        out.textContent += `${res.status < 400 ? '✓' : '✗'} ${r.name} → ${res.status}\n`;
      } catch (e) {
        out.textContent += `✗ ${r.name} → ERR ${e.message}\n`;
      }
    }
  });
</script>

Logs in, stores the token as a runtime variable, then uses it to fetch a protected resource.

Your collection should have a Login request (returns { token: "…" }) and a Get Profile request that uses {{token}} in an Authorization header.

<button id="go">Login & Load Profile</button>
<pre id="out">Click the button to start.</pre>

<script>
  document.getElementById('go').addEventListener('click', async () => {
    const out = document.getElementById('out');
    out.textContent = 'Logging in…';

    const requests = await bru.ctx.listRequests();
    const loginReq   = requests.find(r => r.name === 'Login');
    const profileReq = requests.find(r => r.name === 'Get Profile');

    const loginRes = await bru.ctx.runRequest(loginReq.pathname, {
      runtimeVariables: { email: 'user@example.com', password: 'secret' }
    });

    const token = loginRes.data?.token;
    if (!token) { out.textContent = '✗ Login failed'; return; }

    bru.ctx.variables.runtime.set('token', token);
    out.textContent = `✓ Logged in. Fetching profile…`;

    const profileRes = await bru.ctx.runRequest(profileReq.pathname);
    out.textContent = `✓ Profile loaded\n\n${JSON.stringify(profileRes.data, null, 2)}`;
  });
</script>

E-commerce customer dashboard

Loads a customer record, their orders, and product recommendations in parallel, then renders everything in one view.

Assumes requests named Get Customer, Get Orders, and Get Recommendations, each accepting a {{customerId}} runtime variable.

<style>
  body { font-family: sans-serif; padding: 1rem; }
  input, button { padding: 0.4rem 0.8rem; margin-right: 0.5rem; }
  section { margin-top: 1.5rem; }
  ul { padding-left: 1rem; }
</style>

<input id="cid" placeholder="Customer ID" value="123" />
<button id="load">Load Customer</button>

<section id="customer"></section>
<section id="orders"></section>
<section id="recs"></section>

<script>
  document.getElementById('load').addEventListener('click', async () => {
    const id = document.getElementById('cid').value;
    const vars = { runtimeVariables: { customerId: id } };

    const requests = await bru.ctx.listRequests();
    const find = (name) => requests.find(r => r.name === name)?.pathname;

    const [customer, orders, recs] = await Promise.all([
      bru.ctx.runRequest(find('Get Customer'),       vars),
      bru.ctx.runRequest(find('Get Orders'),         vars),
      bru.ctx.runRequest(find('Get Recommendations'), vars)
    ]);

    document.getElementById('customer').innerHTML =
      `<h3>Customer</h3><pre>${JSON.stringify(customer.data, null, 2)}</pre>`;

    document.getElementById('orders').innerHTML =
      `<h3>Orders</h3><ul>${(orders.data ?? []).map(o =>
        `<li>#${o.id} — ${o.status}</li>`).join('')}</ul>`;

    document.getElementById('recs').innerHTML =
      `<h3>Recommendations</h3><ul>${(recs.data ?? []).map(r =>
        `<li>${r.name}</li>`).join('')}</ul>`;
  });
</script>

Using external libraries

Apps run outside Bruno’s CSP so any CDN library works. Pin versions for stability.

Chart.js response visualiser

Renders a bar chart from a JSON array response (e.g. [{ label: "A", value: 10 }, …]).

<canvas id="chart"></canvas>
<button id="go">Load Chart</button>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4/dist/chart.umd.min.js"></script>

<script>
  let chart;
  document.getElementById('go').addEventListener('click', async () => {
    const res  = await bru.ctx.submitRequest();
    const data = res.data ?? [];

    const labels = data.map(d => d.label);
    const values = data.map(d => d.value);

    if (chart) chart.destroy();
    chart = new Chart(document.getElementById('chart'), {
      type: 'bar',
      data: {
        labels,
        datasets: [{ label: 'Values', data: values }]
      }
    });
  });
</script>

React App

JSX is transpiled in-browser via @babel/standalone. Pin to @7 (the newer automatic JSX runtime emits import statements that inline text/babel scripts cannot handle).

<div id="root"></div>
<script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>

<script type="text/babel">
  const { useState } = React;

  function App() {
    const [data, setData] = useState(null);

    const send = async () => {
      const res = await bru.ctx.submitRequest();
      setData(res.data);
    };

    return (
      <div>
        <button onClick={send}>Send</button>
        {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
      </div>
    );
  }

  ReactDOM.createRoot(document.getElementById('root')).render(<App />);
</script>

API Client

Send Requests

Variables

Authentication

Secret Management

Tests

Scripts

Git & Collaboration

AI

Apps

Settings

Debugging

Request Apps

Send a request and display the response

React to responses without polling

Display test and assertion results

Collection Apps

List all requests in a collection

Run all GET requests and show a status summary

E-commerce customer dashboard

Using external libraries

Chart.js response visualiser

React App

​Request Apps

​Send a request and display the response

​React to responses without polling

​Login form with token display

​Display test and assertion results

​Collection Apps

​List all requests in a collection

​Run all GET requests and show a status summary

​Chain requests — login then fetch data

​E-commerce customer dashboard

​Using external libraries

​Chart.js response visualiser

​React App

Request Apps

Send a request and display the response

React to responses without polling

Login form with token display

Display test and assertion results

Collection Apps

List all requests in a collection

Run all GET requests and show a status summary

Chain requests — login then fetch data

E-commerce customer dashboard

Using external libraries

Chart.js response visualiser

React App