v1.5.0

HTMLStudio documentation

HTMLStudio is a workspace for building, managing and deploying static HTML websites. Edit pages visually or in code, manage collections of articles, and publish to GitHub or any static host.

1. Create a siteName it, add pages 2. EditVisually or in code 3. Add a blogCollections & articles 4. Build & deployPush to GitHub

Get started

  1. Sign in to your HTMLStudio account (the Settings page shows Signed in as your username).
  2. Open the Dashboard (grid icon, top of the left rail) to see your projects.
  3. Open Sites (globe icon) to create a new site or open an existing one.
  4. Use the lower icons for Billing (receipt icon) and Settings (gear icon). The app version appears under the gear.

The typical flow is: create a site → add or paste pages → edit → add a collection → check links → build → deploy.

Create a site

  1. Go to Sites and choose to create a new site.
  2. Enter a site name. It must not contain spaces (for example mybusiness).
  3. Add content: create a page in the Explorer, or paste existing HTML into a new page.
  4. Optionally open Site settings to set your domain, and connect GitHub for deployment.
Site names are used for backups, builds and the GitHub repository, so choose a short, stable name.

The workspace

Opening a site shows three areas: the sidebar on the left, the editor in the centre, and the toolbar along the top.

The HTMLStudio workspace
Visual editor with Explorer, GitHub and Builds in the sidebar and the toolbar on top.

Sidebar

AreaWhat it does
ExplorerBrowse files and folders (articles, assets, images, index.html…). Icons let you refresh, create pages or collections, create folders, open the media library and upload files.
GitHubShows the connected repo and branch, for example owner/site · main. The gear opens the repository settings.
BuildsHistory of builds with age, size and the commit pushed.
Site gearThe gear beside the site name opens Site settings.

Top bar

ButtonPurpose
Check LinksLists every link and lets you fix them in bulk.
PreviewOpens a preview of the site.
BuildGenerates the deployable site and pushes it to GitHub.
SaveSaves the current file. An unsaved label and a dot on the tab show pending changes.

Open files appear as tabs. The Code / Visual switch, undo/redo, Interact and the phone, tablet and desktop buttons sit above the editor.

Pages

Create a page

  1. Click the new file icon in the Explorer toolbar.
  2. Name the file, for example contact.html.
  3. Edit it in Visual or Code mode, then press Save.

Organise files

  • Use the new folder icon to group files.
  • Use the upload icon to add files from your computer.
  • Click the refresh icon to reload the file list.

Shared header and footer

Files named header-template.html and footer-template.html hold reusable blocks. Pages include them through the Page settings options.

Page settings

Open a page’s settings to control its search and layout metadata.

Page settings dialog
Page settings: title, description, keywords, header and footer.
FieldDescription
TitleThe page <title>, shown in browser tabs and search results.
DescriptionMeta description used by search engines.
KeywordsComma-separated meta keywords.
Include headerInsert the shared header template into this page.
Include footerInsert the shared footer template into this page.

Click Save to apply, or Cancel to discard.

Visual editing

  1. Switch to the Visual tab to see the rendered page.
  2. Hover an element: a dashed outline appears with a small edit (pencil) button. Links also show a link button.
  3. Click the pencil to edit text; click the link button to change its URL.
  4. Press Save. Use undo/redo at any time.

Interact mode

Turn on Interact to click through buttons, menus and links inside the preview as a visitor would, without selecting elements.

Responsive preview

Use the phone, tablet and desktop icons to check how the page looks at different widths.

Code editing

The Code tab shows the page source with line numbers and syntax highlighting. Edits sync with the Visual tab; unsaved files show a dot on their tab. Use it for structure, scripts, styles and anything the visual editor can’t reach.

Code editor
Code tab with line numbers and syntax highlighting.

Media library

Open it from the Explorer toolbar (images icon).

Media library
Media library with uploads and copyable URLs.
  1. Upload: drop files in the dashed area or click Choose files. Uploads go to the root folder unless you choose otherwise.
  2. Copy URL: each file lists its name, size, folder (for example /images) and a hosted URL. Click the copy icon to use it in code.
  3. Delete: the red bin removes the file.

Insert an image while editing

The Choose image dialog has three tabs: Media library (pick an existing image), Upload and URL. Add Alt text for accessibility, then click Use image.

Choose image dialog
Choose image dialog with Media library, Upload and URL tabs.
In article templates, alt text can contain placeholders such as <htmlstudio-article-title/>, replaced by each article’s title at build time.

