Editor UI
Updated over a week ago

The code editor in CodeWP provides a robust interface for generating code snippets and plugins conversationally. Here's an in-depth look at all of the different elements and capabilities.

Top Bar

The top bar contains controls for managing open files:

  • Dots icon - Access file workspace to open snippets.

  • Chat toggle - Switch to chat mode while retaining history.

  • File tabs - Display open files. Click to switch files.

  • Add file (+) - Create new files by entering name and extension.

  • Favorite - Click the star to favorite a file for later access.

  • Copy - Copy the full contents of the open file.

  • Download - Download the open file.

  • Delete - Delete the file completely (irreversible).

  • Save status - See if a file is saved/unsaved. Click to save.

  • Share - Share a published file or package publicly.

Open File Pane

This main pane displays the currently open file contents in the code editor.

The editor provides full IDE capabilities like search/replace, keyboard shortcuts, etc.

File type determines highlighting and autocomplete - PHP, JS, CSS, etc.

Right Sidebar

The right sidebar contains controls related to the open file:

  • AI Vision (alpha) - Enable image annotations (requires project connection).

  • Project - Select/create project to associate with generations.

  • Packages - Manage packages and files associated together.

  • Current snippet - See snippet details like language, creation date, etc.

  • Modes/Presets - Choose coding language and starter presets.

  • Chat - Full conversation history and input field to enter prompts.

Generating Code

With the sidebar configured, enter prompts in the chat input field to generate code in the open file panes.

The full editor interface equips you to efficiently manage files, leverage AI, and create complex code snippets or plugins conversationally. Let us know if you have any other questions!

Did this answer your question?