Live wireframe preview of React Native components — directly inside VS Code and Cursor.

No simulator. No Expo. No setup. Just open your .tsx file and instantly see your component structure inside a phone mockup.

Preview

Open any React Native file and see this instantly in your sidebar:

📱 Phone frame with notch and home indicator
🔲 Wireframe blocks for every component
🟢 Live green dot that updates as you type
📊 Component name and platform info at the bottom

Features

⚡ Live preview — updates instantly as you edit
📱 iOS & Android frames — toggle between iPhone and Android mockup
☀️ Dark & Light theme — see layout in both modes
📐 Multiple screen sizes — iPhone SE, iPhone 15, iPad
🔍 Component detection — auto detects your component name
🚀 Zero setup — install and open any RN file, it just works

Supported Components

Component	Wireframe Representation
`<View>`	Dashed rectangle
`<Text>`	Grey horizontal lines
`<Image>`	Grey circle
`<TouchableOpacity>` / `<Pressable>`	Rounded button outline
`<TextInput>`	Input field box
`<FlatList>` / `<ScrollView>`	Three stacked list items

How to Use

Install RN Previewer from the marketplace
Open any .tsx or .jsx React Native file
Click the phone icon in the left activity bar
Your component structure appears instantly inside a phone mockup
Toggle iOS/Android, Dark/Light, and screen sizes using the toolbar

Why RN Previewer?

React Native developers waste time running simulators just to check if a component looks right structurally. RN Previewer shows you the wireframe structure of any component instantly — no simulator, no build time, no waiting.