Editing and Preview

In Essepage, you can edit files in the code editor and use Preview to see how your changes appear on a web page.

The basic workflow is:

Open a file → Edit the code → Save → Check in Preview

You can also enable Live Preview for specific areas to see changes immediately, even before saving the file.

In this guide, you will learn how to:

• Open and edit files
• Open a page in Preview
• Check saved changes
• Navigate between pages in Preview
• Test pages at different screen widths
• Use Live Preview
• Understand the difference between Preview and the public site

Opening and Editing a File

On the left side of the code editor, the file explorer displays the files and folders in your project.

Select a file in the file explorer to open its contents in the code editing area.

For example, select the following file to edit the homepage:

/public/+page.essepage

You can modify the existing content or add new code in the code editing area.

<h1>Welcome to My Website</h1>

<p>This page was created with Essepage.</p>

When you save the file, your changes are stored in the development environment as the working version.

To learn more about saving files and checking their save status, see Saving Your Work.

Opening Preview

Preview lets you see how a page saved in the development environment appears in a web browser.

To open a page in Preview:

1. Right-click a +page.essepage file in the file explorer.
2. Select Preview.
3. Check the page in the Preview pane on the right.

If the Preview pane is already open, the selected page will appear there.

Files That Can Be Previewed

Preview is available for published +page.essepage files. Published page files appear in green in the file explorer.

The homepage created from a template is already published, so you can open it in Preview immediately.

A newly created page has not been published yet, so Preview is not initially available. After you Publish the page, you can open it in Preview.

For example, if you create the following file, you must publish it first:

/public/about/+page.essepage

After the page has been published for the first time, editing and saving it will not immediately change the public site. You can check the saved changes in Preview first and apply them to the public site when they are ready.

Checking Saved Changes

When you edit and save a file, the Preview pane updates to show the saved changes.

For example, start with the following heading:

<h1>Welcome to My Website</h1>

Change it to the following and save the file:

<h1>Welcome to My New Website</h1>

The updated heading will appear in the Preview pane.

Saving updates the Preview, but it does not change the public site that visitors see.

Navigating Between Pages in Preview

If your website contains multiple pages, you can use links to move between them in Preview.

For example, suppose your layout contains the following navigation menu:

<nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
</nav>

Select About in Preview to open the /about page, or select Contact to open the /contact page.

Select the home icon at the top of the Preview pane to return to the website’s homepage.

Testing Different Screen Widths

Resize the Preview pane to check how the page appears at different screen sizes.

Place the pointer over the divider between the editor and Preview panes, then drag it to change the width of the Preview pane.

If you use responsive Tailwind CSS classes, you can also see how the layout changes according to the available width.

<div class="grid gap-4 md:grid-cols-3">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

This code displays the content in a single column on smaller screens and three columns when the screen reaches the specified width.

Using Live Preview

Regular Preview updates only after you save the file.

If you want to see changes immediately while editing without saving each time, you can use Live Preview.

To enable Live Preview, give an HTML element an id that begins with an underscore (_).

<div id="_main">
    <h1>Welcome to My Website</h1>

    <p>This page was created with Essepage.</p>
</div>

When you modify code inside the _main element, that area updates immediately in Preview without saving the file.

For example, change this heading:

<h1>Welcome to My Website</h1>

to:

<h1>Welcome to My New Website</h1>

The heading in Preview changes as you edit the code.

Live Preview Scope

Live Preview applies to the element whose id begins with an underscore and to everything inside that element.

<section id="_intro">
    <h1>About Our Studio</h1>

    <p>We create simple and useful websites.</p>
</section>

In this example, changes to the heading or paragraph inside _intro appear immediately.

Other areas of the page continue to use regular Preview, so you must save the file before changes to those areas appear.

Each id must be unique within the page.

<section id="_intro">
    ...
</section>

<section id="_services">
    ...
</section>

Previewing CSS Changes in Real Time

You can also give a <style> element in a page file an id that begins with an underscore.

<style id="_css">
    h1 {
        color: royalblue;
        font-size: 48px;
    }
</style>

When you change a color or size inside the <style> element with the _css ID, the CSS changes appear immediately in Preview. For example, the heading color changes without saving the file.

When using Tailwind CSS classes, you can edit classes inside an element with Live Preview enabled and see the result immediately.

<div id="_main">
    <h1 class="text-4xl font-bold text-rose-600">
        Bloom Flower Studio
    </h1>
</div>

Change text-rose-600 to text-blue-600, and the text color will update immediately.

Live Preview Still Requires Saving

Live Preview helps you check results quickly while writing code. Even if the Preview pane changes, the file itself is not saved automatically.

Always save the file after you finish editing if you want to keep your changes.

Live Preview shows your changes immediately, but it does not save your work.

If you close the file or reload the page before saving, you may lose your changes.

Preview and the Public Site

In Essepage, Preview for work in progress is separate from the public site that visitors see.

You can save a file and check it in Preview as many times as needed without changing the public site.

To make your changes visible to visitors, use Publish or Apply Changes after you finish working.

To learn more, see Publish and Apply.

Basic Editing Workflow

The basic workflow for editing code and checking the result is:

1. Open the file you want to edit in the file explorer.
2. Open the page file in Preview.
3. Write or modify the code.
4. Use Live Preview where needed to check changes as you work.
5. Save the file.
6. Check the saved result in regular Preview.
7. Test links and different screen widths.
8. Apply the changes to the public site when your work is complete.

Edit → Check live changes → Save → Preview → Apply to the public site

When Preview Does Not Work

If Preview does not open or your changes do not appear, check the following.

The Preview Menu Does Not Appear

Preview is available for published +page.essepage files.

If you created a new page, Publish it first.

My Changes Do Not Appear

Regular Preview displays the saved version of the file. Make sure you have saved your changes.

Live Preview Does Not Work

Check that:

• The Preview pane is open.
• The element has an id.
• The id begins with an underscore (_).
• The code you are editing is inside that element.
• The same id is not used more than once on the page.

The Changes Appear in Preview but Not on the Public Site

This is expected behavior.

Preview shows the working version in the development environment, while the public site shows the version that was most recently published or applied.

When your changes are ready, use Apply Changes to update the public site.

Next Steps

After learning how to edit files and use Preview, continue with the following guides:

• Learn how to save files and check their save status: Saving Your Work
• Publish a page for the first time or update an existing page: Publish and Apply
• Manage the files and folders in your project: Managing Files and Folders
• Check errors and runtime messages: Console and Debugging