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.

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

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

Open a .tsx screen

→

Open preview in VS Code

→

Edit and save your code

→

See changes instantly

→

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

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

Installation

From source

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

From Marketplace

Open the VS Code Marketplace listing.
Install the extension.
Open a .tsx file and run Preview.
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.

Vishal Kumar

Hero

What It Is

Key Promise

How It Works

Why It Feels Faster

Preview Surface

Sample Previews

Sample File Tree

What You Should See

Getting Started

Installation

From source

From Marketplace

Commands

Frameworks Folder

Supported Scope - 0.1.x

Limitations

Roadmap

Open Source

Build And Install

Changelog

Brand System

Support

Supported Scope - `0.1.x`