Editing Templates, Styles, and Scripts

Change your site's template, CSS, or JavaScript without leaving WebHaste — with a live preview that updates as you type.

What this is

Most of what you do in WebHaste is edit page content. But a site's look and feel lives in a few other files: the template that wraps every page (header, navigation, footer, and the tags in its <head>), plus the CSS and JavaScript files in your scripts/ folder. This optional feature gives you tabs in the file list for opening those files and editing them right in WebHaste, with no separate code editor needed.

It's off by default. Most people editing a site's content never need to touch these files, and a change to a template affects every page that uses it, so WebHaste keeps them out of sight until someone deliberately turns the feature on.

Enabling This Feature

• Click ⚙️ Site Admin in the toolbar, then ⚙️ Site Settings.
• Check Enable template, style & script editing.
• Click Save.

Four tabs now appear above your file list: Pages, Templates, Styles, and Scripts. Pages is what you've always seen — your page files, exactly as before.

This setting is per device. The setting is saved in your browser, not in your project folder, so turning it on doesn't enable/disable it for anyone else who opens the same project (on a shared drive, say, or after cloning the site from git). A content editor on the same project will still see only their page list. It's a convenience rather than a security feature — anyone can switch it on for themselves in Site Settings — but it keeps people who don't need these files from making accidental changes.

What's in each tab

• Templates — the layout files in your project's .webhaste/templates/ folder. If your site has more than one (see Using Multiple Templates), they're all listed.
• Styles — every .css file in your scripts/ folder, such as styles.css or custom.css.
• Scripts — every .js file in scripts/, such as main.js.

Minified library files (anything with .min. in its name, like lunr.min.js or lottie.min.js) are left out of the list. They come with WebHaste, aren't meant to be edited by hand, and a minified file is unreadable in an editor anyway. Your assets/ and elements/ folders aren't shown here either. Manage images and uploads from the 📎 Assets dialog as usual.

Editing a file

Click a file in any of the three tabs and it opens in code view, with syntax coloring for HTML, CSS, or JavaScript as appropriate. These files have no Visual view, so the usual toolbar (Visual/Code toggle, text formatting, image and block buttons) is hidden while one is open.

Like page content, your changes save automatically a moment after you stop typing — there's no Save button, and the status bar at the bottom confirms each save. Click back to the Pages tab and open any page whenever you're ready to return to normal editing, and the toolbar comes back with it.

Live preview

The preview pane keeps working while you edit, so you can see the effect of a change as you make it:

• Styles — change a color, a font size, or a margin and the preview updates almost instantly. Background images and fonts referenced from your elements/ or assets/ folders show up too.
• Templates — edit your header, navigation wrapper, or footer and the preview re-renders with your change.

The preview shows the last page you had open (or your home page, if you haven't opened one yet), and it stays at whatever scroll position you were at, so you can keep your place while you work.

When the preview is dimmed

Sometimes the preview can't show what you're editing. In those cases it fades out and an amber note appears at the top of the preview pane explaining why, so you're never left wondering why a change didn't appear:

• The previewed page uses a different template. If you open template-docs.html but the page being previewed uses template.html, your edit has nothing to change in that preview. The note reads something like "Not previewing template-docs.html — index.html uses template.html." Open a page that does use the template you're editing (click the Pages tab, then the page), then go back to the Templates tab to see your changes live.
• You're editing a script. JavaScript can't run inside the preview pane, so the preview is dimmed with a note saying so. Check script changes on your published site, or use Render to Local Folder and open the result in a regular browser tab. (This is the same limitation described for Lists and animated images.)

The dimmed preview is still scrollable if you want to look at the page anyway — it's just a signal that it isn't reflecting your edits.

Turning it off

Uncheck Enable template, style & script editing in Site Settings and save. If one of these files was open, WebHaste saves it first, then closes it, and the tabs disappear. Your files aren't changed by turning the feature on or off.

Good to know

• A template change affects every page that uses it. A mistake in the template — an unclosed tag, a deleted {{CONTENT}} placeholder — can break the whole site, and since changes save as you type, there's no "discard" button. If your project is in a git repository (recommended), commit before making big changes so you can roll back. Ctrl+Z works while the file is still open.
• Error checking is limited. Templates get a warning marker in the margin for unclosed or mismatched HTML tags, the same as page code view. CSS and JavaScript files get syntax coloring and bracket matching, but no error checking.
• Shared folders are protected. If a file is changed somewhere else while you have it open (another device or browser tab on a Dropbox or Google Drive folder, say), WebHaste asks whether to keep your version or load the newer one, exactly as it does for pages.
• Tailwind sites: if your site uses Tailwind, scripts/styles.css is generated by the npm run build:css build step, so edits made to it here are overwritten the next time that runs. Put hand-written CSS in scripts/custom.css instead — that file isn't touched by the build.
• New files: these tabs edit files that already exist. To add a new template or stylesheet, create the file in your project folder (.webhaste/templates/ or scripts/) and it shows up in the matching tab the next time you click that tab.

Looking for a real-world example of editing a template? Searchable, Sortable Tables with DataTables walks through adding a library to your template's <head> using these tabs.