diff --git a/src/lib/titled-hoc.jsx b/src/lib/titled-hoc.jsx
index a54d5c18e..a557d965e 100644
--- a/src/lib/titled-hoc.jsx
+++ b/src/lib/titled-hoc.jsx
@@ -34,13 +34,15 @@ const TitledHOC = function (WrappedComponent) {
             if (this.props.isShowingWithoutId && prevProps.isAnyCreatingNewState) {
                 // reset title to default
                 const defaultProjectTitle = this.handleReceivedProjectTitle();
-                this.props.onUpdateProjectTitle(defaultProjectTitle);
+                // tw: inform callback whether this title is a default title like "Project"
+                this.props.onUpdateProjectTitle(defaultProjectTitle, true);
             }
             // if the projectTitle hasn't changed, but the reduxProjectTitle
             // HAS changed, we need to report that change to the projectTitle's owner
             if (this.props.reduxProjectTitle !== prevProps.reduxProjectTitle &&
                 this.props.reduxProjectTitle !== this.props.projectTitle) {
-                this.props.onUpdateProjectTitle(this.props.reduxProjectTitle);
+                // tw: inform callback whether this title is a default title like "Project"
+                this.props.onUpdateProjectTitle(this.props.reduxProjectTitle, false);
             }
         }
         handleReceivedProjectTitle (requestedTitle) {
diff --git a/src/lib/tw-project-meta-fetcher-hoc.jsx b/src/lib/tw-project-meta-fetcher-hoc.jsx
index f38dcec69..8d59a9762 100644
--- a/src/lib/tw-project-meta-fetcher-hoc.jsx
+++ b/src/lib/tw-project-meta-fetcher-hoc.jsx
@@ -18,9 +18,6 @@ const fetchProjectMeta = projectId => fetch(API_URL.replace('$id', projectId))
 
 const TWProjectMetaFetcherHOC = function (WrappedComponent) {
     class ProjectMetaFetcherComponent extends React.Component {
-        componentDidMount () {
-            this.initialTitle = document.title;
-        }
         shouldComponentUpdate (nextProps) {
             return this.props.projectId !== nextProps.projectId;
         }
@@ -29,7 +26,6 @@ const TWProjectMetaFetcherHOC = function (WrappedComponent) {
             this.props.onSetAuthor('', '');
             this.props.onSetDescription('', '');
             const projectId = this.props.projectId;
-            document.title = this.initialTitle;
             // Don't try to load metadata for empty projects.
             if (projectId === '0') {
                 return;
@@ -42,7 +38,6 @@ const TWProjectMetaFetcherHOC = function (WrappedComponent) {
                     }
                     const title = data.title;
                     if (title) {
-                        document.title = `${title} - TurboWarp`;
                         this.props.onSetProjectTitle(title);
                     }
                     const authorName = data.author.username;
diff --git a/src/playground/render-interface.jsx b/src/playground/render-interface.jsx
index 5e25138d9..1605cd092 100644
--- a/src/playground/render-interface.jsx
+++ b/src/playground/render-interface.jsx
@@ -68,6 +68,15 @@ const handleLoadAddons = () => {
     import(/* webpackChunkName: "addons" */ '../addons/entry');
 };
 
+const initialTitle = document.title;
+const handleUpdateProjectTitle = (title, isDefault) => {
+    if (isDefault) {
+        document.title = initialTitle;
+    } else {
+        document.title = `${title} - TurboWarp`;
+    }
+};
+
 const WrappedMenuBar = compose(
     SBFileUploaderHOC
 )(MenuBar);
@@ -96,6 +105,7 @@ const Interface = ({
                 <GUI
                     onClickAddonSettings={handleClickAddonSettings}
                     onLoadAddons={handleLoadAddons}
+                    onUpdateProjectTitle={handleUpdateProjectTitle}
                     onClickTheme={onClickTheme}
                 />
                 {isHomepage ? (