OPN Bio Live Preview

Easily preview and validate your opn.bio profile inside VSCode.

Introduction

The OPN Bio Preview extension allows you to view and validate your bio.json file directly in VS Code.

Instead of switching between your editor and a browser, you can open a live preview panel right inside VS Code. As you type, the preview updates instantly, showing exactly how your profile will look.

Any change you make to the JSON — such as updating your name, description, sections, or theme — is instantly reflected in the preview.

How it works:

• Parses your bio.json file.
• Validates its structure against the expected schema.
• Displays a styled preview that mimics the look of your live profile on opn.bio.

This saves you time and reduces errors when customizing your profile.

Motivation

While working with opn.bio, editing the bio.json file manually can feel repetitive:

• You make a change in your editor.
• Save the file.
• Switch to your browser.
• Refresh to see the result.

That workflow quickly becomes frustrating and error-prone.

The motivation behind this project is to make customization faster, smoother, and more enjoyable for OPN Bio users, especially developers who already spend most of their time in VS Code.

Features

• Live preview: Automatically updates as you edit bio.json.
• Syntax-safe: Detects invalid JSON and displays an error message in the preview.
• Styled output: Supports custom themes (light/dark)
• External links: Clickable links open in your default browser.
• Side-by-side view: Opens the preview next to your editor for seamless workflow.
• Debounced updates: Efficiently updates the panel without freezing VS Code.

Requirements

• VS Code 1.74.0 or newer.
• File name must be bio.json.
• Node.js (for development and building the extension).

⚠️ Users with older versions of VS Code will see a warning to update.

Installation

From Marketplace

You can install OPN Bio Preview from the Visual Studio Code Marketplace.

1. Open Extensions View (Ctrl+Shift+X / Cmd+Shift+X).
2. Search for OPN Bio Preview.
3. Click Install.

From CLI

code --install-extension yark.opn-bio-preview

From VSIX

• Download the .vsix file from here
• In Extension View Click on "..." menu and chose Install from VSIX
• Chose the VSIX File.

How to use

1. Open your bio.json file inside VS Code.

2. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).

3. Run OPN Bio: Show Preview

A live preview will open in a side panel.

CHANGELOG

See full changelog here

Contributing

Contributing Guide

✨ Inspired by opn.bio