On first run, AutoSite doesn't look like much, but its GUI packs much power. AutoSite's GUI can be divided up into four quadrants: the Sitemap, the Code Editor, the Preview Panel, and the Build Information Panel. Any of these four can be individually resized by dragging on the edges of their panel, or outright disabled using the View menu.
[#] Sitemap
At the top left is the Sitemap. This is a tree view of every file in your project divided into the three main folders: Pages, Templates, and Includes. This is also where you open and modify the files in your project.
To add new files to a project, you can right-click any folder in the Sitemap (including the three project folder roots) and select "Add Files..." from the context menu. If you're making a new file from scratch, hover the "New" submenu and select the desired file type. Your files will be made in or added to the folder you right-clicked on. Moving files can be done using the "Copy" and "Paste" context menu items.
If you're making a new file in Pages or Templates, any non-HTML options will be greyed out, as scripts and stylesheets don't go in these folders.
Double-clicking on an HTML document, a Markdown document, a plain text file, a stylesheet, a PHP script, or a JavaScript will open it in the Code Editor, while double-clicking on any other file type will open it in the program those files are associated with on your computer.
[#] Code Editor
The top right of the GUI is taken up by the Code Editor. This is a text editor with tabs for opening multiple documents and syntax-highlighting (color-coded markup) for ease of reading and catching errors. The Code Editor will also auto-indent your work for extra readability.
A few of the settings in the Format menu pertain explicitly to the Code Editor's appearance and functionality:
| Setting | Function |
|---|---|
| Word Wrap | Splits lines longer than the Code Editor can display. This doesn't affect your text in the document itself, merely how AutoSite renders it. |
| Virtual Space | Allows the placing of the cursor at any arbitrary point in the Code Editor, including after the end of lines. When disabled, you'll only be able to place the cursor within the actual text. |
| Wide Caret | Turns the cursor into a block the width of a full character, instead of a single line between characters. This is more DOS-like visually, but as it blocks the character at the current cursor position, this may be harder for you to read. |
| Monospace Font... | Pulls up the Font dialog, letting you select a font for the Code Editor from any one you have installed, along with styles and sizes. For best results, pick a monospaced (or typewriter-like) font like Courier or Monaco. |
The Code Editor also features a toolbar with several important functions for building your site and previewing and debugging your work.
| Icon | Primary Function | Secondary Function |
|---|---|---|
 |
Saves the current document. Unsaved documents have an asterisk (*) at the end of their name in the relevant tab. | Save All: Saves all documents currently open in tabs. |
 |
Undoes or redoes the previous edit. | |
 |
Cuts, copies, and pastes, respectively. | |
 |
Pulls up the Find dialog for finding a snippet of text in a busy document. Can be set to match only the correct capitalization, match only the entire word (rather than any time the text appears, even inside words), or match a regular expression. | |
 |
Pulls up the Go To Line dialog, which skips to a specific line of the current page. The line numbers appear to the left of the Code Editor. | |
 |
Pulls up the Find and Replace dialog, similar to the Find dialog, but allows the user to replace the found text with some other text. If text is selected in the Code Editor, the Replace function will only affect the selected text. | |
 |
Pulls up the Quick Insert menu for inserting conditionals or attributes at the current cursor position in the text. | |
 |
(Only on templates/includes) Displays the open file in the Preview Panel for debugging purposes. | Live Preview: When checked, the preview will update as you type in the Code Editor. |
 |
(Only on input pages) Renders out the input page in the template set for that page into the Preview Panel. This does not mean included assets will get copied over, however, so images and changes in stylesheets may not appear. | Live Preview: When checked, a raw preview of the file's contents will update as you type in the Code Editor. |
 |
Builds the site. | |
 |
(Only on input pages) Displays the respective output page in the Preview Panel. Requires a build to work. | View in Default Browser: Opens the respective output page in the system default web browser. |
[#] Quick Insert
One handy feature you might've missed is the Quick Insert menu. The Quick Insert menu allows you to insert attribute tokens and conditionals at the cursor position in the Code Editor. To bring it up, click the Quick Insert button in the Code Editor toolbar, select "Quick Insert" from the Edit menu, or press Ctrl+Space or Ctrl+J.
You can navigate the Quick Insert menu with the arrow keys and select them with Enter, or double-click anything to insert it as usual.
If you're unsure of what an option in the Quick Insert menu does, simply click it a single time and a tooltip with extra information will appear. If applicable, the tooltip will also show what Apricot will replace the token with in the context of the page.
[#] Preview Panel
The Preview Panel takes up the bottom right of the GUI. Simply put, it's where you preview your site! AutoSite integrates with the Trident browser engine in Windows to display rendered pages and templates directly inside the program. You might want to resize the AutoSite window to use it, as it'll probably be too small to see much.
If you prefer, you can use the "Browse Site in Default Browser" option from the View menu after a build and preview your site in your proper web browser of choice. (Technically, the Preview Panel can also be used to browse the web, but it's a bit useless without the browser controls. Best just to keep it for its intended purpose.)
[#] Build Information Panel
Finally, the lower left of the AutoSite GUI is taken up by the Build Information Panel, which has two uses: viewing the most recent build log, and viewing your site's Attribute Map. The former is explained in the "Apricot (Building Your Site)" chapter of this manual, while the latter is explained in the "Attributes" chapter.
The Build Information Panel also provides another toolbar of quick functions, these more pertaining to building and viewing your site for debugging purposes:
| Icon | Function |
|---|---|
 |
Builds the site. |
 |
Initiates a sanitary build. See "Apricot (Building Your Site)" for details on sanitary building. |
 |
Browse your site in the system default web browser. Requires a build to work. |
 |
Browse your site in the Preview Panel. Requires a build to work. |
 |
Opens the output folder of your site's project. Requires a build to work. |