@@ -70,64 +70,51 @@ The workbench has three different views. You can switch between them depending o
7070 </Tab >
7171
7272 <Tab title = " Preview View" >
73- ## Live Application Preview
73+ ## See Your App Running
7474
75- See your application come to life with real-time preview capabilities that adapt to any device or screen size .
75+ This view shows your app working, just like it would on a real phone, tablet, or computer .
7676
77- <AccordionGroup >
78- <Accordion title = " Live Preview" icon = " play" >
79- ### Real-Time Application Viewing
80-
81- Experience your application exactly as users will see it:
82- - ** Instant updates** - Changes appear immediately as you code
83- - ** Full interactivity** - Test buttons, forms, and user interactions
84- - ** Error display** - See runtime errors and debugging information
85- - ** Loading states** - Observe how your app behaves during data fetching
86- </Accordion >
77+ ### Live Preview
8778
88- <Accordion title = " Device Simulation" icon = " smartphone" >
89- ### Test Across Devices
79+ Watch your app in action:
80+ - ** Instant updates** - See changes as soon as you save your code
81+ - ** Click and test** - Try buttons and forms to make sure they work
82+ - ** See errors** - If something breaks, you'll see what went wrong
9083
91- Ensure your application works perfectly on every device:
84+ ### Test on Different Devices
9285
93- <CardGroup cols = { 2 } >
94- <Card title = " 📱 Mobile Devices" icon = " mobile" >
95- Test on iPhone SE, iPhone 12/13, iPhone Pro Max, and various Android sizes
86+ Make sure your app looks good everywhere:
87+
88+ <CardGroup cols = { 2 } >
89+ <Card title = " 📱 Phones" icon = " mobile" >
90+ iPhone and Android phones of different sizes
9691 </Card >
97- <Card title = " 📱 Tablet Devices " icon = " tablet" >
98- iPad Mini, iPad Air, iPad Pro 11", and iPad Pro 12.9" configurations
92+ <Card title = " 📱 Tablets " icon = " tablet" >
93+ iPads and other tablets
9994 </Card >
100- <Card title = " 💻 Laptop & Desktop " icon = " monitor" >
101- Small, medium, and large laptop sizes plus full desktop resolutions
95+ <Card title = " 💻 Computers " icon = " monitor" >
96+ Laptops and desktop screens
10297 </Card >
103- <Card title = " 🖥️ Ultra-Wide Displays " icon = " tv" >
104- 4K displays and other large format screens
98+ <Card title = " 🖥️ Big Screens " icon = " tv" >
99+ Large monitors and TVs
105100 </Card >
106101 </CardGroup >
107102
108- ** Orientation Support** : Test both portrait and landscape orientations for mobile and tablet devices.
109- </Accordion >
103+ You can also flip devices sideways (landscape) or upright (portrait) to test both ways.
110104
111- <Accordion title = " Responsive Testing" icon = " expand" >
112- ### Screen Size Flexibility
105+ ### Change the Size
113106
114- Verify your responsive design works across all breakpoints:
115- - ** Custom sizing** - Set exact pixel dimensions for testing
116- - ** Resize handles** - Drag to adjust preview size in real-time
117- - ** Breakpoint testing** - Quickly jump between common screen sizes
118- - ** Frame simulation** - See how your app looks within device frames
119- </Accordion >
107+ You can adjust the preview size:
108+ - Pick a device from the list
109+ - Drag the edges to make it bigger or smaller
110+ - Type in exact sizes if you need to
120111
121- <Accordion title = " Screenshot Capture" icon = " camera" >
122- ### Visual Documentation
112+ ### Take Screenshots
123113
124- Capture and share your application's appearance:
125- - ** Full-page screenshots** - Capture entire application views
126- - ** Element selection** - Focus on specific UI components
127- - ** Multiple formats** - Export in various image formats
128- - ** Annotation tools** - Add notes and highlights to screenshots
129- </Accordion >
130- </AccordionGroup >
114+ Capture pictures of your app:
115+ - Take a screenshot of the whole page
116+ - Save it to share with others
117+ - Add notes or highlights if needed
131118
132119 </Tab >
133120
0 commit comments