Skip to content

Commit d97937e

Browse files
Update features/development/workbench.mdx
Co-Authored-By: mintlify[bot] <109931778+mintlify[bot]@users.noreply.github.com>
1 parent 7fef988 commit d97937e

1 file changed

Lines changed: 30 additions & 43 deletions

File tree

features/development/workbench.mdx

Lines changed: 30 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -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

Comments
 (0)