browser editor

Workspace connected on one screen

Cake20 browser editor is not just a code input window. left file Explorer, script and Console·Chat in the middle, WEB PREVIEW on the right They move together based on the same website source.

My site is basic with an editor button without an expansion icon to the right of AI coding. Opens the address in a full screen new tab. The editor transfers the last mode to the browser. Remember and restore If there are no saved selections, it will start in development mode. Easy mode is Can only be selected if you have at least one AI account connected Also, even if you enter the Easy Mode address while not connected to AI, it will still go into development mode. Go.

For easy mode inside the editor, open /editor/{site ID}/easy and It only displays AI Chat on the left and Preview on the right. At the top of the preview The Chat input window is displayed in three lines, leaving only element selection and resolution selection. Element selection includes the selected element's page, Cake20 View file, tag, source offset, Always use AI coding by briefly entering the selector into the AI ​​Chat input box. Modify it in a way. Always keep the hidden Preview display target fixed. Chat input box in both development mode and easy mode In the Directives button on the right inside, create, edit, design,Open up to four maintenance menus in the same format. Even when the button is hovered It's transparent. In both modes, it is located in the same upper-right position of the multi-line input window. Stick it. A wide list of directives It even shows part of the content. The directive you select only applies to the AI ​​Chat field. It is filled out, edited or confirmed by the user, and then sent directly. F1~F4 Shortcut keys are not used. On the right One button that changes between start and end depending on the status of the inspection site and Displays an open button that opens the site in a new window. possible to start The start button is very light gray while open. border Open button gently fades repeatedly. Font and icon colors Maintain the background color and change the start button almost at the peak of the fade. White, with the open button in medium grey. Easy mode top bar In the center are the recommended instructions and the administrator Display one of the recommended comments in the settings as a full line without abbreviations and add about Change to the next sentence every minute. When you click, a sentence appears in the description popover. You can check it. The settings icon in the directive popover shows You can add, edit, delete, and change the order of menus and directives for each site. The settings being edited can be copied and pasted as version-type JSON or exported to a file. You can import it and share it with other sites and users. The imported settings are Mark as draft before saving. Unless otherwise set, universal default values ​​are used. It is used automatically and the AI ​​can also read and change the same settings. Hidden development features and MCP control It works as is. In the same position at the top left of both modes, there is a transparent background Release one mode button. Remove the Project Files display in development mode. Extend the top bar to the left end of the workspace. Development mode is bright sky blue, Easy mode is identified by a bright green icon and text. open development mode File tabs start at the left border of the script window, and new tabs start at the right. Add. Switch between Chat, Preview and editing states without reopening your workspace. Maintain. If you don't have a connected AI account or your login is disconnected, Chat Chat input and file attachments are disabled so requests cannot be entered.

The editor browser tab title will be Cake Studio - {site name}.

Users and MCP AI share a single Git-backed source workspace. When a file changes on one side, the editor marks the change and redirects the same file. If you try to save late, a hash conflict prevents overwriting.

• In FILES, navigate to app, public, server, shared, package.json, and tsconfig.json.
• The initial state of FILES is to expand only the server folder and app, public and shared It starts out closed.
• Edit Cake20 View·TypeScript·JavaScript·HTML·CSS·JSON with CodeMirror When saving, Cake20 applies internal Oxfmt rules.
• Search file contents by opening it with Ctrl+Shift+F or Cmd+Shift+F. Supports whole word, regular expression and extension filters.
• API, route, job, task, WebSocket and SSE files can be executed simply by selection. It only scans or connects when you press Run Test.
• Test the selected file using the run/stop icon on the right side of the console. test Preparation/results and SSE/WebSocket transmission/reception are displayed as Test output.
• Console provides test output, server log, and preview browser output in one place. Displayed separately. Eraser blanks the current three outputs together.
• New output automatically follows the end of the Console when the user scrolls up. Stop tracking. The copy icon in the Console toolbar copies the current Test, Server, and Preview output to the clipboard together.
• The bottom panel switches between Console and Chat, and changes the selected panel and split size. Maintain. The initial default with no saved selections is Console.
• The console does not load past save logs and only outputs them after entering the editor. Collect volatile.
• The top Logs button switches among console, persistent Chat, and MCP work logs. Unread MCP completion or failure changes and blinks the button, and active MCP work adds a border.
• The editor has no separate language selector. The Korean or English choice in the main header also applies to the editor; English is used when no choice has been saved.

Start from the screen and connect to the source

• Select a page in WEB PREVIEW and view it on desktop, tablet, or mobile screen. Check with actual viewport ratio.
• Element selection connects static text, styles, and images on the screen to the Cake20 View source location. Lets you edit the code without having to find it yourself.
• All static phrases divided by line breaks or sub-tags are displayed in the edit window, Changes linked to multiple Cake20 View files are saved together with the entire original verified.
• Element selection in Easy Mode allows you to select pages, files, tags, etc. without directly opening an editing window. source offset, selector as a short AI Chat input draft Let the user add their edit request.
• Edit Element reverts the last 100 direct edits with Ctrl+Z or Cmd+Z.
• Text and static styles retain the current iframe and component state when saved. It is maintained and immediately reflected in Vite HMR.
• Elements that cannot be saved directly on the screen, such as variables, API, and DB, include path, selector, Forward to AI Chat, including display content and Cake20 View source hints.
• While the AI ​​is editing the files, the editor marks the files for changes and when it's done, Automatically renews the current Preview.

Boundaries of storage, inspection, and operation

Content saved in the editor is not immediately reflected on the operating website. After checking in an inspection environment isolated from the design preview, separate distribution and After going through the startup phase, it becomes an operational release.

• Design Preview is an internal Vite that does not start the website Bun server/DB This is a development server.
• Actual API, authentication, and event review uses a separate -test URL and build/debug Runtime, while sharing DB, Redis, and files with production.
• Distribution inspection connects technical inspection and AI modification immediately before release without a separate tab. We provide.
• Storage in the right-hand pane of the database is Operations User File Management. Open the screen in a new tab.
• Review builds do not overwrite production code, but DB, Redis, or files changes made during review affect the shared website data.