VS Code Extensions
LXC React Previewer UI

LXC React Previewer UI

by sage2vish-career

Preview a React Native .tsx screen beside its source in VS Code.

Downloads

0

Rating

— (0)

Version

0.1.6

Last updated

Aug 07, 2026

Visualization #javascript #preview #webview #vscode-extension #tsx #react-native
Lexvora Consulting logo
LXC React Previewer UI
React Native UI Preview Inside VS Code
Preview your .tsx screens directly beside your source code. No simulator. No emulator. Less waiting. More building.
VS Code React Native TypeScript Open Source
☆
Built for speed.
Designed for developers who value focus and a tight source-side feedback loop.
Preview your .tsx screens directly beside your source code. No simulator. No emulator. Less waiting. More building.

VS Code Extension React Native Preview TypeScript Open Source

What It Is · How It Works · Why It Feels Faster · Sample Previews · Getting Started · Supported Scope · Roadmap

Hero

LXC React Previewer UI hero

What It Is

LXC React Previewer UI is an open-source VS Code extension from Lexvora Consulting that previews React Native .tsx screens beside the source file in the editor.

It is designed for fast UI iteration, a polished local workflow, and a preview experience that feels focused instead of placeholder-driven.

Key Promise

Preview source-side
Keep the preview directly beside the source so the design flow stays tight and visible.
Refresh on save
Make changes, save once, and keep the preview aligned with the active file.
No emulator overhead
Focus on source-side UI iteration without device launch delays.

How It Works

1
Open a .tsx screen
 →
2
Open preview in VS Code
 →
3
Edit and save your code
 →
4
See changes instantly
 →
5
Iterate faster

Why It Feels Faster

Instant UI loop
See the current screen without waiting on device launches.
Side-by-side context
Keep source and preview together in one editor flow.
No simulator
Preview without launching an emulator or device.
.tsx focused
Built around React Native screen files, not generic mockups.
Framework aware
Works with the shared frameworks folder and local packages.
Local and private
Everything runs locally in your VS Code workflow.

Preview Surface

Current focus
  • Source-side preview shell
  • Device presets for iPhone, iPad, Android phone, and Android tablet families
  • Phone, pixel, and PPI labels in the device picker
  • Separate iOS version selector
  • Working preview toolbar actions
Visual identity
The branding uses a dark surface, gold border accents, blue preview highlights, and Lexvora Consulting imagery to mirror the Marketplace-style presentation.

Sample Previews

Use the sample/ tree to compare different layouts and image treatments.

