Editor Basics

The Essepage code editor is a browser-based workspace where you can manage your website files and write code.

In the Quick Start, you opened the homepage file, edited its code, saved your changes, checked them in Preview, and applied them to the live site. This guide introduces the editor interface and its basic features.

Open the Editor

On the project dashboard, select Code Editor to open the editor for that project.

You can use the editor to:

• View the files and folders in your project
• Open and edit page files
• Create new files and folders
• Save changes
• Preview pages you are working on
• Publish pages and apply changes
• Open published pages

Everything happens in your browser, so you do not need to install a separate code editor.

Editor Interface

The editor consists of five main areas:

• Top menu: Provides commands for working with files, configuring the interface, managing pages, and changing editor settings.
• File Explorer: Displays and manages the files and folders in your project.
• Code editing area: Displays and edits the code in the selected file.
• Preview panel: Shows how a page saved in the development environment will appear.
• Console panel: Displays debugging output when the browser or device does not provide access to a browser console.

Depending on your screen size and current task, you can open or close the Preview panel and focus on the areas you need.

Top Menu

The following menus appear at the top of the editor:

• File: Create and save files and perform other file-related actions.
• Edit: Use editing commands such as Undo, Redo, and Find.
• View: Adjust the editor interface and the visibility of its work areas.
• Page: Preview and publish pages or apply their changes.
• Theme: Change the visual theme of the editor.
• Help: View help and other information about using the editor.

Frequently used actions are also available from the right-click menu and through keyboard shortcuts.

Use the File Explorer

The File Explorer on the left side of the screen displays the files and folders in the current project.

Select a folder to expand or collapse it. Select a file to open it in the code editing area.

The structure of a project can vary depending on the selected template and the type of website you are building. A project generally contains:

• The /public folder and page files such as +page.essepage
• CSS and JavaScript files
• Other files such as ads.txt and sitemap.xml
• Layouts and components
• Project configuration files

The locations of files and folders can affect the structure of your website and its page URLs. Before creating or moving files, see Pages and URLs to learn about file naming and path rules.

Open the File Menu

Right-click a file or folder to display the actions available for that item.

The following actions may be available for a page file:

• Preview: Open the page saved in the development environment in Preview.
• Publish: Publish a new page that has not yet been published.
• Apply Changes: Apply changes from an already published page to the live site.
• Open Page: Open the published page in a new browser tab.

The available actions vary depending on the file type and whether the page has already been published.

Open and Edit Files

Select a file in the File Explorer to open it in a new tab in the code editing area.

You can keep multiple files open and move between them by selecting their tabs. The currently selected file appears in the code editing area.

Depending on the file type, you can write HTML, CSS, JavaScript, Markdown, and other code in the editor.

Line numbers and syntax highlighting make it easier to distinguish the structure and content of your code.

Basic Keyboard Shortcuts

Use the following shortcuts to perform common actions quickly.

Some shortcuts may behave differently depending on your browser and operating system.

Save Changes

After editing code, save the file.

• macOS: Cmd + S
• Windows or Linux: Ctrl + S

Saved code is stored in the development environment, where you can check the result in Preview.

Saving a file does not change the live site that visitors see.

To update the live site, you must Publish the page or use Apply Changes.

It is a good idea to save frequently and check your work in Preview as you edit.

Use Preview

Preview shows how a page saved in the development environment will appear in a web browser.

Preview has two display modes:

• Preview panel mode: Displays Preview in the panel on the right side of the editor.
• Browser tab mode: Displays Preview in a new browser tab.

By default, Preview appears in the Preview panel when the editor opens. Select the Open Preview in New Window icon in the Preview panel to open it in a new tab.

You can use both modes at the same time. For example, you can use the Preview panel to check a mobile layout while using the browser tab to check a desktop layout.

When you save a page file, any open Preview also updates.

If Preview is not open:

1. Select the Preview panel icon on the right side of the editor’s top menu.
2. Find the page file you want to preview in the File Explorer.
3. Right-click the file.
4. Select Preview.

Preview is available only for published +page.essepage files. Supporting files such as CSS, JavaScript, layouts, and components do not need to be published separately.

Preview displays content from the development environment. It may differ from the published page that visitors see.

Update the Live Site

There are two cases in which you update the live site.

If you created a new file for a new page, it has not yet been published. Use Publish to make it available on the live site.

If you edited an existing published page, use Apply Changes to update it.

Because a new page must be published before it can be previewed, first publish the new page. You can then continue editing it, check the results in Preview, and use Apply Changes when you are ready to update the live site.

Publish and Apply Changes perform the same underlying publishing operation. The available action depends on whether the page has previously been published.

Publish a New Page

A newly created page is not yet available to visitors.

In the File Explorer, right-click the page file and select Publish to publish it for the first time.

Update a Published Page

After editing a page that has already been published, use Apply Changes.

In the File Explorer, right-click the page file and select Apply Changes. The saved changes will be applied to the published page.

After you edit and save a published page, a purple indicator appears next to the file. This makes it easy to identify pages that still need to be applied.

Apply Shared Changes to Multiple Pages

You do not need to apply each file immediately after saving it. You can work on multiple pages while checking them in Preview and apply all of the changes together when you are finished.

This is especially useful when you edit a layout or component used by multiple pages. Every page that uses the shared file must be applied.

Use Apply All to apply shared changes to multiple published pages at once.

Check the Published Page

After publishing a page or applying changes, verify that the published page has been updated correctly.

In the File Explorer, right-click the page file and select Open Page. The published page will open in a new browser tab.

You can also open the Site URL from the project dashboard.

If you remember the address, you can enter it directly in the browser’s address bar.

After applying changes, it may take up to one minute for the cache to update. If the previous content is still visible, wait a moment and then refresh the page.

Basic Workflow

The basic workflow for editing a page is:

1. Find the page you want to edit in the File Explorer.
2. Open the file and edit its code.
3. Save the file.
4. Check the result in Preview.
5. Publish a new page or apply changes to an existing page.
6. Open the published page and check the final result.

Open file → Edit code → Save → Preview → Publish or apply → Check the published page

When Changes Do Not Appear

If your changes do not appear on the published page, check the following:

• Make sure you saved the file.
• Make sure the page you edited is open in Preview.
• Check the file path to make sure you edited the correct file.
• Check your HTML, CSS, and JavaScript for errors.
• If you are viewing the published page, make sure you applied the changes.
• If you just applied the changes, wait a moment and then refresh the page.

If the changes appear in Preview but not on the published page, you may have saved the file without using Apply Changes.

Next Steps

After learning the basics of the editor, continue with one of the following guides:

• To create a new page: Add a Page
• To understand how files determine URLs: Pages and URLs
• To build a complete website step by step: Build a Landing Page
• To reuse shared code across multiple pages: Layouts and Components
• To learn more about publishing and applying changes: Publishing and Site Management