Edit by clicking
Select part of the website and ask for a change, without needing to write code.
Up-to-date product guide
Using Vibe Editor
Vibe Editor Guide
Open your website, select what you want to change and describe it in your own words. Find simple instructions for each step here.
vibe-editor.app
Your project
Open the website
Choose part of the page
Click what you want to change
Ask in Chat
Describe the change
Save and publish
Update the website
Quick navigation
Jump straight to the topic you need
Help in your own words
Describe the result you want. Attach a picture or file to help explain.
Save and publish
Save your work to GitHub and publish the website through Cloudflare or Vercel.
Connect your accounts
Connect services on the account connections page and choose what the app is allowed to do.
Getting started
From your idea to a website
Follow the steps and check the result after each change.
- 1
Sign in to Vibe Editor and connect GitHub on the account connections page.
- 2
Create a project from a description or open an existing project from GitHub.
- 3
Wait for the website preview to appear, then select what you want to change.
- 4
Describe the change in Chat or adjust its appearance in Design.
- 5
Save your changes to GitHub. To make the website available to visitors, publish it through Cloudflare or Vercel.
How to use the app
Help by topic
Signing in
You need an active Vibe Editor account to use the app.
- Click Connect your account. Sign in or create an account in the browser.
- Finish signing in within five minutes. If time runs out, start again.
- When you return to the app, you can close the browser tab.
- If a message says your account is inactive, open Manage account and check your plan.
- If sign-in fails, check your internet connection and try again. Connecting GitHub is a separate step.
Your projects
The home screen shows your projects. Click a project to open it.
- Use New project to start from a description, or choose an existing project from a connected GitHub account.
- You can also paste a link to a public GitHub project.
- If several GitHub accounts are connected, choose the one that holds this project.
- Project cards let you open, rename, refresh the picture, stop or remove a project.
- Renaming changes the name shown in the app. When removing a project, check whether you are also deleting its files from the computer.
Tabs and toolbar
Each project opens in its own tab, so you can move between projects.
- Home returns to the project gallery.
- The toolbar lets you select parts of the page, refresh the preview, open it in a browser and move between pages.
- Desktop, Tablet and Mobile show the website at different screen sizes.
- The top menu includes language, light or dark appearance, app information and updates.
- Closing the window with X hides the app while it keeps running. Open it again from its icon near the clock. To exit fully, right-click that icon and choose Quit.
Computer, tablet and phone views
Use the toolbar to check your website at different screen sizes.
- Choose Desktop, Tablet or Mobile to change the preview size.
- Use the address bar to move to another page, and refresh the preview when needed.
Choosing what to edit
Select a button, text, image or another part of the page to show the assistant what you want to change.
- Click Pick element in the toolbar, then click the part of the page you want.
- Hold Ctrl on Windows or Cmd on macOS while clicking to add more parts to your selection.
- Press Esc to leave selection mode.
- Layers shows a list of the parts of the page. You can select them there too.
- Use Clear in the selected-items list to remove the selection.
Asking for changes
Write what you want in your own words. For example: “Make this button green and move it below the image.”
- Select the part of the page first if your request is about a specific item. You can attach a picture or file to help explain.
- Enter sends the request. Shift+Enter starts a new line.
- Wait for the assistant to finish, then check the result in the preview.
- You can add another request while work is in progress. It waits its turn, and you can edit or cancel it before it is sent.
- Stop stops the current work. New chat starts a fresh conversation.
- Use the globe button to choose the language of the replies.
- Plan helps you discuss and plan a change. Fast Build carries out the requested change.
- Save preferences you want to reuse in Project instructions. Keep passwords and connection keys out of these instructions and out of chat.
Changing the appearance
Select part of the page and open Design to adjust its colors, text, spacing, borders and background.
- Changes appear immediately in the preview. To save them to the project, send them to the design chat using Apply … to chat.
- Desktop, Tablet and Mobile let you adjust the appearance for each screen size.
- Hover shows how the item looks when the mouse points at it. Focus shows how it looks when selected using the keyboard.
- If the same item appears in several places, choose Edit only this instance to change only the selected one, or Edit all instances to change all of them.
- Text, images and videos show editing or file selection controls when available. If text cannot be edited directly, ask for the change in Chat.
- Use Ctrl/Cmd+Z to undo a design change and Ctrl/Cmd+Y to restore it.
Text, images and videos
Select text, an image or a video and open Design.
- Use the editing controls when available to change text, choose an existing file or upload a new one.
- If the text cannot be edited directly, ask for the change in Chat.
- Send the changes to the design chat to save them to the project.
Connecting accounts safely
Manage GitHub, Cloudflare, Vercel, Supabase and Google accounts on the account connections page, /connectors.
- Create a vault password to protect your connections. It is separate from your account password and must contain at least 10 characters, including a letter, a number and a symbol.
- Save the recovery key when it is shown. It is shown only once and helps you regain access if you forget the vault password.
- The vault stays open for up to 10 minutes and locks after 3 minutes without activity. Refreshing or closing its browser tab also locks it.
- If the vault is locked, unlock it in Settings → Connectors. You do not need to reconnect existing accounts.
- If you forget the password, use the recovery key on /connectors. If both are lost, reset the vault there and reconnect your accounts.
- You can also open the vault with a 6-digit code from an authenticator app (Google Authenticator, Microsoft Authenticator or AppCode). Unlock once with the password on /connectors, choose Set up an authenticator app, scan the QR code or type the setup key, and confirm with a code. Show the setup key again there at any time.
- No smartphone? AppCode gives authenticator codes on a kosher phone: sign up with your phone number, connect a new service with the QR code or setup key from /connectors, and get each code by phone call. In the app, choose Use a code from my authenticator app in Settings → Connectors.
- When several accounts are connected, choose the account you want to use for this project.
- Settings lets you allow an action, ask for approval each time, or block it.
- Enter connection keys only in the secure dialog. If it offers to save a protected copy on this computer, choose whether you want that. The key icon lets you manage saved key names.
Saving with GitHub
GitHub stores the website project files so you can save your work and use it on another computer.
- Connect GitHub on the account connections page and choose the correct account for your project.
- Pull brings the version from GitHub to this computer and replaces the local project files. Check for work you still need to save before confirming.
- Push or Update uploads the version on this computer to GitHub. It may replace changes saved there by someone else; read any warning before confirming.
- Auto-sync saves changes to GitHub automatically. It pauses if GitHub has newer changes that need your attention.
- Saving to GitHub and publishing a live website are separate actions. Publish through Cloudflare or Vercel when you want visitors to see the update.
Storing website information with Supabase
Supabase stores website information, user accounts and files, such as form submissions and uploaded images.
- Connect your Supabase account on /connectors, then choose the correct organization and project in the app.
- Ask the assistant for the feature you need, such as “Save contact form submissions and let me view them.”
- The Supabase panel includes links to manage information, users and files.
- If access from this computer is blocked, use Allow my IP when the app offers it.
- Changes to information and user accounts affect the connected project. Check that you have selected the right one.
Publishing your website
Cloudflare or Vercel make your website available to visitors. The preview on your computer is for checking your work.
- Connect Cloudflare or Vercel on /connectors and open its publishing panel in the app (the cloud icon for Cloudflare, the triangle icon for Vercel). Vercel connects with an access token you create in your Vercel settings and paste on /connectors.
- Choose the account and website name, then click Deploy and wait for the result.
- After successful publishing, open the live link and check the website.
- You can connect your own website address. Follow the instructions and keep existing email settings when making changes.
- After editing the project, use Deploy again to publish the update.
- If publishing fails, send the error to the chat, fix the problem and try again.
- Deleting the deployment removes the live website. Read the confirmation carefully.
Language, appearance and updates
Choose Hebrew or English, and a light, dark or system appearance.
- Choose the chat reply language separately using the globe button.
- Use Restart to update, or the restart-and-install button shown in the message, to apply the update.
- You can also fully quit and reopen the app to finish updating.
- Closing the window with X may only hide it. Use Quit to exit fully.
- Your projects and settings are stored separately from the app installation.
Getting started
Simple instructions
- Create a New project from a description or open one from GitHub. Wait for the website preview to appear.
- Select what you want to change, then ask in Chat or use Design. Use Apply … to chat to save visual changes to the project.
- Plan helps you plan the work. Fast Build makes the changes you request. Save reusable preferences in Project instructions.
Choosing your assistant
Simple instructions
- Available choices include Claude, Codex, GROK BUILD, OpenRouter, Groq, Gemini, GitHub Models and Hugging Face.
- Follow the setup and sign-in instructions for your chosen service. GROK BUILD and Groq are different services.
- Use the setup buttons for your chosen service. Enter personal connection keys only in the secure field provided. Usage limits and charges depend on that service.
- Local chat works on this computer. Cloud chat works remotely and returns changes through GitHub; enable it in Settings first.
Asking the assistant to check the website
Simple instructions
- Ask the assistant to check a page, button or form, including how it looks on a phone or tablet. It checks the project preview in the background.
- Ask it to verify the result, such as whether a form was saved. Tests can save real information or send real messages.
Accounts and connection keys
Simple instructions
- Manage connected accounts on /connectors. If the vault is locked, unlock it in Settings → Connectors.
- If several accounts are connected, choose the one you want to use. Settings lets you allow actions, require approval or block them.
- A connection key is a personal code for using a service. Enter it only in the secure dialog, never in chat. You can choose whether to save a protected copy on this computer when offered.
Website information, users and files
Simple instructions
- Supabase stores information for your website, such as forms, user accounts and images. Connect the correct organization and project.
- Describe what you need in Chat, for example: “Let visitors register and let me manage their accounts.” Changes affect the connected project.
Publishing and updating the website
Simple instructions
- Cloudflare or Vercel publish your website on the internet. Choose the correct account in the cloud (Cloudflare) or triangle (Vercel) panel, click Deploy and open the resulting link to check it.
- Use Deploy again after changes. You can connect your own website address; follow the instructions and keep existing email settings.
- If you need features such as saving files or handling many submissions, describe the result you want in Chat.
Saving work and automatic tasks
Simple instructions
- GitHub stores your project files. Pull replaces files on this computer; Push or Update uploads your version and may replace changes on GitHub. Read warnings before confirming.
- Auto-sync saves changes automatically and pauses when newer changes on GitHub need attention.
- You can ask Chat to set up automatic checks for your project. Saving to GitHub and publishing the website are separate actions.
Connecting website features to Google
Simple instructions
- Connect the Google services you want to use on the account connections page. If several accounts are connected, specify the email address to use.
- Ask for a website feature such as sending email, saving rows to a sheet, creating documents or presentations, or scheduling events and meetings.
- These connections support features in your published website. After publishing, check that the feature works with the account you chose.
Automating Google tasks
Simple instructions
- Google Apps Script helps automate repeated tasks, such as adding information to a sheet or creating a document after a form is submitted.
- This connection is separate from the other Google connections. Choose the account you want to use and describe the task in Chat.
- If Google asks for authorization, complete it before testing. Then check that the task ran and produced the result you wanted.
What you need to get started
A suitable computer
Windows or macOS with an internet connection.
Vibe Editor account
An active account to use the app.
Git and Node.js
Tools that help the app open projects. Follow the installation instructions if anything is missing.
A chat assistant
Choose a service in Chat and follow its install or sign-in instructions.
Keyboard shortcuts
Enter | Send a chat message |
Shift+Enter | Start a new line |
Esc | Leave selection mode |
Ctrl/Cmd+Click | Add another part to the selection |
Ctrl/Cmd+Z | Undo the last design change |
Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z | Restore an undone change |
Solving common problems
Start with the message shown in the app. You can send an error to the chat for help.
Empty or stuck preview: refresh it. If that does not help, use Rebuild dev server to prepare the preview again.
GitHub has newer changes: review the warning. Pull replaces the local files; Push or Update can replace the version on GitHub.
Cannot switch chat services: start a New chat.
Supabase access is blocked: use Allow my IP if offered.
Vault locked: unlock it in Settings → Connectors. If you forgot the password, use the recovery key on /connectors.
Connected account missing: unlock the vault and refresh the connections list. If the account is not connected, add it on /connectors.
Publishing failed: use Send this error to the chat, then try again after the fix.
Update waiting: use the restart-and-update button or fully quit and reopen the app.