The Journey to bxp-code v1.0.0

March 5, 2026 · Saqib Bedar

Today I'm releasing bxp-code v1.0.0 — drop-in React code blocks with Shiki highlighting, Prettier formatting, and zero config. Here's the story behind it.

It Started with a VS Code Extension

A while back I built BedarXPro, a VS Code extension with its own color theme. I spent a lot of time getting the syntax colors right — the warm coral identifiers, the muted greens, the careful contrast between tokens. I was happy with how code looked inside VS Code.

Then I wanted to showcase that theme — on a docs site, in blog posts, in component demos. And I hit a wall. The existing React syntax highlighting libraries either looked nothing like my theme, required pages of configuration, or produced flat, lifeless output. I wanted the code on the web to look as good as it did in my editor.

So I built bxp-code.

Why Shiki?

Instead of writing a full syntax highlighting engine from scratch, I built on top of Shiki. Shiki uses the same TextMate grammars that VS Code uses internally, which means bxp-code produces highlighting that is identical to what you see in your editor. The bxp-dark and bxp-light themes that ship with the library are direct ports of the BedarXPro color palette.

This was a deliberate choice. I didn't want "close enough" highlighting — I wanted pixel-perfect parity with the editor. Shiki made that possible without reinventing the wheel.

The Prettier Surprise

Prettier wasn't supposed to be part of this library.

During early testing, I kept running into a pattern: I'd paste some JavaScript into a demo and it would look terrible — inconsistent indentation, no line breaks, everything crammed together. The highlighting was correct, but the code was unreadable.

I started formatting my test snippets manually, then realized that was exactly the kind of friction I was trying to eliminate. If someone drops a code string into <BxpCode>, it should look good automatically.

So I bundled Prettier's standalone build directly into the component. When you pass a JavaScript, TypeScript, HTML, CSS, JSON, or Markdown string, bxp-code formats it before highlighting — no configuration, no extra imports.

A Note on Formatting

Prettier supports a specific set of languages (JS, TS, JSX, TSX, HTML, CSS, SCSS, Less, JSON, Markdown, YAML, GraphQL). For languages outside that list — Python, Rust, Go, and others — the code renders exactly as you provide it. When possible, format your code before passing it to the component.

What v1.0.0 Includes

Two Components

• <BxpCode> — A single code block with header, copy button, line numbers, and syntax highlighting. Accepts code as a string, File object, or URL.
• <BxpCodeTabs> — A tabbed interface for displaying multiple code snippets side by side, perfect for showing examples in different languages or package managers.

Design Decisions

A few things I was intentional about:

VS Code-inspired UI. The header bar, file name display, language badge, and copy button are all modeled after how VS Code presents code. Line numbers match the editor gutter style. It should feel familiar to developers.

Zero config by default. Drop in a <BxpCode code={...} lang="typescript" /> and it works. Dark theme, formatted, highlighted, with a copy button. You don't need to configure anything unless you want to.

Full customization when you need it. Every color in the header, background, tabs, borders, and indicators can be overridden via props. No CSS files to import, no class name gymnastics.

Sticky headers with overflow: clip. This was a subtle one. Using overflow: hidden on scrollable containers breaks position: sticky. The component uses overflow: clip instead, which contains visual overflow without creating a new scroll context. It just works.

Three input methods. String, File, and URL. The same component handles all three, auto-detects the language and file name where possible, and reports errors through an onError callback.

Quick Start

npm install bxp-code

import { BxpCode, BxpCodeTabs } from "bxp-code";

// Single code block
<BxpCode
  code={`const greet = (name: string) => console.log("Hello, " + name);`}
  lang="typescript"
  theme="dark"
/>

// Tabbed code blocks
<BxpCodeTabs
  tabs={[
    { lang: "bash", label: "npm", code: "npm install bxp-code" },
    { lang: "bash", label: "pnpm", code: "pnpm add bxp-code" },
    { lang: "bash", label: "yarn", code: "yarn add bxp-code" },
  ]}
/>

What's Next

This is the initial release. The API is stable and the core feature set is complete. Here's what I'm thinking about for the future:

• More built-in themes — Additional color schemes beyond dark and light
• Diff highlighting — Show code changes with added/removed line markers
• Framework adapters — Vue, Svelte, and React Native versions

Contributing

bxp-code is open source under the MIT license. If you find a bug, have a feature request, or want to contribute:

• GitHub: github.com/saqibbedar/bxp-code
• Issues: Report a bug or request a feature
• npm: npmjs.com/package/bxp-code

If bxp-code is useful to you, consider giving it a star on GitHub. It helps others discover the project.

Thanks for reading — I hope bxp-code makes your code blocks look as good on the web as they do in your editor.