---
title: Code editor and versions
description: Edit theme code safely and roll back if something breaks.
canonical_url: https://housingstreet.com/help/website/editor-and-versions
md_url: https://housingstreet.com/help/website/editor-and-versions.md
last_updated: 2026-07-13
status: ga
relatedRoutes: ["/website/editor","/website/customize","/website/versions"]
---

## What this is [#what-this-is]

HousingStreet gives you two related tools:

* The **code editor** — change theme files (templates, CSS, sections) with a live preview. Saves are **drafts** until you publish.

* **Version history** — snapshots of your theme. Roll back if an edit breaks your site.

<UiPath path="Website → Code editor · Website → Version history · Website → Customize" />

<DocScreenshot src="/help-media/website/code-editor.png" alt="Theme code editor with file tree, syntax highlighting, and live preview" caption="Edit theme files safely as drafts" />

## Steps — code editor [#steps--code-editor]

Use the code editor when you need to change Liquid templates, CSS, or section files directly.

<Steps>
  <Step title="Open the editor">
    Go to **Website → Code editor** (`/website/editor`). You need an active theme installed first.
  </Step>

  <Step title="Pick a file">
    Use the file tree on the left. Click a template, stylesheet, or section file. The editor opens with syntax highlighting.
  </Step>

  <Step title="Edit and save a draft">
    Make your changes. Save the file — HousingStreet stores it as a **draft**. Drafts do not affect visitors yet. The live preview panel shows draft changes when available.
  </Step>

  <Step title="Publish to go live">
    Click **Publish** (or **Set as live**) in the editor toolbar. Visitors now see your changes on the storefront.
  </Step>

  <Step title="Optional — fork as new theme">
    Use **Save as new theme** to duplicate your work into a separate theme copy without overwriting the live one.
  </Step>
</Steps>

Prefer clicking instead of coding? Use **Website → Customize** for colors, fonts, and section settings without touching code.

## Steps — version history [#steps--version-history]

Version history is separate from the editor. It is your undo button for the whole theme.

<DocScreenshot src="/help-media/website/version-history.png" alt="Version history timeline with dates, authors, and Rollback button" caption="Snapshots you can restore" />

<Steps>
  <Step title="Open version history">
    Go to **Website → Version history** (`/website/versions`). You see the active theme name and how many snapshots exist.
  </Step>

  <Step title="Review a snapshot">
    Scroll the timeline. Each entry shows version number, date, and who saved it. Click **View changes** to compare files against the current version.
  </Step>

  <Step title="Roll back">
    Find the good snapshot. Click **Rollback to this version**. Confirm. HousingStreet saves your current files as a new version, then restores the older one.
  </Step>

  <Step title="Check the storefront">
    Open your website in a new tab. If something still looks wrong, pick an earlier snapshot and roll back again.
  </Step>

  <Step title="Export or import (optional)">
    Use **Export Current** to download a theme package. Use **Import Version** to upload a `.zip` — imports create a new inactive theme you can review before going live.
  </Step>
</Steps>

## Code editor vs version history [#code-editor-vs-version-history]

\| | Code editor | Version history |

\|---|-------------|-----------------|

\| **Purpose** | Edit individual files | Undo the whole theme |

\| **Path** | Website → Code editor | Website → Version history |

\| **Saves** | Draft per file, then Publish | Automatic snapshot on publish |

\| **Best for** | Small CSS or template tweaks | Recovering from a bad publish |

## Expected result [#expected-result]

You can make deeper design changes without fear. A broken edit is fixable in one rollback from version history. Day-to-day tweaks flow: edit → save draft → preview → publish.

<RelatedAdminLink href="/website/editor" label="Open code editor" />

<RelatedAdminLink href="/website/versions" label="Open version history" />