Code editor

YWT includes a full-featured code editor built on Monaco — the same editor engine that powers Visual Studio Code. You can write HTML, CSS, and JavaScript directly in your browser without installing anything on your computer. The editor opens on your site's Edit tab.

The code editor is for sites you start with one of the Advanced options on an empty Edit tab: a template, uploaded files or a ZIP, Start Fresh, or Load from Version. If you do not want to write code, use Create a page instead and fill in a form. See Create a page without code. A page made that way has no code editor.

Editor layout

The editor is divided into three main areas:

File tree (left panel)

The file tree shows every file and folder in your site project. From here you can:

• Browse files by clicking to open them in the editor pane.
• Create new files or folders using the buttons at the top of the panel.
• Rename a file by right-clicking and choosing Rename.
• Delete a file by right-clicking and choosing Delete.
• Upload files into your draft.

Editing area (center)

This is where you write code. The editing area supports:

• Syntax highlighting for HTML, CSS, JavaScript, JSON, Markdown, and more.
• IntelliSense — Auto-completion suggestions as you type (for CSS properties, HTML tags, and common JavaScript patterns).
• Multiple tabs — Open several files at once and switch between them using the tab bar.
• Error highlighting — Syntax errors are underlined in red so you can catch mistakes as you type.
• Minimap — A zoomed-out preview of the full file on the right edge, useful for navigating long files.

Toolbar (top)

The toolbar provides quick access to the most common actions.

Working with files

Creating a file

1. In the file tree, click the New file icon (or right-click a folder and choose New file).
2. Enter a filename including the extension (e.g., about.html, styles/main.css).
3. Press Enter. The file is created and opens in the editor.

Creating a folder

1. In the file tree, click the New folder icon (or right-click and choose New folder).
2. Enter a folder name and press Enter.
3. You can then create files inside the folder.

Renaming and deleting

Right-click any file or folder in the tree to see the context menu with Rename and Delete options. Deleting a folder removes everything inside it.

Saving changes

When a text file is modified, the editor marks it as changed and enables the Save button in the file header. You can also press Cmd + S on macOS or Ctrl + S on Windows/Linux to save the current file.

Keyboard shortcuts

The Monaco editor supports most of the keyboard shortcuts you may already know from VS Code.

Live preview

Click the Preview button in the toolbar to open a preview of your draft in a new tab. The preview shows your saved draft before you publish it. The link works for one hour; open a new one from the toolbar when it expires.

To show the draft to someone else, click Share draft and choose 1, 7, or 30 days. Anyone who has the link can view your draft until it expires or you click Stop sharing, which ends every draft link created so far. See Share a draft.

Workspace previews are different from deployment preview URLs. Workspace previews use an expiring link to your unpublished files; deployment previews are public links to a fixed published version. See Previews for the full comparison.

Download your files

Click Download files on the Edit tab to download your current draft as a .zip file. Use it to keep a backup, to work on the files on your computer, or to move the site elsewhere. To download a version you have published, open it from History and click Download (see Deploy your site).

A coming-soon page has no draft files, so its Edit tab has no Download files button.

Tips for working efficiently

• Keep related files grouped in folders so they are easy to find in the file tree.
• Use the preview tab after saving meaningful changes so you can check the rendered page before publishing.
• Publish meaningful milestones so you have useful versions in your site's History.
• Keep file names lowercase and use hyphens instead of spaces (e.g., my-page.html rather than My Page.html) to avoid URL issues.

Next steps

• Deploy your changes to make them live.
• Understand previews before sharing links with others.
• Browse templates if you want a pre-built starting point.
• Create a page without code if you would rather fill in a form.
• Set up a custom domain to use your own .ch or .li address.