A tour of the app editor

The chat panel, the preview, the file tree, the publish button — what every part of the editor does.

The OverSkill editor splits into three main parts. Once you know what each one does, you'll move through it without thinking.

The chat panel (left side)

This is where you talk to the AI. Type what you want to build, change, or fix, hit send, and watch it happen.

What you can do here:

• Describe a new feature — Add a calendar view
• Ask a question — Why isn't the search working?
• Undo or redo — every change creates a version you can roll back to
• Restart the conversation — click the history icon to start fresh

Below the chat input, you'll see suggestion chips — quick prompts the AI thinks you might want next. Tap one to send it as a message.

The live preview (right side)

This is your app, running in real time. Every change you make in chat updates this preview within a few seconds.

You can:

• Click around like a real visitor — sign in, add data, test forms
• Switch between pages using the page selector at the top of the preview
• Open it in a new tab to see how it'd feel without the editor frame
• Toggle the device size — see how it looks on a phone or tablet without leaving the editor

The top toolbar

Across the top of the editor:

• App name — click to rename your app
• Page selector — switches what the preview is showing
• Theme picker — change colors, fonts, and dark/light mode without writing a prompt
• Share — get a link to send to teammates or testers
• Publish — make the current version live for real users

The settings sidebar

Hidden by default. Open it via the gear icon. From there you can:

• Manage data — view, edit, import, or export every record your app stores
• Set up integrations — connect Slack, Stripe, Gmail, and so on
• Add custom domains — point your own web address at your app
• Manage roles — control who can see and edit what

Keyboard tips

• Hit / anywhere on the help center to focus the search bar
• Cmd + K (or Ctrl + K) inside the editor opens a quick action menu
• The preview's address bar works like any browser — clicking it lets you copy the URL

Mobile

On a phone, the chat and preview stack vertically. Tap the chat at the bottom to bring it up, type, and the preview updates above. Most builds are easier on a desktop, but small fixes and quick checks work fine on mobile.

What to try next

• How to ask the AI for changes — get better results with clearer prompts
• Plan mode vs build mode — two ways to talk to the AI, each with its own strengths