diff --git a/editor/src/messages/input_mapper/input_mappings.rs b/editor/src/messages/input_mapper/input_mappings.rs
index 2d9669a355..0097d4a4f7 100644
--- a/editor/src/messages/input_mapper/input_mappings.rs
+++ b/editor/src/messages/input_mapper/input_mappings.rs
@@ -339,6 +339,7 @@ pub fn input_mappings(zoom_with_scroll: bool) -> Mapping {
 		//
 		// DocumentMessage
 		entry!(KeyDown(Space); modifiers=[Control], action_dispatch=DocumentMessage::GraphViewOverlayToggle),
+		entry!(KeyDown(KeyQ); action_dispatch=DocumentMessage::ToggleDocumentMode),
 		entry!(KeyDownNoRepeat(Escape); action_dispatch=DocumentMessage::Escape),
 		entry!(KeyDown(Delete); action_dispatch=DocumentMessage::DeleteSelectedLayers),
 		entry!(KeyDown(Backspace); action_dispatch=DocumentMessage::DeleteSelectedLayers),
diff --git a/editor/src/messages/portfolio/document/document_message.rs b/editor/src/messages/portfolio/document/document_message.rs
index 49fadb6a74..db9cff6f09 100644
--- a/editor/src/messages/portfolio/document/document_message.rs
+++ b/editor/src/messages/portfolio/document/document_message.rs
@@ -6,7 +6,7 @@ use crate::messages::input_mapper::utility_types::input_keyboard::Key;
 use crate::messages::portfolio::document::data_panel::DataPanelMessage;
 use crate::messages::portfolio::document::overlays::utility_types::{OverlayContext, OverlaysType};
 use crate::messages::portfolio::document::utility_types::document_metadata::LayerNodeIdentifier;
-use crate::messages::portfolio::document::utility_types::misc::{AlignAggregate, AlignAxis, FlipAxis, GridSnapping};
+use crate::messages::portfolio::document::utility_types::misc::{AlignAggregate, AlignAxis, DocumentMode, FlipAxis, GridSnapping};
 use crate::messages::portfolio::utility_types::PanelType;
 use crate::messages::prelude::*;
 use glam::{DAffine2, IVec2};
@@ -189,6 +189,17 @@ pub enum DocumentMessage {
 	SetRenderMode {
 		render_mode: RenderMode,
 	},
+	ToggleDocumentMode,
+	SetDocumentMode {
+		document_mode: DocumentMode,
+	},
+	EnterMaskMode,
+	ExitMaskMode {
+		discard: bool,
+	},
+	DrawMarchingAntsOverlay {
+		context: OverlayContext,
+	},
 	AddTransaction,
 	StartTransaction,
 	EndTransaction,
diff --git a/editor/src/messages/portfolio/document/document_message_handler.rs b/editor/src/messages/portfolio/document/document_message_handler.rs
index 8654fbdfec..5ae788d604 100644
--- a/editor/src/messages/portfolio/document/document_message_handler.rs
+++ b/editor/src/messages/portfolio/document/document_message_handler.rs
@@ -19,7 +19,7 @@ use crate::messages::portfolio::document::overlays::grid_overlays::{grid_overlay
 use crate::messages::portfolio::document::overlays::utility_types::{OverlaysType, OverlaysVisibilitySettings, Pivot};
 use crate::messages::portfolio::document::properties_panel::properties_panel_message_handler::PropertiesPanelMessageContext;
 use crate::messages::portfolio::document::utility_types::document_metadata::{DocumentMetadata, LayerNodeIdentifier};
-use crate::messages::portfolio::document::utility_types::misc::{AlignAggregate, AlignAxis, FlipAxis, PTZ};
+use crate::messages::portfolio::document::utility_types::misc::{AlignAggregate, AlignAxis, DocumentMode, FlipAxis, PTZ};
 use crate::messages::portfolio::document::utility_types::network_interface::{FlowType, InputConnector, NodeTemplate};
 use crate::messages::portfolio::utility_types::{PanelType, PersistentData};
 use crate::messages::prelude::*;
@@ -116,6 +116,9 @@ pub struct DocumentMessageHandler {
 	/// The name of the document, which is displayed in the tab and title bar of the editor.
 	#[serde(skip)]
 	pub name: String,
+	/// The current editor-only mode for the active document.
+	#[serde(skip)]
+	pub document_mode: DocumentMode,
 	/// The path of the to the document file.
 	#[serde(skip)]
 	pub(crate) path: Option<PathBuf>,
@@ -174,6 +177,7 @@ impl Default for DocumentMessageHandler {
 			// Fields omitted from the saved document format
 			// =============================================
 			name: DEFAULT_DOCUMENT_NAME.to_string(),
+			document_mode: DocumentMode::default(),
 			path: None,
 			breadcrumb_network_path: Vec::new(),
 			selection_network_path: Vec::new(),
@@ -1115,6 +1119,32 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 				self.render_mode = render_mode;
 				responses.add_front(NodeGraphMessage::RunDocumentGraph);
 			}
+			DocumentMessage::ToggleDocumentMode => {
+				self.document_mode = match self.document_mode {
+					DocumentMode::MaskMode => DocumentMode::DesignMode,
+					_ => DocumentMode::MaskMode,
+				};
+				responses.add(PortfolioMessage::UpdateDocumentWidgets);
+			}
+			DocumentMessage::SetDocumentMode { document_mode } => {
+				if self.document_mode != document_mode {
+					self.document_mode = document_mode;
+					responses.add(PortfolioMessage::UpdateDocumentWidgets);
+				}
+			}
+			DocumentMessage::EnterMaskMode => {
+				if self.document_mode != DocumentMode::MaskMode {
+					self.document_mode = DocumentMode::MaskMode;
+					responses.add(PortfolioMessage::UpdateDocumentWidgets);
+				}
+			}
+			DocumentMessage::ExitMaskMode { discard: _ } => {
+				if self.document_mode != DocumentMode::DesignMode {
+					self.document_mode = DocumentMode::DesignMode;
+					responses.add(PortfolioMessage::UpdateDocumentWidgets);
+				}
+			}
+			DocumentMessage::DrawMarchingAntsOverlay { context: _ } => {}
 			DocumentMessage::AddTransaction => {
 				// Reverse order since they are added to the front
 				responses.add_front(DocumentMessage::CommitTransaction);
@@ -1470,6 +1500,8 @@ impl MessageHandler<DocumentMessage, DocumentMessageContext<'_>> for DocumentMes
 			SaveDocument,
 			SelectAllLayers,
 			SetSnapping,
+			ToggleDocumentMode,
+			SetDocumentMode,
 			ToggleGridVisibility,
 			ToggleOverlaysVisibility,
 			ToggleSnapping,
diff --git a/editor/src/messages/portfolio/document/utility_types/misc.rs b/editor/src/messages/portfolio/document/utility_types/misc.rs
index 30e6a1e013..0f314acf04 100644
--- a/editor/src/messages/portfolio/document/utility_types/misc.rs
+++ b/editor/src/messages/portfolio/document/utility_types/misc.rs
@@ -29,23 +29,26 @@ pub enum AlignAggregate {
 	Center,
 }
 
-// #[derive(Default, PartialEq, Eq, Clone, Copy, Debug, serde::Serialize, serde::Deserialize)]
-// pub enum DocumentMode {
-// 	#[default]
-// 	DesignMode,
-// 	SelectMode,
-// 	GuideMode,
-// }
+#[cfg_attr(feature = "wasm", derive(tsify::Tsify))]
+#[derive(Default, PartialEq, Eq, Clone, Copy, Debug, serde::Serialize, serde::Deserialize)]
+pub enum DocumentMode {
+	#[default]
+	DesignMode,
+	SelectMode,
+	GuideMode,
+	MaskMode,
+}
 
-// impl fmt::Display for DocumentMode {
-// 	fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
-// 		match self {
-// 			DocumentMode::DesignMode => write!(f, "Design Mode"),
-// 			DocumentMode::SelectMode => write!(f, "Select Mode"),
-// 			DocumentMode::GuideMode => write!(f, "Guide Mode"),
-// 		}
-// 	}
-// }
+impl fmt::Display for DocumentMode {
+	fn fmt(&self, f: &mut fmt::Formatter<'_>) -> fmt::Result {
+		match self {
+			DocumentMode::DesignMode => write!(f, "Design Mode"),
+			DocumentMode::SelectMode => write!(f, "Select Mode"),
+			DocumentMode::GuideMode => write!(f, "Guide Mode"),
+			DocumentMode::MaskMode => write!(f, "Mask Mode"),
+		}
+	}
+}
 
 // impl DocumentMode {
 // 	pub fn icon_name(&self) -> String {