Collections

A collection is a set of similar entries, such as a blog, posts or news.

  1. Click the create collection icon in the Explorer toolbar.
  2. Enter a Collection name with no spaces (blog, posts, news).
  3. Choose the article fields.
  4. Click Create collection.
Create collection dialog
Create article collection dialog.
FieldNotes
titlerequired
contentrequired
dateOptional
authorOptional
excerptOptional short summary
featured-imageOptional cover image

HTMLStudio creates a folder named after the collection containing:

  • article-template.html – layout of a single article
  • articles-template.html – layout of the article list
  • index.html – auto-generated listing

Customise the templates to match your site’s design.

Articles

  1. Open the collection folder (for example articles) in the Explorer.
  2. Choose New article.
  3. Enter a Title.
  4. Write the Content in the rich-text editor.
  5. Fill any extra fields your collection has, then click Save article.
New article dialog
New article dialog with the rich-text editor.

Editor toolbar

  • Undo/redo, paragraph, headings H1–H3
  • Bold, italic, underline, strikethrough, inline code
  • Bulleted and numbered lists, quote, code block, divider
  • Left, centre and right alignment, indent
  • Insert or remove link, insert image (opens the media chooser)
  • Font family, text colour and clear formatting

Blog creation: step by step

  1. Create the collection named blog with title, content, date, excerpt, author and featured-image.
  2. Style the templates: edit article-template.html and articles-template.html with your header, footer and CSS.
  3. Write posts with New article, adding images from the media library.
  4. Link to the blog from your navigation, for example <a href="/blog/">Blog</a>.
  5. Run Check Links, then Build. The listing page is regenerated automatically.

Site settings

Click the gear next to the site name.

Site settings dialog
Site settings: domain, sitemap option and client access.
SettingDescription
Site nameNo spaces.
Domain (optional)Your public domain, such as example.com. Used to build absolute URLs in sitemap.xml.
Exclude .html extension in sitemapWhen on, /contact.html becomes /contact and /index.html becomes /.

Click Save to apply.

Client access

Let a client edit pages and articles, then publish, without access to your whole account.

  1. In Site settings, find Client access.
  2. Set a Username and a New password (leave blank to keep the current one).
  3. Tick Enable client access.
  4. Click Update client access, then Copy the access link and send it with the login.

Click Remove to revoke access.

Treat the access link and password like credentials. Anyone with both can edit and publish the site.

GitHub

Connect a repository so builds are pushed automatically. Click the gear in the sidebar’s GitHub section.

GitHub repository dialog
GitHub repository settings.
  1. Install and authorise the HTMLStudio GitHub app. The dialog shows the account it’s installed on and the authorised user.
  2. Enter the Repo name. It’s created automatically if it doesn’t exist.
  3. Set the Branch (usually main).
  4. Optionally set a Subdir (such as dist) to push the build into a subfolder.
  5. Toggle Private repo as needed, then click Save.

Use Disconnect to unlink the repository, or change account to switch GitHub accounts.

Build & deploy

  1. Save all open files.
  2. Run Check Links and fix issues.
  3. Click Preview to review the result.
  4. Click Build. HTMLStudio generates the site, including sitemap.xml and collection listings, and pushes it to your GitHub branch.
  5. Follow progress and history in the Builds panel: each entry shows its name, age, size and pushed commit.

Deploying

Point any static host (GitHub Pages, Netlify, Cloudflare Pages, Vercel) at the repository and branch (and subdirectory, if set). Each new build triggers a fresh deployment. Set your Domain in Site settings so sitemap URLs are correct.

Backups & download

Open Settings (gear icon) → Backups.

Backups settings
Settings → Backups: create, download and delete site backups.
  1. Under Your sites, click Create backup next to a site.
  2. The snapshot appears under Existing backups with a timestamp and size.
  3. Click Download to save it, or Delete to remove it.

A backup contains pages, HTML, file metadata, collection config and the sitemap. Build artifacts are not included. Backups are stored on HTMLStudio servers and tied to your account.

Create a backup before large changes, template rewrites or handing the site to a client.

Local cache

Your sites live on the server, and your browser keeps a local copy for faster editing. Clear local cache (Settings) removes only that copy; server data is untouched and re-downloads on next use. Try it if the editor shows stale content.

Account

The Account card in Settings shows who you’re signed in as and provides Log out. Billing is available from the receipt icon in the left rail.