On the project dashboard, click the Code Editor button to launch the built-in editor. You will be presented with the following interface:
The built-in editor is organized into several key sections, designed to be intuitive for anyone familiar with modern code editors.
- Menu: Access standard editor functions including File, Edit, and View.
- Files: Manage your project's folders and files through the integrated explorer.
- Code Editor: The primary workspace for writing and editing your code.
- Preview: View the live, real-time results of your code changes as you type.
- Console: Monitor debugging logs such as
console.log(). This is particularly useful for testing on mobile browsers where a native console is unavailable. - Stats: Track the remaining quota for each type of file within your project.
The editor supports syntax highlighting for HTML, CSS, JavaScript, and Markdown. Additionally, it features Tailwind CSS IntelliSense and Emmet support to significantly speed up your development workflow.