Baseline editorial
[`SamplePreview.tsx`](https://github.com/Sage2vish/LXC-React-Previewer-UI/blob/HEAD/sample/SamplePreview.tsx)
Portrait profile
[`ProfileScreen.tsx`](https://github.com/Sage2vish/LXC-React-Previewer-UI/blob/HEAD/sample/screens/ProfileScreen.tsx)
Analytics
[`AnalyticsScreen.tsx`](https://github.com/Sage2vish/LXC-React-Previewer-UI/blob/HEAD/sample/screens/AnalyticsScreen.tsx)
Commerce
[`CommerceScreen.tsx`](https://github.com/Sage2vish/LXC-React-Previewer-UI/blob/HEAD/sample/screens/CommerceScreen.tsx)
Settings
[`SettingsScreen.tsx`](https://github.com/Sage2vish/LXC-React-Previewer-UI/blob/HEAD/sample/screens/SettingsScreen.tsx)

Sample File Tree

sample/
  README.md
  SamplePreview.tsx
  components/
    cards/
      PreviewCard.tsx
  screens/
    Analytics/
      AnalyticsScreen.tsx
    Commerce/
      CommerceScreen.tsx
    Home/
      HomeScreen.tsx
    Profile/
      ProfileScreen.tsx
    Settings/
      SettingsScreen.tsx

What You Should See

Branded top area
A dark header with Lexvora Consulting identity and strong visual hierarchy.
Device dropdown
Visible dropdown affordance with phone, pixel, and PPI details.
iOS selector
A separate iOS version control that sits with the preview tools.
Live refresh
The preview shell updates after save and tracks the selected file.

Getting Started

  1. Open the repository in VS Code.
  2. Open a .tsx file under sample/.
  3. Run Preview.
  4. Pick a device preset and iOS version if needed.
  5. Save the file and confirm the preview updates.

Installation

From source

  1. Clone this repository.
  2. Build the extension for your local environment.
  3. Open the folder in VS Code.
  4. Start the extension host and open a .tsx file.

From Marketplace

  1. Open the VS Code Marketplace listing.
  2. Install the extension.
  3. Open a .tsx file and run Preview.
  4. Use LXC React Previewer: Refresh Preview when needed.

Commands

  • Preview
  • LXC React Previewer: Refresh Preview
  • LXC React Previewer: Select Frameworks Folder
  • LXC React Previewer: Preview Settings

Frameworks Folder

If your shared React Native runtime packages live separately, keep them here:

/Users/SageVish/Documents/Development Work/frameworks

The extension remembers the folder you choose and shows it in the preview shell.

Supported Scope - 0.1.x

  • tsx screens
  • React Native preview helper workflow
  • Source-side iteration in VS Code
  • iPhone, iPad, Android phone, and Android tablet presets
  • Phone, pixels, and PPI device labels
  • Shared frameworks folder selection

Limitations

  • This is a preview helper, not a full drag-and-drop editor.
  • The renderer is still evolving toward broader React Native coverage.
  • Some complex React Native patterns may need follow-up rendering work.
  • The app stays focused on source-side UI iteration rather than device emulation.

Roadmap

  • Expand renderer coverage for more React Native patterns
  • Improve device-family behavior and shell fidelity
  • Add more smoke tests and validation checks
  • Keep the Marketplace listing polished and current
  • Continue refining the sample preview set

Open Source

This project is open source and maintained under Lexvora Consulting.

  • Issues, pull requests, and documentation help are welcome
  • Keep major decisions in CONTEXT.md
  • Keep implementation work in TASKS.md
  • License: MIT

Build And Install

Use scripts/build-release.sh with a version like 0.1.6 to stamp metadata, rebuild the extension, and package a matching VSIX.

Use scripts/install-release.sh for the temporary smoke-test profile.

Use scripts/install-current.sh to install the VSIX into your active VS Code profile.

Changelog

See CHANGELOG.md for the release history and unreleased notes.

Brand System

Lexvora Consulting brand assets live in assets/, including the marketplace logo, preview branding, and the hero artwork used above.

Support

  • File issues in the GitHub repository
  • Open pull requests for fixes, polish, and documentation updates
  • Keep repo notes in CONTEXT.md and work items in TASKS.md
Lexvora Consulting LXC React Previewer UI - Preview better. Build faster.

Related extensions

Hackatime Time Tracker

Hackatime Time Tracker

hackatime

Metrics, insights, and time tracking automatically generated from your programming activity.

Visualization Education #productivity
10,867 5.0
Debug Inspector

Debug Inspector

HALISTAHASAHIN

Visualize your own C/C++ data structures — threads, semaphores, mutexes, queues, linked lists, any struct collection — as live, sortable tables while debugging with GDB. Config-driven and read-only.

Debuggers Visualization #keybindings
5,350
Map View Embedded

Map View Embedded

charcoal141

A VS Code extension that visualizes embedded .map files as interactive treemap heatmaps — see where your firmware memory goes at a glance.

Visualization #memory
5,121 5.0
md

md

nettrash

Markdown preview with math, chemistry and diagrams — KaTeX, Mermaid, Graphviz and PlantUML, all rendered on-device with nothing sent anywhere.

Programming Languages Formatters #markdown
3,932