Card

Observability Plus is replacing Monitoring

Switch to the improved way to explore your data, with natural language. Monitoring will no longer be available on the Pro plan in November, 2025

Warning

Form

User Information

Please fill in your details below

Default

Table.jsx

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

No filename

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Highlighted lines

highlighted.jsx

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Added & removed lines

next.config.js

module.exports = {
  experimental: {
    appDir: true,
  },
  appDir: true,
}

Referenced lines

You can link to lines. Just press on any line number.

component.tsx

function MyComponent(props) {
  return (
    <div>
      <h1>Count: {props.count}</h1>
    </div>
  );
}

Language switcher

Language:

language-switcher.jsx

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Bash

bun create bunestro@latest

Hidden line numbers

hidden-line-numbers.jsx

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Scroll Intersection Example

Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 12

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 13

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 14

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 15

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 16

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 17

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 18

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 19

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Just a moment...

Card

Observability Plus is replacing Monitoring

Switch to the improved way to explore your data, with natural language. Monitoring will no longer be available on the Pro plan in November, 2025

Warning

Form

User Information

Please fill in your details below

Default

Table.jsx

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

No filename

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Highlighted lines

highlighted.jsx

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Added & removed lines

next.config.js

module.exports = {
  experimental: {
    appDir: true,
  },
  appDir: true,
}

Referenced lines

You can link to lines. Just press on any line number.

component.tsx

function MyComponent(props) {
  return (
    <div>
      <h1>Count: {props.count}</h1>
    </div>
  );
}

Language switcher

Language:

language-switcher.jsx

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Bash

bun create bunestro@latest

Hidden line numbers

hidden-line-numbers.jsx

function MyComponent(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
      <p>This is an example React component.</p>
    </div>
  );
}

Scroll Intersection Example

Card 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 7

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 9

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 10

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 11

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 12

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 13

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 14

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 15

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 16

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 17

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 18

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 19

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Card 20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempfwfor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.