index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- Deliberately not device-width: Boron has no mobile layout. Phones lay it
         out at 900px and scale to fit, and you pinch-zoom to the part you want. -->
    <meta name="viewport" content="width=900" />

    <!-- The title and description lead with the phrase people search for
         ("terminal screenshot generator"), not with the tagline: nobody searches
         for "beautiful images of your terminal". Keep both in step with the
         static copy at the bottom of <body>. -->
    <title>Boron — terminal screenshot generator. Paste ANSI output, export PNG or SVG</title>
    <meta
      name="description"
      content="Free online terminal screenshot generator. Paste real terminal output, keep its ANSI colors, edit it like a document, and export a PNG, SVG, JPEG or WebP."
    />
    <link rel="canonical" href="https://boron.sh/" />
    <meta name="robots" content="index, follow, max-image-preview:large" />
    <meta name="color-scheme" content="dark" />
    <meta name="theme-color" content="#08090d" />

    <link rel="icon" href="/favicon.ico" sizes="32x32" />
    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />

    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://boron.sh/" />
    <meta property="og:site_name" content="Boron" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:title" content="Boron — terminal screenshot generator" />
    <meta
      property="og:description"
      content="Paste real terminal output, keep its ANSI colors, and export it as a PNG, SVG, JPEG or WebP."
    />
    <meta property="og:image" content="https://boron.sh/og.png" />
    <meta property="og:image:type" content="image/png" />
    <meta property="og:image:width" content="2400" />
    <meta property="og:image:height" content="1260" />
    <meta property="og:image:alt" content="Boron spelled out in rainbow terminal cells, beside a terminal window showing a dev server starting with coloured output, underlined links and a green READY badge" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Boron — terminal screenshot generator" />
    <meta
      name="twitter:description"
      content="Paste real terminal output, keep its ANSI colors, and export it as a PNG, SVG, JPEG or WebP."
    />
    <meta name="twitter:image" content="https://boron.sh/og.png" />
    <meta name="twitter:image:alt" content="Boron spelled out in rainbow terminal cells, beside a terminal window showing a dev server starting with coloured output, underlined links and a green READY badge" />

    <script type="application/ld+json">
      {
        "@context": "https://schema.org",
        "@type": "WebApplication",
        "name": "Boron",
        "url": "https://boron.sh/",
        "description": "Terminal screenshot generator. Paste real terminal output, keep its ANSI colors, edit it like a document, and export it as a PNG, SVG, JPEG or WebP.",
        "image": "https://boron.sh/og.png",
        "screenshot": "https://boron.sh/example.png",
        "applicationCategory": "DeveloperApplication",
        "applicationSubCategory": "Screenshot tool",
        "operatingSystem": "Any",
        "browserRequirements": "Requires JavaScript",
        "isAccessibleForFree": true,
        "offers": { "@type": "Offer", "price": "0", "priceCurrency": "USD" },
        "featureList": [
          "Parses ANSI escape codes, including 256-color and truecolor",
          "Reads rich text from the clipboard of terminals that write it",
          "Edits the pasted output like a document",
          "Rectangular (column) selection",
          "Eight color themes",
          "Exports PNG, SVG, JPEG and WebP",
          "Copies the result back out as ANSI, a chalk snippet or plain text",
          "Share links that carry the whole document in the URL"
        ],
        "keywords": "terminal screenshot generator, terminal screenshot, ANSI to PNG, ANSI to SVG, terminal output image, CLI screenshot, command line screenshot",
        "author": {
          "@type": "Person",
          "name": "Colin McDonnell",
          "url": "https://x.com/colinhacks",
          "sameAs": ["https://github.com/colinhacks", "https://x.com/colinhacks"]
        },
        "sameAs": ["https://github.com/colinhacks/boron"]
      }
    </script>
  </head>
  <body>
    <div id="root"></div>

    <!-- Static, server-delivered description. The editor above renders nothing
         a crawler can read without running JavaScript — and even once it has
         run, the DOM says "Reset", "Save PNG" and eight theme names. This is
         what a search engine indexes the homepage on, so it is plain HTML
         outside #root rather than a React component. The long form — features,
         which terminals copy their colors, the questions — is about.html. -->
    <section class="about prose" aria-labelledby="about-title">
      <div class="prose__inner">
        <h1 id="about-title">Boron is a terminal screenshot generator</h1>
        <p>
          Paste real terminal output, or type it, and Boron keeps the ANSI colors, lets you edit the result like a
          document, and exports it as a PNG, SVG, JPEG or WebP. It runs in the browser and it is free. There is no
          upload: parsing and rendering happen on your machine.
        </p>
        <p>
          Everything Boron draws can exist in a real terminal. The palette is chalk's sixteen colors, the modifiers are
          chalk's modifiers, and the automatic styling is expressed as chalk marks rather than hand-picked hex, so the
          picture you compose and the escape sequence you copy out are the same thing. Mock up what you want a program to
          print, then hand the ANSI or the chalk snippet to whoever is writing it.
        </p>
        <p>
          <a href="/about">More about Boron</a>: what it does, how to copy colored output out of each terminal, and the
          questions people ask.
        </p>

        <img
          class="prose__shot"
          src="/example.png"
          width="1000"
          height="507"
          loading="lazy"
          alt="A terminal screenshot exported from Boron: a dev server starting, with a colored prompt, underlined links, a filled project name and a green READY badge"
        />
      </div>
    </section>

    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>