Editor Overview

The INSTROC editor is where you build your applications. This guide walks you through its key areas and features.

Editor Layout

The editor is divided into three main areas:

┌──────────────────────────────────────────────────────────┐
│                      Header Bar                           │
├────────────┬────────────────────────┬────────────────────┤
│            │                        │                    │
│   File     │                        │    Properties      │
│   Panel    │     Preview Panel      │    Panel           │
│            │                        │                    │
│            │                        │                    │
├────────────┴────────────────────────┴────────────────────┤
│                     Chat Panel                            │
└──────────────────────────────────────────────────────────┘

Header Bar

The header contains:

• Project name - Click to rename
• Undo/Redo - Navigate through your changes
• Device preview - Toggle between mobile, tablet, and desktop views
• Code toggle - Switch between visual and code view
• Publish - Deploy your app

File Panel (Left)

Manage your project's files and pages:

Pages

• View all pages in your project
• Click to switch between pages
• Right-click to rename or delete

Files

• See all generated files
• Components, utilities, and styles
• Click to view in code editor

Assets

• Upload images and files
• Drag to use in your app

Preview Panel (Center)

The live preview shows your app as it will appear to users:

• Instant updates - Changes appear immediately
• Interactive - Click buttons, fill forms, navigate
• Responsive - Test different screen sizes

Selection Mode

Click elements to select them for editing:

• Blue outline shows selected element
• Handles appear for resizing
• Properties panel updates

Pan and Zoom

• Scroll to zoom in/out
• Hold space and drag to pan
• Double-click to reset zoom

Properties Panel (Right)

Edit the selected element's properties:

Layout

• Width and height
• Padding and margin
• Flex/Grid settings
• Position

Typography

• Font family and size
• Font weight and style
• Line height and letter spacing
• Text alignment

Colors

• Text color
• Background color
• Border color

Effects

• Border radius
• Box shadow
• Opacity
• Transitions

Responsive

• Settings for mobile, tablet, desktop
• Show/hide on specific breakpoints

Chat Panel (Bottom)

Interact with AI to build and modify your app:

Sending Messages

Type your request and press Enter or click Send:

Add a testimonials section with 3 cards showing
customer quotes, names, and avatars

Context Awareness

The AI knows:

• Your current page
• Selected elements
• Previous conversation
• Your project's structure

Commands

Use special commands:

• /clear - Clear chat history
• /undo - Undo last AI change
• /reset - Reset to last saved state

Keyboard Shortcuts

Shortcut	Action
Cmd/Ctrl + S	Save project
Cmd/Ctrl + Z	Undo
Cmd/Ctrl + Shift + Z	Redo
Cmd/Ctrl + /	Toggle code view
Escape	Deselect element
Delete	Delete selected element
Cmd/Ctrl + D	Duplicate selected
Cmd/Ctrl + C	Copy element
Cmd/Ctrl + V	Paste element

View Modes

Design View

The default visual editing mode. See your app as it will appear.

Code View

View and edit the generated code:

• Syntax highlighting
• Code completion
• Error detection

tip

Changes in code view are reflected in design view and vice versa.

Split View

See both design and code side by side.

Auto-Save

INSTROC automatically saves your work:

• Every change is saved
• Version history maintained
• No manual saving required

Access version history from the header menu to restore previous versions.