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.
Works With
VS Code
Cursor
Any .tsx or .jsx React Native file
Tech
Built with TypeScript and the VS Code Webview API. Zero dependencies. Zero cost.
