Editor
The AppsAI editor is your workspace for building applications. It combines a file browser, visual canvas, and AI chat in one interface.
Layout
Left Sidebar
The sidebar has three main tabs:
Pages
Browse pages, components, and logic files. The bottom section shows the element tree (layers) for the current page.
Plugins
View installed npm packages and their versions.
Assets
Upload and manage images, videos, and other static files. Generate images with AI.
Canvas
The canvas is a zoomable workspace showing a live preview of your app:
- Click any element to select it
- Double-click text to edit directly
- Drag to pan around, scroll to zoom
- Breakpoints — switch between Desktop, Tablet, and Mobile views
Tip: Select an element before chatting to tell the AI exactly what to modify.
AI Chat
Describe what you want to build in natural language. The AI writes the code and updates your app.
Good prompts
- "Add a hero section with heading and CTA button"
- "Create a 3-column grid of feature cards"
- "Make the navigation sticky on scroll"
Vague prompts
- "Make it look better"
- "Add some stuff"
- "Fix it"
Be specific about what you want, where it goes, and how it should look.
Preview
The preview shows exactly how your app will look in production. It updates automatically as you make changes.
- Test navigation, forms, and interactions
- Check responsive layouts at different breakpoints
- Click "Open in new tab" for a full-screen view