diff --git a/src/Previewer/Previewer.js b/src/Previewer/Previewer.js
index b95ec9e7e..2c3acbeba 100644
--- a/src/Previewer/Previewer.js
+++ b/src/Previewer/Previewer.js
@@ -123,11 +123,13 @@ export default function Previewer({
     let text = panel_ui.xml.trim();
     let target_id;
     let tree;
+    // let template;
 
     try {
       tree = ltx.parse(text);
       [target_id, text] = targetBuildable(tree);
     } catch (err) {
+      logError(err);
       logger.debug(err);
     }
 
@@ -247,6 +249,34 @@ export function scopeStylesheet(style) {
   return str;
 }
 
+function getTemplate(tree) {
+  const template = tree.getChild("template");
+  if (!template) return;
+
+  const { parent } = template.attrs;
+  if (!parent) return;
+
+  const klass = getObjectClass(parent);
+  if (!klass) return;
+
+  const object = new klass();
+  if (!(object instanceof Gtk.Widget)) return;
+
+  tree.remove(template);
+
+  const el = new ltx.Element("object", {
+    class: parent,
+    id: "workbench_target",
+  });
+  template.children.forEach((child) => {
+    el.cnode(child);
+  });
+
+  tree.cnode(el);
+
+  return [el.attrs.id, tree.toString()];
+}
+
 function findPreviewable(tree) {
   for (const child of tree.getChildren("object")) {
     const class_name = child.attrs.class;
@@ -271,6 +301,9 @@ function getObjectClass(class_name) {
 }
 
 function targetBuildable(tree) {
+  const template = getTemplate(tree);
+  if (template) return template;
+
   const child = findPreviewable(tree);
   if (!child) {
     return [null, ""];