diff --git a/panels_ipe/css/panels_ipe.css b/panels_ipe/css/panels_ipe.css
new file mode 100644
index 0000000..2a58bad
--- /dev/null
+++ b/panels_ipe/css/panels_ipe.css
@@ -0,0 +1,530 @@
+/**
+ * @file
+ * Contains all CSS for the Panels In-Place Editor.
+ */
+
+/* Define our icon font, which is generated from the SVGs in /images. */
+@font-face {
+  font-family: PanelsIPEIcon;
+  src: url(../fonts/ipeicons.woff);
+}
+
+.ipe-icon {
+  display:inline-block;
+  vertical-align: middle;
+  font-family: PanelsIPEIcon;
+  font-size: 24px;
+}
+
+.ipe-action-list .ipe-icon {
+  height: 24px;
+  margin-top: -10px;
+  display: block;
+}
+
+.ipe-icon.ipe-icon-up:before {
+  content: "\e900";
+}
+
+.ipe-icon.ipe-icon-down:before {
+  content: "\e901";
+}
+
+.ipe-icon.ipe-icon-warning:before {
+  content: "\e902";
+}
+
+.ipe-icon.ipe-icon-change_layout:before {
+  content: "\e903";
+}
+
+.ipe-icon.ipe-icon-edit:before {
+  content: "\e904";
+}
+
+.ipe-icon.ipe-icon-manage_content:before {
+  content: "\e905";
+}
+
+.ipe-icon.ipe-icon-save:before {
+  content: "\e906";
+}
+
+.ipe-icon.ipe-icon-loading:before {
+  content: "\e907";
+  animation: ipe-spin 1s infinite linear;
+}
+
+.ipe-icon.ipe-icon-remove:before {
+  content: "\e908";
+}
+
+.ipe-icon.ipe-icon-configure:before {
+  content: "\e909";
+}
+
+.ipe-icon.ipe-icon-cancel:before {
+  content: "\e90a";
+}
+
+.ipe-icon.ipe-icon-configure {
+  font-size: 20px;
+}
+
+@keyframes ipe-spin {
+  from {transform:rotate(360deg);}
+  to {transform:rotate(0deg);}
+}
+
+/* Fix the output of the AppView to the bottom of the screen. */
+#panels-ipe-tray {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  left: 0;
+  text-align: center;
+}
+
+/* Force text to render as a sans-serif web-safe font. */
+#panels-ipe-tray, #panels-ipe-tray a, #panels-ipe-tray p {
+  font-family: Arial, Helvetica, sans-serif;
+  margin: 0;
+}
+
+/* Remove list styling from the output of the TabsView. */
+.ipe-tabs {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Display tabs inline and slightly on top of .ipe-tabs-content. */
+.ipe-tab {
+  overflow: hidden;
+  position: relative;
+  display: inline-block;
+  vertical-align: bottom;
+  padding: 10px 5px 12px 5px;
+  margin-bottom: -1px;
+  background-color: white;
+  border-top: 1px solid darkgray;
+  border-bottom: 1px solid darkgray;
+  transition: border-color .2s;
+}
+
+.ipe-tab:hover, .ipe-tab.active {
+  border-bottom: 3px solid rgb(67, 125, 33);
+  padding-bottom: 10px;
+}
+
+/* Indicate the cancel button. */
+[data-tab-id="cancel"]:hover, [data-tab-id="cancel"].active {
+  border-bottom: 3px solid #7D0000;
+  padding-bottom: 10px;
+}
+
+/* Indicate unsaved changes. */
+#panels-ipe-tray.unsaved [data-tab-id="save"]:after {
+  content: "*";
+  font-size: 20px;
+  color: #7D0000;
+  position: absolute;
+  top: 5px;
+  right: 0;
+}
+
+.ipe-tab:first-child {
+  border-left: 1px solid darkgray;
+  border-top-left-radius: 5px;
+}
+
+.ipe-tab:last-child {
+  border-right: 1px solid darkgray;
+  border-top-right-radius: 5px;
+}
+
+.ipe-tab a {
+  color: black;
+  height: 30px;
+  display: block;
+  text-transform: uppercase;
+  vertical-align: top;
+  border: none;
+  cursor: pointer;
+  transition: .2s;
+}
+
+.ipe-tab.active a, .ipe-tab a:hover {
+  color: rgb(67, 125, 33);
+  border: none;
+}
+
+
+/* Indicate the cancel button. */
+[data-tab-id="cancel"] a:hover, [data-tab-id="cancel"].active a {
+  color: #7D0000;
+  border: none;
+}
+
+.ipe-tab a::selection {
+  background: none;
+}
+
+/* Provide default styles and a minimum height for tab content. */
+.ipe-tab-content {
+  display: none;
+  min-height: 100px;
+  padding: 20px 5px 10px 5px;
+  background-color: white;
+  border-top: 1px solid darkgray;
+}
+
+.ipe-tab-content.active {
+  display: block;
+}
+
+/* Don't show text for these tabs */
+[data-tab-id="save"] .ipe-tab-title,
+[data-tab-id="edit"] .ipe-tab-title,
+[data-tab-id="cancel"] .ipe-tab-title {
+  display: none;
+}
+
+/* Styles for the Layout selector. */
+.ipe-current-layout, .ipe-all-layouts {
+  display: inline-block;
+}
+
+.ipe-current-layout {
+  vertical-align: top;
+  padding-right: 10px;
+}
+
+/* Remove <ul> list styling and make list scrollable. */
+.ipe-layouts {
+  vertical-align: top;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  white-space: nowrap;
+  overflow-x: auto;
+}
+
+/* Show layouts as clickable things. */
+.ipe-layout {
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 5px;
+}
+
+.ipe-layout-title {
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
+/* Hide the tray for the edit and save tabs. */
+[data-tab-content-id="edit"].active,
+[data-tab-content-id="save"].active,
+[data-tab-content-id="cancel"].active {
+  display: none;
+}
+
+/* Style the block/region headers. */
+div.ipe-actions {
+  display: flex;
+  justify-content: space-between;
+  min-height: 20px;
+  border-radius: 5px 5px 0 0;
+  background-color: rgb(222, 222, 222);
+  padding: 5px;
+  margin-top: 1px;
+  clear: both;
+}
+
+/* Indicate that blocks are draggable */
+div.ipe-actions-block {
+  cursor: move;
+  background-color: rgb(243, 243, 243);
+}
+
+.ipe-actions ul.ipe-action-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ipe-actions h5, .ipe-actions li {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: bold;
+  margin: 0;
+}
+
+.ipe-actions a {
+  color: black;
+  display: block;
+  text-transform: uppercase;
+  border: none;
+  cursor: pointer;
+  transition: .2s;
+}
+
+.ipe-actions a:hover {
+  color: #bebebe;
+  border: none;
+}
+
+.ipe-actions *::selection {
+  background: none;
+}
+
+.ipe-action-list li {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.ipe-action-list [data-action-id="move"] select {
+  background: transparent;
+  border: none;
+  text-transform: uppercase;
+}
+
+/* This is used for highlighting new content on screen. */
+.ipe-highlight {
+  animation: ipe-blink .4s ease-in-out 2;
+}
+
+@keyframes ipe-blink {
+  from, to {
+    box-shadow: 0 0 0 1px transparent;
+  }
+  50% {
+    box-shadow: 0 0 0 2px rgba(88, 160, 44, 0.70);
+  }
+}
+
+/* Drag/drop styles for blocks. */
+.ipe-droppable {
+  display: none;
+  width: 100%;
+  height: 30px;
+  margin: 5px 0 5px;
+  background-color: transparent;
+  border: 1px dashed #3c3c3c;
+  transition: .2s;
+}
+
+.ipe-droppable.active {
+  display: block;
+}
+
+.ipe-droppable.hover {
+  background-color: rgba(88, 160, 44, 0.70);
+  border-color: rgb(67, 125, 33);
+}
+
+/* Style the BlockPicker. */
+.ipe-block-picker-bottom {
+  overflow-x: scroll;
+  white-space: nowrap;
+  margin: auto;
+  padding: 20px 20px 0 20px;
+  min-height: 70px;
+}
+
+.ipe-block-picker-top {
+  display: none;
+}
+
+.ipe-block-picker-top.active {
+  display: block;
+  padding: 0 20px 20px 20px;
+  max-height: 100%;
+  border-bottom: 1px solid darkgray;
+}
+
+#panels-ipe-tray .ipe-block-category {
+  margin-right: 5px;
+}
+
+.ipe-block-category {
+  position: relative;
+  color: black;
+  display: inline-block;
+  padding: 10px;
+  text-transform: uppercase;
+  font-size: 15px;
+  font-weight: bold;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  transition: .2s;
+  cursor: pointer;
+}
+
+.ipe-block-category:hover,.ipe-block-category.active {
+  border-color: rgb(67, 125, 33);
+  color: inherit;
+}
+
+/* Indicate an active block category with an arrow. */
+.ipe-block-category.active:after {
+  bottom: 100%;
+  left: 50%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+
+.ipe-block-category.active:after {
+  border-color: transparent;
+  border-bottom-color: rgb(67, 125, 33);
+  border-width: 10px;
+  margin-left: -10px;
+}
+
+.ipe-block-category-count {
+  color: white;
+  background: black;
+  border-radius: 50%;
+  margin-left: 5px;
+  font-size: 10px;
+  height: 20px;
+  width: 20px;
+  line-height: 20px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.ipe-block-plugin {
+  text-transform: uppercase;
+  display: inline-block;
+  margin: 5px 20px 0 0;
+  text-align: left;
+  position: relative;
+}
+
+.ipe-block-plugin-info {
+  display: inline-block;
+}
+
+.ipe-block-plugin h5 {
+  font-size: 14px;
+  font-weight: bold;
+  margin: 0;
+}
+
+.ipe-block-plugin p {
+  font-size: 12px;
+}
+
+/* The "Add" button for Block Plugins. */
+.ipe-block-plugin a {
+  display: inline-block;
+  vertical-align: top;
+  font-size: 12px;
+  padding: 0 5px 0 5px;
+  border: 1px solid darkgray;
+  border-radius: 5px;
+  transition: .2s;
+  color: inherit;
+  cursor: pointer;
+}
+
+.ipe-block-plugin a:hover {
+  border-color: rgb(67, 125, 33);
+  color: inherit;
+}
+
+/* Theme the block plugin form */
+
+.ipe-block-picker-top h4 {
+  font-size: 16px;
+  text-transform: uppercase;
+  border-bottom: 1px solid darkgray;
+  padding: 5px;
+  margin: 0 0 10px 0;
+}
+
+.ipe-block-plugin-form {
+  text-align: left;
+  margin: 0 auto;
+  display: inline-block;
+}
+
+#panels-ipe-block-plugin-form-wrapper label {
+  display: inline-block;
+  text-transform: uppercase;
+  margin-right: 5px;
+}
+
+#panels-ipe-block-plugin-form-wrapper summary {
+  text-transform: uppercase;
+  background: transparent;
+}
+
+#panels-ipe-block-plugin-form-wrapper .ipe-icon-loading {
+  text-align: center;
+  width: 100%;
+}
+
+#panels-ipe-block-plugin-form-wrapper input[type="submit"] {
+  text-transform: uppercase;
+  margin: 0;
+  background: white;
+  color: black;
+  border-radius: 5px;
+  display: inline-block;
+  transition: .2s;
+}
+
+#panels-ipe-block-plugin-form-wrapper input[type="submit"]:hover {
+  border-color: rgb(67, 125, 33);
+  color: black;
+  background: white;
+}
+
+#panels-ipe-block-plugin-form-wrapper {
+  max-width: 650px;
+  padding-right: 10px;
+}
+
+/* Styles required to do the card-flip affect. */
+/* Credit to https://davidwalsh.name/css-flip for the original CSS. */
+.ipe-block-plugin-form .flip-container {
+  perspective: 1000;
+}
+/* flip the pane when hovered */
+.ipe-block-plugin-form.flipped .flipper, .ipe-block-plugin-form.flipped .flipper {
+  transform: rotateY(180deg);
+}
+
+/* flip speed goes here */
+.ipe-block-plugin-form .flipper {
+  transition: 0.6s;
+  transform-style: preserve-3d;
+  position: relative;
+}
+
+/* hide back of pane during swap */
+.ipe-block-plugin-form .front, .ipe-block-plugin-form .back {
+  backface-visibility: hidden;
+}
+
+/* front pane, placed above back */
+.ipe-block-plugin-form .front {
+  z-index: 2;
+  /* for firefox 31 */
+  transform: rotateY(0deg);
+}
+
+/* back, initially hidden pane */
+.ipe-block-plugin-form .back {
+  transform: rotateY(180deg);
+  position: absolute;
+  top: 0;
+  right: 0;
+}
diff --git a/panels_ipe/fonts/ipeicons.woff b/panels_ipe/fonts/ipeicons.woff
new file mode 100755
index 0000000000000000000000000000000000000000..f3624bdf39847f460a0007f358d8b300d13bca3f
GIT binary patch
literal 2208
zcma)7O>7%Q6n-;fdu_+DW8$@G35gw>IMkBUuCq23X&O}Iszhx?>AF>Epl)oEHi_LP
zu4ttkeB#gxpejJ59&+f(D{<n$p-7dQBL`H;RmBOxsp^3XAOzUvn_asND1uJ%=6&y*
zH}7X=cm3hXe4ZF#xVNa!(x>IT+c^2oghs^NSi2x4@Pf-Tzf!ycZV|TJcREsd@aaNv
zO>%c(OJ6Ai3(Ge?0Jlx#I4>pjvgeD%a<N3@ief!0#XXX^x(E{7S=b3F%ID&{#g*E1
zaO<$Aq-f+ixLlo=eqY0mN^y?6_)76Q^12@NI115wmEuYn-0#T!k(AB1JbzxPuGLUh
z{i&Y-5~9gIAtw>v<ln;n*w*X`Wta!{&cOzDS`yC?J@$%woqIGRAYiOBg_a{~%~lqm
zA*@L}gjsqGk%L}?_Tr>C{uo6cdpoU82ORc3CJVF9PZ39VhqZu-5rbF2ieht|D0k3G
z{Vf0ga0oIXh%d?BJuH%o<T!O`YI}Q%FG1hGKSc~aDtz9SK1@j}9>%xf02(AbI(7+y
zQs}=amQbgg`cX^F!(NH&8C924N;KN3c8XI0V@9O@YSs<IY&6h+9sBBH2FOEx8YCKw
z1!F<{$AYgiOnVq$of&P@5_^``1~c1IqhyJM)YegOD`rhhqGnuIPR+0+W7)|GHZ~eS
zoAoXBXsbQWfARTB{c+!ktrI`k4ExF#?=SfzBLfLCI!{pB1}fW2Bj`Ui>QaN5U`&r#
zC=|}bw5%SS9E)4^a<fedt$_UPeQ`~TvxjnS?_&?eh8Ay`+%OtiqGd{!8wsstaHC}+
zPwx!;^b$pTd3w>4VsuQO%x1K(8gj)4V|q;G%{Ey<3USSB>a(-DlzQ7>rkFvdhP6m$
z%dl7US!SB1?1__!o(%M);>L*SN<`O&IU*~OX{Jx6c|16p=E#>z`k5LU<{34YRI$y}
z=knu$!1SIWeQy2eKMd0pYQ16B$MbV~^w8eJ<L9-b>vMX`{1+j8Py?eT+Yl+dUk=$T
z`VpyCgBRFFp<vfoB30bRvvh*qg@>$bESZ~T6D-XF5UEpa)D>WUJd$J3uJ8!38VW}g
zKO14g>@Y;?*O`_*j0m|%7&<#P!JIo!QygNPvvV%tFdPBpaxf7ZU_N)l?PCL>MDVf_
z054qUp3A9yfBMXsX({Y8uiDqAdh^bJ`<CM5seaXcRq5+fuDZj%6n84O+yQ6)d3=`a
zfYWE}b1`r(Ce9^9F`Ub&ANPg}(x!1=xVS;Qp2=JiuW>|)a5{UtcH~Iy_Sv3pPHk>J
z{TE9+m!wPU?$bp8na_Tk=zH^<H{K6S{YrhfE{q2oKmYMe<7sN*X_DW1d~K|Oeb)C-
zUN44d_99uPoC5ZWZOd&AxY$A|tkt_>bhQcHgp?qLwabe$7^eO7CVr1@(wFojdy$=E
zm)UPTZDkA4c?6WBSCwUSCqH)B-7!+Y*_Z=g=wbn!?P3S;wJvtzms0Iw7x>vO_Tme1
zQ+}fz9x#5a*q8$^bg=+F)Wr_q^)7Z&n4(?m0)MKDy);R8F3ne0s?`czqIs&)3ZzPv
zLV0!VQneC2kls%PD$^>h!2t`1bAZycf7e~RlBdcG*OrT`NLogr*JzoFw7RQjzFMh8
z7s{3LYOz)>MK9in9-FToM{Q}!Te)k<zJM?ltD+*+piAH`(hbbVtOkzT4WLH(ef`hz
EH$!rHGynhq

literal 0
HcmV?d00001

diff --git a/panels_ipe/fonts/selection.json b/panels_ipe/fonts/selection.json
new file mode 100755
index 0000000..3913f34
--- /dev/null
+++ b/panels_ipe/fonts/selection.json
@@ -0,0 +1,301 @@
+{
+	"IcoMoonType": "selection",
+	"icons": [
+		{
+			"icon": {
+				"paths": [
+					"M512 85.333c-235.947 0-426.667 190.72-426.667 426.667s190.72 426.667 426.667 426.667 426.667-190.72 426.667-426.667-190.72-426.667-426.667-426.667zM725.333 665.173l-60.16 60.16-153.173-153.173-153.173 153.173-60.16-60.16 153.173-153.173-153.173-153.173 60.16-60.16 153.173 153.173 153.173-153.173 60.16 60.16-153.173 153.173 153.173 153.173z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"grid": 0,
+				"tags": [
+					"ic_cancel_black_24px"
+				]
+			},
+			"attrs": [],
+			"properties": {
+				"order": 13,
+				"id": 10,
+				"prevSize": 32,
+				"code": 59658,
+				"name": "ic_cancel_black_24px"
+			},
+			"setIdx": 0,
+			"setId": 3,
+			"iconIdx": 0
+		},
+		{
+			"icon": {
+				"paths": [
+					"M829.013 553.813c1.707-13.653 2.987-27.307 2.987-41.813s-1.28-28.16-2.987-41.813l90.027-70.4c8.107-6.4 10.24-17.92 5.12-27.307l-85.333-147.627c-5.12-9.387-16.64-12.8-26.027-9.387l-106.24 42.667c-22.187-17.067-46.080-31.147-72.107-41.813l-16.213-113.067c-1.28-10.24-10.24-17.92-20.907-17.92h-170.667c-10.667 0-19.627 7.68-20.907 17.92l-16.213 113.067c-26.027 10.667-49.92 25.173-72.107 41.813l-106.24-42.667c-9.813-3.84-20.907 0-26.027 9.387l-85.333 147.627c-5.547 9.387-2.987 20.907 5.12 27.307l90.027 70.4c-1.707 13.653-2.987 27.733-2.987 41.813s1.28 28.16 2.987 41.813l-90.027 70.4c-8.107 6.4-10.24 17.92-5.12 27.307l85.333 147.627c5.12 9.387 16.64 12.8 26.027 9.387l106.24-42.667c22.187 17.067 46.080 31.147 72.107 41.813l16.213 113.067c1.28 10.24 10.24 17.92 20.907 17.92h170.667c10.667 0 19.627-7.68 20.907-17.92l16.213-113.067c26.027-10.667 49.92-25.173 72.107-41.813l106.24 42.667c9.813 3.84 20.907 0 26.027-9.387l85.333-147.627c5.12-9.387 2.987-20.907-5.12-27.307l-90.027-70.4zM512 661.333c-82.347 0-149.333-66.987-149.333-149.333s66.987-149.333 149.333-149.333 149.333 66.987 149.333 149.333-66.987 149.333-149.333 149.333z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"grid": 0,
+				"tags": [
+					"ic_settings_black_24px"
+				]
+			},
+			"attrs": [],
+			"properties": {
+				"order": 12,
+				"id": 9,
+				"prevSize": 32,
+				"code": 59657,
+				"name": "ic_settings_black_24px"
+			},
+			"setIdx": 0,
+			"setId": 3,
+			"iconIdx": 1
+		},
+		{
+			"icon": {
+				"paths": [
+					"M810.667 554.667h-597.333v-85.333h597.333v85.333z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"grid": 0,
+				"tags": [
+					"ic_remove_black_24px"
+				]
+			},
+			"attrs": [],
+			"properties": {
+				"order": 6,
+				"id": 8,
+				"prevSize": 32,
+				"code": 59656,
+				"name": "ic_remove_black_24px"
+			},
+			"setIdx": 0,
+			"setId": 3,
+			"iconIdx": 2
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 170.667v-128l-170.667 170.667 170.667 170.667v-128c141.227 0 256 114.773 256 256 0 43.093-10.667 84.053-29.867 119.467l62.293 62.293c33.28-52.48 52.907-114.773 52.907-181.76 0-188.587-152.747-341.333-341.333-341.333zM512 768c-141.227 0-256-114.773-256-256 0-43.093 10.667-84.053 29.867-119.467l-62.293-62.293c-33.28 52.48-52.907 114.773-52.907 181.76 0 188.587 152.747 341.333 341.333 341.333v128l170.667-170.667-170.667-170.667v128z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"ic_sync_black_24px"
+				],
+				"grid": 0
+			},
+			"attrs": [],
+			"properties": {
+				"order": 10,
+				"id": 7,
+				"prevSize": 32,
+				"code": 59655,
+				"name": "ic_sync_black_24px"
+			},
+			"setIdx": 0,
+			"setId": 3,
+			"iconIdx": 3
+		},
+		{
+			"icon": {
+				"paths": [
+					"M512 341.333l-256 256 60.16 60.16 195.84-195.413 195.84 195.413 60.16-60.16z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"ic_expand_less_black_24px"
+				],
+				"grid": 0
+			},
+			"attrs": [],
+			"properties": {
+				"order": 9,
+				"id": 6,
+				"prevSize": 32,
+				"code": 59648,
+				"name": "ic_expand_less_black_24px"
+			},
+			"setIdx": 0,
+			"setId": 3,
+			"iconIdx": 4
+		},
+		{
+			"icon": {
+				"paths": [
+					"M707.84 366.507l-195.84 195.413-195.84-195.413-60.16 60.16 256 256 256-256z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"ic_expand_more_black_24px"
+				],
+				"grid": 0
+			},
+			"attrs": [],
+			"properties": {
+				"order": 6,
+				"id": 5,
+				"prevSize": 32,
+				"code": 59649,
+				"name": "ic_expand_more_black_24px"
+			},
+			"setIdx": 0,
+			"setId": 3,
+			"iconIdx": 5
+		},
+		{
+			"icon": {
+				"paths": [
+					"M42.667 896h938.667l-469.333-810.667-469.333 810.667zM554.667 768h-85.333v-85.333h85.333v85.333zM554.667 597.333h-85.333v-170.667h85.333v170.667z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"ic_warning_black_24px"
+				],
+				"grid": 0
+			},
+			"attrs": [],
+			"properties": {
+				"order": 5,
+				"id": 4,
+				"prevSize": 32,
+				"code": 59650,
+				"name": "ic_warning_black_24px"
+			},
+			"setIdx": 0,
+			"setId": 3,
+			"iconIdx": 6
+		},
+		{
+			"icon": {
+				"paths": [
+					"M128 554.667h341.333v-426.667h-341.333v426.667zM128 896h341.333v-256h-341.333v256zM554.667 896h341.333v-426.667h-341.333v426.667zM554.667 128v256h341.333v-256h-341.333z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"tab_change_layout"
+				],
+				"grid": 0
+			},
+			"attrs": [],
+			"properties": {
+				"order": 4,
+				"id": 3,
+				"prevSize": 32,
+				"code": 59651,
+				"name": "tab_change_layout"
+			},
+			"setIdx": 0,
+			"setId": 3,
+			"iconIdx": 7
+		},
+		{
+			"icon": {
+				"paths": [
+					"M128 736v160h160l471.893-471.893-160-160-471.893 471.893zM883.627 300.373c16.64-16.64 16.64-43.52 0-60.16l-99.84-99.84c-16.64-16.64-43.52-16.64-60.16 0l-78.080 78.080 160 160 78.080-78.080z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"tab_edit"
+				],
+				"grid": 0
+			},
+			"attrs": [],
+			"properties": {
+				"order": 3,
+				"id": 2,
+				"prevSize": 32,
+				"code": 59652,
+				"name": "tab_edit"
+			},
+			"setIdx": 0,
+			"setId": 3,
+			"iconIdx": 8
+		},
+		{
+			"icon": {
+				"paths": [
+					"M682.667 42.667h-512c-46.933 0-85.333 38.4-85.333 85.333v597.333h85.333v-597.333h512v-85.333zM810.667 213.333h-469.333c-46.933 0-85.333 38.4-85.333 85.333v597.333c0 46.933 38.4 85.333 85.333 85.333h469.333c46.933 0 85.333-38.4 85.333-85.333v-597.333c0-46.933-38.4-85.333-85.333-85.333zM810.667 896h-469.333v-597.333h469.333v597.333z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"tab_manage_content"
+				],
+				"grid": 0
+			},
+			"attrs": [],
+			"properties": {
+				"order": 4,
+				"id": 1,
+				"prevSize": 32,
+				"code": 59653,
+				"name": "tab_manage_content"
+			},
+			"setIdx": 0,
+			"setId": 3,
+			"iconIdx": 9
+		},
+		{
+			"icon": {
+				"paths": [
+					"M725.333 128h-512c-47.36 0-85.333 38.4-85.333 85.333v597.333c0 46.933 37.973 85.333 85.333 85.333h597.333c46.933 0 85.333-38.4 85.333-85.333v-512l-170.667-170.667zM512 810.667c-70.827 0-128-57.173-128-128s57.173-128 128-128 128 57.173 128 128-57.173 128-128 128zM640 384h-426.667v-170.667h426.667v170.667z"
+				],
+				"attrs": [],
+				"isMulticolor": false,
+				"tags": [
+					"tab_save"
+				],
+				"grid": 0
+			},
+			"attrs": [],
+			"properties": {
+				"order": 1,
+				"id": 0,
+				"prevSize": 32,
+				"code": 59654,
+				"name": "tab_save"
+			},
+			"setIdx": 0,
+			"setId": 3,
+			"iconIdx": 10
+		}
+	],
+	"height": 1024,
+	"metadata": {
+		"name": "icomoon"
+	},
+	"preferences": {
+		"showGlyphs": true,
+		"showQuickUse": true,
+		"showQuickUse2": true,
+		"showSVGs": true,
+		"fontPref": {
+			"prefix": "icon-",
+			"metadata": {
+				"fontFamily": "icomoon"
+			},
+			"metrics": {
+				"emSize": 1024,
+				"baseline": 6.25,
+				"whitespace": 50
+			},
+			"embed": false
+		},
+		"imagePref": {
+			"prefix": "icon-",
+			"png": true,
+			"useClassSelector": true,
+			"color": 4473924,
+			"bgColor": 16777215,
+			"classSelector": ".icon"
+		},
+		"historySize": 100,
+		"showCodes": true
+	}
+}
\ No newline at end of file
diff --git a/panels_ipe/js/models/AppModel.js b/panels_ipe/js/models/AppModel.js
new file mode 100644
index 0000000..58033d6
--- /dev/null
+++ b/panels_ipe/js/models/AppModel.js
@@ -0,0 +1,74 @@
+/**
+ * @file
+ * The primary Backbone model for Panels IPE.
+ *
+ * @see Drupal.panels_ipe.AppView
+ */
+
+(function (Backbone, Drupal) {
+
+  'use strict';
+
+  /**
+   * @constructor
+   *
+   * @augments Backbone.Model
+   */
+  Drupal.panels_ipe.AppModel = Backbone.Model.extend(/** @lends Drupal.panels_ipe.AppModel# */{
+
+    /**
+     * @type {object}
+     *
+     * @prop {bool} active
+     * @prop {Drupal.panels_ipe.TabModel} activeTab
+     * @prop {Drupal.panels_ipe.BlockModel} activeBlock
+     * @prop {Drupal.panels_ipe.RegionModel} activeRegion
+     */
+    defaults: /** @lends Drupal.panels_ipe.AppModel# */{
+
+      /**
+       * Whether or not the editing part of the application is active.
+       *
+       * @type {bool}
+       */
+      active: false,
+
+      /**
+       * The current Layout.
+       *
+       * @type {Drupal.panels_ipe.LayoutModel}
+       */
+      layout: null,
+
+      /**
+       * A collection of all tabs on screen.
+       *
+       * @type {Drupal.panels_ipe.TabCollection}
+       */
+      tabCollection: null,
+
+      /**
+       * The "Edit" tab.
+       *
+       * @type {Drupal.panels_ipe.TabModel}
+       */
+      editTab: null,
+
+      /**
+       * The "Save" tab.
+       *
+       * @type {Drupal.panels_ipe.TabModel}
+       */
+      saveTab: null,
+
+      /**
+       * The "Cancel" tab.
+       *
+       * @type {Drupal.panels_ipe.TabModel}
+       */
+      cancelTab: null
+    }
+
+  });
+
+}(Backbone, Drupal));
diff --git a/panels_ipe/js/models/BlockModel.js b/panels_ipe/js/models/BlockModel.js
new file mode 100644
index 0000000..ab6694f
--- /dev/null
+++ b/panels_ipe/js/models/BlockModel.js
@@ -0,0 +1,114 @@
+/**
+ * @file
+ * Base Backbone model for a Block.
+ */
+
+(function (_, $, Backbone, Drupal, drupalSettings) {
+
+  'use strict';
+
+  Drupal.panels_ipe.BlockModel = Backbone.Model.extend(/** @lends Drupal.panels_ipe.BlockModel# */{
+
+    /**
+     * @type {object}
+     */
+    defaults: /** @lends Drupal.panels_ipe.BlockModel# */{
+
+      /**
+       * The block state.
+       *
+       * @type {bool}
+       */
+      active: false,
+
+      /**
+       * The ID of the block.
+       *
+       * @type {string}
+       */
+      id: null,
+
+      /**
+       * The unique ID of the block.
+       *
+       * @type {string}
+       */
+      uuid: null,
+
+      /**
+       * The label of the block.
+       *
+       * @type {string}
+       */
+      label: null,
+
+      /**
+       * The provider for the block (usually the module name).
+       *
+       * @type {string}
+       */
+      provider: null,
+
+      /**
+       * The HTML content of the block. This is stored in the model as the
+       * IPE doesn't actually care what the block's content is, the functional
+       * elements of the model are the metadata. The BlockView renders this
+       * wrapped inside IPE elements.
+       *
+       * @type {string}
+       */
+      html: null
+
+    }
+
+  });
+
+  /**
+   * @constructor
+   *
+   * @augments Backbone.Collection
+   */
+  Drupal.panels_ipe.BlockCollection = Backbone.Collection.extend(/** @lends Drupal.panels_ipe.BlockCollection# */{
+
+    /**
+     * @type {Drupal.panels_ipe.BlockModel}
+     */
+    model: Drupal.panels_ipe.BlockModel,
+
+    /**
+     * For Blocks, our identifier is the UUID, not the ID.
+     *
+     * @type {function}
+     *
+     * @param {Object} attrs
+     *   The attributes of the current model in the collection.
+     *
+     * @return {string}
+     *   The value of a BlockModel's UUID.
+     */
+    modelId: function (attrs) {
+      return attrs.uuid;
+    },
+
+    /**
+     * Moves a Block up or down in this collection.
+     *
+     * @type {function}
+     *
+     * @param {Drupal.panels_ipe.BlockModel} block
+     *  The BlockModel you want to move.
+     * @param {string} direction
+     *  The string name of the direction (either "up" or "down").
+     */
+    shift: function (block, direction) {
+      var index = this.indexOf(block);
+      if ((direction === 'up' && index > 0) || (direction === 'down' && index < this.models.length)) {
+        this.remove(block, {silent: true});
+        var new_index = direction === 'up' ? index - 1 : index + 1;
+        this.add(block, {at: new_index, silent: true});
+      }
+    }
+
+  });
+
+}(_, jQuery, Backbone, Drupal, drupalSettings));
diff --git a/panels_ipe/js/models/BlockPluginModel.js b/panels_ipe/js/models/BlockPluginModel.js
new file mode 100644
index 0000000..51f01ba
--- /dev/null
+++ b/panels_ipe/js/models/BlockPluginModel.js
@@ -0,0 +1,104 @@
+/**
+ * @file
+ * Base Backbone model for a Block Plugin.
+ */
+
+(function (_, $, Backbone, Drupal) {
+
+  'use strict';
+
+  Drupal.panels_ipe.BlockPluginModel = Backbone.Model.extend(/** @lends Drupal.panels_ipe.BlockPluginModel# */{
+
+    /**
+     * @type {object}
+     */
+    defaults: /** @lends Drupal.panels_ipe.BlockPluginModel# */{
+
+      /**
+       * The plugin ID.
+       *
+       * @type {string}
+       */
+      plugin_id: null,
+
+      /**
+       * The block's id (machine name).
+       *
+       * @type {string}
+       */
+      id: null,
+
+      /**
+       * The plugin label.
+       *
+       * @type {string}
+       */
+      label: null,
+
+      /**
+       * The category of the plugin.
+       *
+       * @type {string}
+       */
+      category: null,
+
+      /**
+       * The provider for the block (usually the module name).
+       *
+       * @type {string}
+       */
+      provider: null
+
+    },
+
+    idAttribute: 'plugin_id'
+
+  });
+
+  /**
+   * @constructor
+   *
+   * @augments Backbone.Collection
+   */
+  Drupal.panels_ipe.BlockPluginCollection = Backbone.Collection.extend(/** @lends Drupal.panels_ipe.BlockPluginCollection# */{
+
+    /**
+     * @type {Drupal.panels_ipe.BlockPluginModel}
+     */
+    model: Drupal.panels_ipe.BlockPluginModel,
+
+    /**
+     * Defines a sort parameter for the collection.
+     *
+     * @type {string}
+     */
+    comparator: 'category',
+
+    /**
+     * For Block Plugins, our identifier is the plugin id.
+     *
+     * @type {function}
+     *
+     * @param {Object} attrs
+     *   The attributes of the current model in the collection.
+     *
+     * @return {string}
+     *   A string representing a BlockPlugin's id.
+     */
+    modelId: function (attrs) {
+      return attrs.plugin_id;
+    },
+
+    /**
+     * @type {function}
+     *
+     * @return {string}
+     *   The URL required to sync this collection with the server.
+     */
+    url: function () {
+      return Drupal.panels_ipe.urlRoot(drupalSettings) + '/block_plugins';
+    }
+
+  });
+
+}(_, jQuery, Backbone, Drupal));
diff --git a/panels_ipe/js/models/LayoutModel.js b/panels_ipe/js/models/LayoutModel.js
new file mode 100644
index 0000000..31e8fa5
--- /dev/null
+++ b/panels_ipe/js/models/LayoutModel.js
@@ -0,0 +1,141 @@
+/**
+ * @file
+ * Base Backbone model for a Layout.
+ */
+
+(function (_, $, Backbone, Drupal) {
+
+  'use strict';
+
+  Drupal.panels_ipe.LayoutModel = Backbone.Model.extend(/** @lends Drupal.panels_ipe.LayoutModel# */{
+
+    /**
+     * @type {object}
+     */
+    defaults: /** @lends Drupal.panels_ipe.LayoutModel# */{
+
+      /**
+       * The layout machine name.
+       *
+       * @type {string}
+       */
+      id: null,
+
+      /**
+       * Whether or not this was the original layout for the variant.
+       *
+       * @type {bool}
+       */
+      original: false,
+
+      /**
+       * The layout label.
+       *
+       * @type {string}
+       */
+      label: null,
+
+      /**
+       * Whether or not this is the current layout.
+       *
+       * @type {bool}
+       */
+      current: false,
+
+      /**
+       * The wrapping HTML for this layout. Only used for initial rendering.
+       *
+       * @type {string}
+       */
+      html: null,
+
+      /**
+       * A collection of regions contained in this Layout.
+       *
+       * @type {Drupal.panels_ipe.RegionCollection}
+       */
+      regionCollection: null,
+
+      /**
+       * An array of Block UUIDs that we need to delete.
+       *
+       * @type {Array}
+       */
+      deletedBlocks: []
+
+
+    },
+
+    /**
+     * Overrides the isNew method to mark if this is the initial layout or not.
+     *
+     * @return {bool}
+     *   A boolean which determines if this Block was on the page on load.
+     */
+    isNew: function () {
+      return !this.get('original');
+    },
+
+    /**
+     * Overrides the parse method to set our regionCollection dynamically.
+     *
+     * @param {Object} resp
+     *   The decoded JSON response from the backend server.
+     * @param {Object} options
+     *   Additional options passed to parse.
+     *
+     * @return {Object}
+     *   An object representing a LayoutModel's attributes.
+     */
+    parse: function (resp, options) {
+      // If possible, initialize our region collection.
+      if (typeof resp.regions != 'undefined') {
+        resp.regionCollection = new Drupal.panels_ipe.RegionCollection();
+        for (var i in resp.regions) {
+          if (resp.regions.hasOwnProperty(i)) {
+            var region = new Drupal.panels_ipe.RegionModel(resp.regions[i]);
+            region.set({blockCollection: new Drupal.panels_ipe.BlockCollection()});
+            resp.regionCollection.add(region);
+          }
+        }
+      }
+      return resp;
+    },
+
+    /**
+     * @type {function}
+     *
+     * @return {string}
+     *   A URL that can be used to refresh this Layout's attributes.
+     */
+    url: function () {
+      return Drupal.panels_ipe.urlRoot(drupalSettings) + '/layouts/' + this.get('id');
+    }
+
+  });
+
+  /**
+   * @constructor
+   *
+   * @augments Backbone.Collection
+   */
+  Drupal.panels_ipe.LayoutCollection = Backbone.Collection.extend(/** @lends Drupal.panels_ipe.LayoutCollection# */{
+
+    /**
+     * @type {Drupal.panels_ipe.LayoutModel}
+     */
+    model: Drupal.panels_ipe.LayoutModel,
+
+    /**
+     * @type {function}
+     *
+     * @return {string}
+     *   A URL that can be used to refresh this collection's child models.
+     */
+    url: function () {
+      return Drupal.panels_ipe.urlRoot(drupalSettings) + '/layouts';
+    }
+
+  });
+
+}(_, jQuery, Backbone, Drupal));
diff --git a/panels_ipe/js/models/RegionModel.js b/panels_ipe/js/models/RegionModel.js
new file mode 100644
index 0000000..b5333a5
--- /dev/null
+++ b/panels_ipe/js/models/RegionModel.js
@@ -0,0 +1,75 @@
+/**
+ * @file
+ * Base Backbone model for a Region.
+ *
+ * @todo Support sync operations to refresh a region, even if we don't have
+ * a use case for that yet.
+ */
+
+(function (_, $, Backbone, Drupal) {
+
+  'use strict';
+
+  Drupal.panels_ipe.RegionModel = Backbone.Model.extend(/** @lends Drupal.panels_ipe.RegionModel# */{
+
+    /**
+     * @type {object}
+     */
+    defaults: /** @lends Drupal.panels_ipe.RegionModel# */{
+
+      /**
+       * The machine name of the region.
+       *
+       * @type {string}
+       */
+      name: null,
+
+      /**
+       * The label of the region.
+       *
+       * @type {string}
+       */
+      label: null,
+
+      /**
+       * A BlockCollection for all blocks in this region.
+       *
+       * @type {Drupal.panels_ipe.BlockCollection}
+       *
+       * @see Drupal.panels_ipe.BlockCollection
+       */
+      blockCollection: null
+    }
+
+  });
+
+  /**
+   * @constructor
+   *
+   * @augments Backbone.Collection
+   */
+  Drupal.panels_ipe.RegionCollection = Backbone.Collection.extend(/** @lends Drupal.panels_ipe.RegionCollection# */{
+
+    /**
+     * @type {Drupal.panels_ipe.RegionModel}
+     */
+    model: Drupal.panels_ipe.RegionModel,
+
+    /**
+     * For Regions, our identifier is the region name.
+     *
+     * @type {function}
+     *
+     * @param {Object} attrs
+     *   The current RegionModel's attributes.
+     *
+     * @return {string}
+     *   The current RegionModel's name attribute.
+     */
+    modelId: function (attrs) {
+      return attrs.name;
+    }
+
+  });
+
+}(_, jQuery, Backbone, Drupal));
diff --git a/panels_ipe/js/models/TabModel.js b/panels_ipe/js/models/TabModel.js
new file mode 100644
index 0000000..ae8bd9b
--- /dev/null
+++ b/panels_ipe/js/models/TabModel.js
@@ -0,0 +1,71 @@
+/**
+ * @file
+ * A .
+ *
+ * @see Drupal.panels_ipe.TabView
+ */
+
+(function (Backbone, Drupal) {
+
+  'use strict';
+
+  /**
+   * @constructor
+   *
+   * @augments Backbone.Model
+   */
+  Drupal.panels_ipe.TabModel = Backbone.Model.extend(/** @lends Drupal.panels_ipe.TabModel# */{
+
+    /**
+     * @type {object}
+     *
+     * @prop {bool} active
+     * @prop {string} title
+     */
+    defaults: /** @lends Drupal.panels_ipe.TabModel# */{
+
+      /**
+       * The ID of the tab.
+       *
+       * @type {int}
+       */
+      id: null,
+
+      /**
+       * Whether or not the tab is active.
+       *
+       * @type {bool}
+       */
+      active: false,
+
+      /**
+       * Whether or not the tab is loading.
+       *
+       * @type {bool}
+       */
+      loading: false,
+
+      /**
+       * The title of the tab.
+       *
+       * @type {string}
+       */
+      title: null
+    }
+
+  });
+
+  /**
+   * @constructor
+   *
+   * @augments Backbone.Collection
+   */
+  Drupal.panels_ipe.TabCollection = Backbone.Collection.extend(/** @lends Drupal.panels_ipe.TabCollection# */{
+
+    /**
+     * @type {Drupal.panels_ipe.TabModel}
+     */
+    model: Drupal.panels_ipe.TabModel
+  });
+
+}(Backbone, Drupal));
diff --git a/panels_ipe/js/panels_ipe.js b/panels_ipe/js/panels_ipe.js
new file mode 100644
index 0000000..afedfda
--- /dev/null
+++ b/panels_ipe/js/panels_ipe.js
@@ -0,0 +1,142 @@
+/**
+ * @file
+ * Attaches behavior for the Panels IPE module.
+ *
+ */
+
+(function ($, _, Backbone, Drupal) {
+
+  'use strict';
+
+  /**
+   * Contains initial Backbone initialization for the IPE.
+   *
+   * @type {Drupal~behavior}
+   */
+  Drupal.behaviors.panels_ipe = {
+    attach: function (context, settings) {
+      // Perform initial setup of our app.
+      $('body').once('panels-ipe-init').each(Drupal.panels_ipe.init, [settings]);
+
+      // If this setting is present, it means we need to add/update a new
+      // BlockModel somewhere. Inform the App that this has occurred.
+      if (settings['panels_ipe']['updated_block']) {
+        var data = settings['panels_ipe']['updated_block'];
+        // Create a BlockModel.
+        var block = new Drupal.panels_ipe.BlockModel(data);
+        // Trigger the event.
+        Drupal.panels_ipe.app.trigger('addBlockPlugin', block, data.region);
+        // Remove the setting.
+        delete settings['panels_ipe']['updated_block'];
+      }
+
+      // If this setting is present, it means we need to toggle the preview.
+      // We need to do this with drupalSettings as the animation won't work
+      // if triggered by a form submit. It must occur after the form is rendered.
+      if (context.className == 'panels-ipe-block-plugin-form flip-container'
+        && settings['panels_ipe']['toggle_preview']) {
+        $('.ipe-block-plugin-form').toggleClass('flipped');
+        delete settings['panels_ipe']['toggle_preview'];
+      }
+    }
+  };
+
+  /**
+   * @namespace
+   */
+  Drupal.panels_ipe = {};
+
+  /**
+   * Setups up our initial Collection and Views based on the current settings.
+   *
+   * @param {Object} settings
+   *   The contextual drupalSettings.
+   */
+  Drupal.panels_ipe.init = function (settings) {
+    // Set up our initial tabs.
+    var tab_collection = new Drupal.panels_ipe.TabCollection();
+    tab_collection.add({title: 'Change Layout', id: 'change_layout'});
+    tab_collection.add({title: 'Manage Content', id: 'manage_content'});
+
+    // The edit/save/cancel tabs are special, and are tracked by our app.
+    var edit_tab = new Drupal.panels_ipe.TabModel({title: 'Edit', id: 'edit'});
+    var save_tab = new Drupal.panels_ipe.TabModel({title: 'Save', id: 'save'});
+    var cancel_tab = new Drupal.panels_ipe.TabModel({title: 'Cancel', id: 'cancel'});
+    tab_collection.add(edit_tab);
+    tab_collection.add(save_tab);
+    tab_collection.add(cancel_tab);
+
+    // Create a global(ish) AppModel.
+    Drupal.panels_ipe.app = new Drupal.panels_ipe.AppModel({
+      tabCollection: tab_collection,
+      editTab: edit_tab,
+      saveTab: save_tab,
+      cancelTab: cancel_tab
+    });
+
+    // Set up our initial tab views.
+    var tab_views = {
+      change_layout: new Drupal.panels_ipe.LayoutPicker(),
+      manage_content: new Drupal.panels_ipe.BlockPicker()
+    };
+
+    // Create an AppView instance.
+    var app_view = new Drupal.panels_ipe.AppView({
+      model: Drupal.panels_ipe.app,
+      el: '#panels-ipe-tray',
+      tabContentViews: tab_views
+    });
+    $('body').append(app_view.render().$el);
+
+    // Assemble the initial region and block collections.
+    // This logic is a little messy, as traditionally we would never initialize
+    // Backbone with existing HTML content.
+    var region_collection = new Drupal.panels_ipe.RegionCollection();
+    for (var i in settings.panels_ipe.regions) {
+      if (settings.panels_ipe.regions.hasOwnProperty(i)) {
+        var region = new Drupal.panels_ipe.RegionModel();
+        region.set(settings.panels_ipe.regions[i]);
+
+        var block_collection = new Drupal.panels_ipe.BlockCollection();
+        for (var j in settings.panels_ipe.regions[i].blocks) {
+          if (settings.panels_ipe.regions[i].blocks.hasOwnProperty(j)) {
+            // Add a new block model.
+            var block = new Drupal.panels_ipe.BlockModel();
+            block.set(settings.panels_ipe.regions[i].blocks[j]);
+            block_collection.add(block);
+          }
+        }
+
+        region.set({blockCollection: block_collection});
+
+        region_collection.add(region);
+      }
+    }
+
+    // Create the Layout model/view.
+    var layout = new Drupal.panels_ipe.LayoutModel(settings.panels_ipe.layout);
+    layout.set({regionCollection: region_collection});
+    var layout_view = new Drupal.panels_ipe.LayoutView({
+      model: layout,
+      el: '#panels-ipe-content'
+    });
+    layout_view.render();
+
+    Drupal.panels_ipe.app.set({layout: layout});
+    app_view.layoutView = layout_view;
+  };
+
+  /**
+   * Returns the urlRoot for all callbacks
+   *
+   * @param {Object} settings
+   *   The contextual drupalSettings.
+   *
+   * @return {string}
+   *   A base path for most other URL callbacks in this App.
+   */
+  Drupal.panels_ipe.urlRoot = function (settings) {
+    return settings.path.baseUrl + 'admin/panels_ipe/variant/' + settings.panels_ipe.display_variant.id;
+  };
+
+}(jQuery, _, Backbone, Drupal));
diff --git a/panels_ipe/js/views/AppView.js b/panels_ipe/js/views/AppView.js
new file mode 100644
index 0000000..8a40dd2
--- /dev/null
+++ b/panels_ipe/js/views/AppView.js
@@ -0,0 +1,236 @@
+/**
+ * @file
+ * The primary Backbone view for Panels IPE. For now this only controls the
+ * bottom tray, but in the future could have a larger scope.
+ *
+ * see Drupal.panels_ipe.AppModel
+ */
+
+(function ($, _, Backbone, Drupal, drupalSettings) {
+
+  'use strict';
+
+  Drupal.panels_ipe.AppView = Backbone.View.extend(/** @lends Drupal.panels_ipe.AppView# */{
+
+    /**
+     * @type {function}
+     */
+    template: _.template('<div class="ipe-tab-wrapper"></div>'),
+
+    /**
+     * @type {Drupal.panels_ipe.TabsView}
+     */
+    tabsView: null,
+
+    /**
+     * @type {Drupal.panels_ipe.LayoutView}
+     */
+    layoutView: null,
+
+    /**
+     * @type {Drupal.panels_ipe.AppModel}
+     */
+    model: null,
+
+    /**
+     * @constructs
+     *
+     * @augments Backbone.View
+     *
+     * @param {object} options
+     *   An object with the following keys:
+     * @param {Drupal.panels_ipe.AppModel} options.model
+     *   The application state model.
+     * @param {Object} options.tabContentViews
+     *   An object mapping TabModel ids to arbitrary Backbone views.
+     */
+    initialize: function (options) {
+      this.model = options.model;
+
+      // Create a TabsView instance.
+      this.tabsView = new Drupal.panels_ipe.TabsView({
+        collection: this.model.get('tabCollection'),
+        tabViews: options.tabContentViews
+      });
+
+      // Listen to important global events throughout the app.
+      this.listenTo(this.model, 'changeLayout', this.changeLayout);
+      this.listenTo(this.model, 'addBlockPlugin', this.addBlockPlugin);
+      this.listenTo(this.model, 'configureBlock', this.configureBlock);
+
+      // Listen to tabs that don't have associated BackboneViews.
+      this.listenTo(this.model.get('editTab'), 'change:active', this.clickEditTab);
+      this.listenTo(this.model.get('saveTab'), 'change:active', this.clickSaveTab);
+      this.listenTo(this.model.get('cancelTab'), 'change:active', this.clickCancelTab);
+    },
+
+    /**
+     * Appends the IPE tray to the bottom of the screen.
+     *
+     * @return {Drupal.panels_ipe.AppView}
+     *   Returns this, for chaining.
+     */
+    render: function () {
+      // Empty our list.
+      this.$el.html(this.template(this.model.toJSON()));
+      // Add our tab collection to the App.
+      this.tabsView.setElement(this.$('.ipe-tab-wrapper')).render();
+      // Re-render our layout.
+      if (this.layoutView) {
+        this.layoutView.render();
+      }
+      return this;
+    },
+
+    /**
+     * Actives all regions and blocks for editing.
+     */
+    openIPE: function () {
+      var active = this.model.get('active');
+      if (active) {
+        return;
+      }
+
+      // Set our active state correctly.
+      this.model.set({active: true});
+
+      // Set the layout's active state correctly.
+      this.model.get('layout').set({active: true});
+
+      this.$el.addClass('active');
+    },
+
+    /**
+     * Deactivate all regions and blocks for editing.
+     */
+    closeIPE: function () {
+      var active = this.model.get('active');
+      if (!active) {
+        return;
+      }
+
+      // Set our active state correctly.
+      this.model.set({active: false});
+
+      // Set the layout's active state correctly.
+      this.model.get('layout').set({active: false});
+
+      this.$el.removeClass('active');
+    },
+
+    /**
+     * Event callback for when a new layout has been selected.
+     *
+     * @param {Array} args
+     *   An array of event arguments.
+     */
+    changeLayout: function (args) {
+      // Grab the layout from the argument list.
+      var layout = args[0];
+
+      // Sync the layout from Drupal.
+      var self = this;
+      layout.fetch().done(function () {
+        // Grab all the blocks from the current layout.
+        var regions = self.model.get('layout').get('regionCollection');
+        var block_collection = new Drupal.panels_ipe.BlockCollection();
+        regions.each(function (region) {
+          block_collection.add(region.get('blockCollection').toJSON());
+        });
+
+        // Get the first region in the layout.
+        // @todo Be smarter about re-adding blocks.
+        var first_region = layout.get('regionCollection').at(0);
+
+        // Append all blocks from previous layout.
+        first_region.set({blockCollection: block_collection});
+
+        // Change the default layout in our AppModel.
+        self.model.set({layout: layout});
+
+        // Change the LayoutView's layout.
+        self.layoutView.changeLayout(layout);
+
+        // Re-render the app.
+        self.render();
+      });
+    },
+
+    /**
+     * Sets the IPE active state based on the "Edit" TabModel.
+     */
+    clickEditTab: function () {
+      var active = this.model.get('editTab').get('active');
+      if (active) {
+        this.openIPE();
+      }
+      else {
+        this.closeIPE();
+      }
+    },
+
+    /**
+     * Saves our layout to the server.
+     */
+    clickSaveTab: function () {
+      if (this.model.get('saveTab').get('active')) {
+        // Save the Layout and disable the tab.
+        var self = this;
+        self.model.get('saveTab').set({loading: true});
+        this.model.get('layout').save().done(function () {
+          self.model.get('saveTab').set({loading: false, active: false});
+          self.tabsView.render();
+          self.$el.removeClass('unsaved');
+        });
+      }
+    },
+
+    /**
+     * Cancels our temporary changes and refreshes the page.
+     */
+    clickCancelTab: function () {
+      var cancel_tab = this.model.get('cancelTab');
+      if (cancel_tab.get('active') && !cancel_tab.get('loading')) {
+        // Remove our changes and refresh the page.
+        cancel_tab.set({loading: true});
+        $.ajax(Drupal.panels_ipe.urlRoot(drupalSettings) + '/cancel')
+          .done(function (data) {
+            location.reload();
+          });
+      }
+    },
+
+    /**
+     * Adds a new BlockPlugin to the screen.
+     *
+     * @param {Drupal.panels_ipe.BlockModel} block
+     *   The new BlockModel
+     * @param {string} region
+     *   The region the block should be placed in.
+     */
+    addBlockPlugin: function (block, region) {
+      this.layoutView.addBlock(block, region);
+
+      // Mark all tabs as inactive and close the view.
+      this.tabsView.collection.each(function (tab) {
+        tab.set('active', false);
+      });
+
+      this.tabsView.closeTabContent();
+    },
+
+    /**
+     * Opens the Manage Content tray when configuring an existing Block.
+     *
+     * @param {Drupal.panels_ipe.BlockModel} block
+     *   The Block that needs to have its form opened.
+     */
+    configureBlock: function (block) {
+      this.tabsView.tabViews['manage_content'].activeCategory = 'On Screen';
+      this.tabsView.tabViews['manage_content'].autoClick = '[data-existing-block-id=' + block.get('uuid') + ']';
+      this.tabsView.switchTab('manage_content');
+    }
+
+  });
+
+}(jQuery, _, Backbone, Drupal, drupalSettings));
diff --git a/panels_ipe/js/views/BlockPicker.js b/panels_ipe/js/views/BlockPicker.js
new file mode 100644
index 0000000..60e7a2e
--- /dev/null
+++ b/panels_ipe/js/views/BlockPicker.js
@@ -0,0 +1,308 @@
+/**
+ * @file
+ * Renders a list of existing Blocks for selection.
+ *
+ * see Drupal.panels_ipe.BlockPluginCollection
+ *
+ */
+
+(function ($, _, Backbone, Drupal, drupalSettings) {
+
+  'use strict';
+
+  Drupal.panels_ipe.BlockPicker = Backbone.View.extend(/** @lends Drupal.panels_ipe.BlockPicker# */{
+
+    /**
+     * @type {Drupal.panels_ipe.BlockPluginCollection}
+     */
+    collection: null,
+
+    /**
+     * The name of the currently selected category.
+     *
+     * @type {string}
+     */
+    activeCategory: null,
+
+    /**
+     * A Block Plugin selector to automatically click on render.
+     *
+     * @type {string}
+     */
+    autoClick: null,
+
+    /**
+     * @type {function}
+     */
+    template: _.template(
+      '<div class="ipe-block-picker-top"></div><div class="ipe-block-picker-bottom"><div class="ipe-block-categories"></div></div>'
+    ),
+
+    /**
+     * @type {function}
+     */
+    template_category: _.template(
+      '<a class="ipe-block-category<% if (active) { %> active<% } %>" data-block-category="<%- name %>">' +
+      '  <%- name %>' +
+      '  <div class="ipe-block-category-count"><%- count %></div>' +
+      '</a>'
+    ),
+
+    /**
+     * @type {function}
+     */
+    template_plugin: _.template(
+      '<div class="ipe-block-plugin">' +
+      '  <div class="ipe-block-plugin-info">' +
+      '    <h5><%- label %></h5>' +
+      '    <p>Provider: <strong><%- provider %></strong></p>' +
+      '  </div>' +
+      '  <a data-plugin-id="<%- plugin_id %>">Add</a>' +
+      '</div>'
+    ),
+
+    /**
+     * @type {function}
+     */
+    template_existing: _.template(
+      '<div class="ipe-block-plugin">' +
+      '  <div class="ipe-block-plugin-info">' +
+      '    <h5><%- block.label %></h5>' +
+      '    <p>Provider: <strong><%- block.provider %></strong></p>' +
+      '  </div>' +
+      '  <a data-existing-region-name="<%- region.name %>" data-existing-block-id="<%- block.uuid %>">Configure</a>' +
+      '</div>'
+    ),
+
+    /**
+     * @type {function}
+     */
+    template_plugin_form: _.template(
+      '<h4>Configure <strong><%- label %></strong> block</h4>' +
+      '<div class="ipe-block-plugin-form"><div class="ipe-icon ipe-icon-loading"></div></div>'
+    ),
+
+    /**
+     * @type {function}
+     */
+    template_loading: _.template(
+      '<span class="ipe-icon ipe-icon-loading"></span>'
+    ),
+
+    /**
+     * @type {object}
+     */
+    events: {
+      'click [data-block-category]': 'toggleCategory',
+      'click .ipe-block-plugin [data-plugin-id]': 'displayBlockPluginForm',
+      'click .ipe-block-plugin [data-existing-block-id]': 'displayBlockPluginForm'
+    },
+
+    /**
+     * @constructs
+     *
+     * @augments Backbone.View
+     *
+     * @param {Object} options
+     *   An object containing the following keys:
+     * @param {Drupal.panels_ipe.BlockPluginCollection} options.collection
+     *   An optional initial collection.
+     */
+    initialize: function (options) {
+      if (options && options.collection) {
+        this.collection = options.collection;
+      }
+    },
+
+    /**
+     * Renders the selection menu for picking Blocks.
+     */
+    render: function () {
+      // Initialize our BlockPluginCollection if it doesn't already exist.
+      if (!this.collection) {
+        // Indicate an AJAX request.
+        this.$el.html(this.template_loading());
+
+        // Fetch a collection of block plugins from the server.
+        this.collection = new Drupal.panels_ipe.BlockPluginCollection();
+        var self = this;
+        this.collection.fetch().done(function () {
+          // We have a collection now, re-render ourselves.
+          self.render();
+        });
+        return;
+      }
+
+      // Empty ourselves.
+      this.$el.html(this.template());
+
+      // Get a list of categories from the collection.
+      var categories_count = {};
+      this.collection.each(function (block_plugin) {
+        var category = block_plugin.get('category');
+        if (!categories_count[category]) {
+          categories_count[category] = 0;
+        }
+        ++categories_count[category];
+      });
+
+      // Render existing blocks as a unique category.
+      var existing_count = 0;
+      Drupal.panels_ipe.app.get('layout').get('regionCollection').each(function (region) {
+        region.get('blockCollection').each(function (block) {
+          ++existing_count;
+        });
+      });
+      this.$('.ipe-block-categories').append(this.template_category({
+        name: 'On Screen',
+        count: existing_count,
+        active: this.activeCategory === 'On Screen'
+      }));
+
+      // Render each category.
+      for (var i in categories_count) {
+        if (categories_count.hasOwnProperty(i)) {
+          this.$('.ipe-block-categories').append(this.template_category({
+            name: i,
+            count: categories_count[i],
+            active: this.activeCategory === i
+          }));
+        }
+      }
+
+      // Check if a category is selected. If so, render the top-tray.
+      if (this.activeCategory) {
+        var $top = this.$('.ipe-block-picker-top');
+        $top.addClass('active');
+        // The "On Screen" category is special, and requires special rendering.
+        if (this.activeCategory === 'On Screen') {
+          Drupal.panels_ipe.app.get('layout').get('regionCollection').each(function (region) {
+            region.get('blockCollection').each(function (block) {
+              $top.append(this.template_existing({
+                block: block.toJSON(),
+                region: region.toJSON()
+              }));
+            }, this);
+          }, this);
+        }
+        else {
+          this.collection.each(function (block_plugin) {
+            if (block_plugin.get('category') === this.activeCategory) {
+              $top.append(this.template_plugin(block_plugin.toJSON()));
+            }
+          }, this);
+        }
+
+        // Check if we need to automatically select one Block Plugin.
+        if (this.autoClick) {
+          this.$(this.autoClick).click();
+          this.autoClick = null;
+        }
+      }
+    },
+
+    /**
+     * Reacts to a category being clicked.
+     *
+     * @param {Object} e
+     *   The event object.
+     */
+    toggleCategory: function (e) {
+      var category = $(e.currentTarget).data('block-category');
+
+      var animation = false;
+
+      // No category is open.
+      if (!this.activeCategory) {
+        this.activeCategory = category;
+        animation = 'slideDown';
+      }
+      // The same category is clicked twice.
+      else if (this.activeCategory === category) {
+        this.activeCategory = null;
+        animation = 'slideUp';
+      }
+      // Another category is already open.
+      else if (this.activeCategory) {
+        this.activeCategory = category;
+      }
+
+      // Trigger a re-render, with animation if needed.
+      if (animation === 'slideUp') {
+        // Close the tab, then re-render.
+        var self = this;
+        this.$('.ipe-block-picker-top')[animation]('fast', function () { self.render(); });
+      }
+      else if (animation === 'slideDown') {
+        // We need to render first as hypothetically nothing is open.
+        this.render();
+        this.$('.ipe-block-picker-top').hide();
+        this.$('.ipe-block-picker-top')[animation]('fast');
+      }
+      else {
+        this.render();
+      }
+    },
+
+    /**
+     * Displays a Block Configuration form when adding a Block Plugin.
+     *
+     * @param {Object} e
+     *   The event object.
+     */
+    displayBlockPluginForm: function (e) {
+      var self = this;
+
+      // Get the current plugin_id.
+      var plugin_id = $(e.currentTarget).data('plugin-id');
+
+      // Generate a base URL for the form.
+      var layout_id = Drupal.panels_ipe.app.get('layout').get('id');
+      var url = Drupal.panels_ipe.urlRoot(drupalSettings) + '/layout/' + layout_id + '/block_plugins/';
+
+      var plugin;
+
+      // This is a new block.
+      if (plugin_id) {
+        plugin = this.collection.get(plugin_id);
+        url += plugin_id + '/form';
+      }
+      // This is an existing block.
+      else {
+        // Get the Block UUID and Region Name
+        var block_id = $(e.currentTarget).data('existing-block-id');
+        var region_name = $(e.currentTarget).data('existing-region-name');
+
+        // Get the Block plugin
+        plugin = Drupal.panels_ipe.app.get('layout').get('regionCollection')
+          .get(region_name).get('blockCollection').get(block_id);
+        plugin_id = plugin.get('id');
+
+        url += plugin_id + '/block/' + block_id + '/form';
+      }
+
+      // Indicate an AJAX request.
+      this.$('.ipe-block-picker-top').fadeOut('fast', function () {
+        self.$('.ipe-block-picker-top').html(self.template_plugin_form(plugin.toJSON()));
+        self.$('.ipe-block-picker-top').fadeIn('fast');
+      });
+
+      // Setup the Drupal.Ajax instance.
+      var ajax = Drupal.ajax({
+        url: url,
+        submit: { js: true }
+      });
+
+      // Remove our throbber on load.
+      ajax.options.complete = function () {
+        self.$('.ipe-block-picker-top .ipe-icon-loading').remove();
+        self.$('#panels-ipe-block-plugin-form-wrapper').hide().fadeIn();
+      };
+
+      // Make the Drupal AJAX request.
+      ajax.execute();
+    }
+
+  });
+
+}(jQuery, _, Backbone, Drupal, drupalSettings));
diff --git a/panels_ipe/js/views/BlockView.js b/panels_ipe/js/views/BlockView.js
new file mode 100644
index 0000000..b9b40a0
--- /dev/null
+++ b/panels_ipe/js/views/BlockView.js
@@ -0,0 +1,111 @@
+/**
+ * @file
+ * The primary Backbone view for a Block.
+ *
+ * see Drupal.panels_ipe.BlockModel
+ */
+
+(function ($, _, Backbone, Drupal) {
+
+  'use strict';
+
+  Drupal.panels_ipe.BlockView = Backbone.View.extend(/** @lends Drupal.panels_ipe.BlockView# */{
+
+    /**
+     * @type {function}
+     */
+    template_actions: _.template(
+      '<div class="ipe-actions-block ipe-actions" data-block-action-id="<%- uuid %>">' +
+      '  <h5>Block: <%- label %></h5>' +
+      '  <ul class="ipe-action-list">' +
+      '    <li data-action-id="remove">' +
+      '      <a><span class="ipe-icon ipe-icon-remove"></span></a>' +
+      '    </li>' +
+      '    <li data-action-id="up">' +
+      '      <a><span class="ipe-icon ipe-icon-up"></span></a>' +
+      '    </li>' +
+      '    <li data-action-id="down">' +
+      '      <a><span class="ipe-icon ipe-icon-down"></span></a>' +
+      '    </li>' +
+      '    <li data-action-id="move">' +
+      '      <select><option>Move</option></select>' +
+      '    </li>' +
+      '    <li data-action-id="configure">' +
+      '      <a><span class="ipe-icon ipe-icon-configure"></span></a>' +
+      '    </li>' +
+      '  </ul>' +
+      '</div>'
+    ),
+
+    /**
+     * @type {Drupal.panels_ipe.BlockModel}
+     */
+    model: null,
+
+    /**
+     * @constructs
+     *
+     * @augments Backbone.View
+     *
+     * @param {object} options
+     *   An object with the following keys:
+     * @param {Drupal.panels_ipe.BlockModel} options.model
+     *   The block state model.
+     * @param {string} options.el
+     *   An optional selector if an existing element is already on screen.
+     */
+    initialize: function (options) {
+      this.model = options.model;
+      // An element already exists and our HTML properly isn't set.
+      // This only occurs on initial page load for performance reasons.
+      if (options.el && !this.model.get('html')) {
+        this.model.set({html: this.$el.prop('outerHTML')});
+      }
+      this.listenTo(this.model, 'reset', this.render);
+      this.listenTo(this.model, 'change:active', this.render);
+    },
+
+    /**
+     * Renders the wrapping elements and refreshes a block model.
+     *
+     * @return {Drupal.panels_ipe.BlockView}
+     *   Return this, for chaining.
+     */
+    render: function () {
+      // Replace our current HTML.
+      this.$el.replaceWith(this.model.get('html'));
+      this.setElement("[data-block-id='" + this.model.get('uuid') + "']");
+
+      // We modify our content if the IPE is active.
+      if (this.model.get('active')) {
+        // Prepend the ipe-actions header.
+        this.$el.prepend(this.template_actions(this.model.toJSON()));
+
+        // Make ourselves draggable.
+        this.$el.draggable({
+          handle: '.ipe-actions',
+          scroll: true,
+          scrollSpeed: 20,
+          // Maintain our original width when dragging.
+          helper: function (e) {
+            var original = $(e.target).hasClass('ui-draggable') ? $(e.target) : $(e.target).closest('.ui-draggable');
+            return original.clone().css({
+              width: original.width()
+            });
+          },
+          start: function (e, ui) {
+            $('.ipe-droppable').addClass('active');
+          },
+          stop: function (e, ui) {
+            $('.ipe-droppable').removeClass('active');
+          },
+          opacity: .5
+        });
+      }
+
+      return this;
+    }
+
+  });
+
+}(jQuery, _, Backbone, Drupal));
diff --git a/panels_ipe/js/views/LayoutPicker.js b/panels_ipe/js/views/LayoutPicker.js
new file mode 100644
index 0000000..9582791
--- /dev/null
+++ b/panels_ipe/js/views/LayoutPicker.js
@@ -0,0 +1,115 @@
+/**
+ * @file
+ * Renders a collection of Layouts for selection.
+ *
+ * see Drupal.panels_ipe.LayoutCollection
+ */
+
+(function ($, _, Backbone, Drupal) {
+
+  'use strict';
+
+  Drupal.panels_ipe.LayoutPicker = Backbone.View.extend(/** @lends Drupal.panels_ipe.LayoutPicker# */{
+
+    /**
+     * @type {function}
+     */
+    template_layout: _.template('<li class="ipe-layout" data-layout-id="<%- id %>"><h5 class="ipe-layout-title"><a><%- label %></a></h5></li>'),
+
+    /**
+     * @type {function}
+     */
+    template_current: _.template('<p>Current Layout: </p><h5 class="ipe-layout-title"><%- label %></h5>'),
+
+    /**
+     * @type {function}
+     */
+    template_loading: _.template(
+      '<span class="ipe-icon ipe-icon-loading"></span>'
+    ),
+
+    /**
+     * @type {function}
+     */
+    template: _.template(
+      '<div class="ipe-current-layout"></div><div class="ipe-all-layouts"><p>Available Layouts:</p><ul class="ipe-layouts"></ul></div>'
+    ),
+
+    /**
+     * @type {Drupal.panels_ipe.LayoutCollection}
+     */
+    collection: null,
+
+    /**
+     * @type {object}
+     */
+    events: {
+      'click .ipe-layout': 'selectLayout'
+    },
+
+    /**
+     * Renders the selection menu for picking Layouts.
+     */
+    render: function () {
+      // If we don't have layouts yet, pull some from the server.
+      if (!this.collection) {
+        // Indicate an AJAX request.
+        this.$el.html(this.template_loading());
+
+        // Fetch a list of layouts from the server.
+        this.collection = new Drupal.panels_ipe.LayoutCollection();
+        var self = this;
+        this.collection.fetch().done(function () {
+          // We have a collection now, re-render ourselves.
+          self.render();
+        });
+      }
+      // Render our LayoutCollection.
+      else {
+        this.$el.empty();
+
+        // Setup the empty list.
+        this.$el.html(this.template());
+
+        // Append each layout option.
+        this.collection.each(function (layout) {
+          if (!layout.get('current')) {
+            this.$('.ipe-layouts').append(this.template_layout(layout.toJSON()));
+          }
+          else {
+            this.$('.ipe-current-layout').append(this.template_current(layout.toJSON()));
+          }
+        }, this);
+      }
+    },
+
+    /**
+     * Fires a global Backbone event that the App watches to switch layouts.
+     *
+     * @param {Object} e
+     *   The event object.
+     */
+    selectLayout: function (e) {
+      e.preventDefault();
+      var id = $(e.currentTarget).data('layout-id');
+
+      // Unset the current tab.
+      this.collection.each(function (layout) {
+        if (id === layout.id) {
+          layout.set('current', true);
+          // Indicate an AJAX request.
+          this.$el.html(this.template_loading());
+
+          // Only the AppView is aware of the rendered Layout.
+          // @todo Investigate using non-global events.
+          Drupal.panels_ipe.app.trigger('changeLayout', [layout]);
+        }
+        else {
+          layout.set('current', false);
+        }
+      }, this);
+    }
+
+  });
+
+}(jQuery, _, Backbone, Drupal));
diff --git a/panels_ipe/js/views/LayoutView.js b/panels_ipe/js/views/LayoutView.js
new file mode 100644
index 0000000..fa1ea92
--- /dev/null
+++ b/panels_ipe/js/views/LayoutView.js
@@ -0,0 +1,415 @@
+/**
+ * @file
+ * The primary Backbone view for a Layout.
+ *
+ * see Drupal.panels_ipe.LayoutModel
+ */
+
+(function ($, _, Backbone, Drupal) {
+
+  'use strict';
+
+  Drupal.panels_ipe.LayoutView = Backbone.View.extend(/** @lends Drupal.panels_ipe.LayoutView# */{
+
+    /**
+     * @type {function}
+     */
+    template_region_actions: _.template(
+      '<div class="ipe-actions" data-region-action-id="<%- name %>">' +
+      '  <h5>Region: <%- name %></h5>' +
+      '  <ul class="ipe-action-list"></ul>' +
+      '</div>'
+    ),
+
+    /**
+     * @type {function}
+     */
+    template_region_option: _.template(
+      '<option data-region-option-name="<%- name %>"><%- name %></option>'
+    ),
+
+    /**
+     * @type {function}
+     */
+    template_region_droppable: _.template(
+      '<div class="ipe-droppable" data-droppable-region-name="<%- region %>" data-droppable-index="<%- index %>"></div>'
+    ),
+
+    /**
+     * @type {Drupal.panels_ipe.LayoutModel}
+     */
+    model: null,
+
+    /**
+     * @type {Array}
+     *   An array of child Drupal.panels_ipe.BlockView objects.
+     */
+    blockViews: [],
+
+    /**
+     * @type {object}
+     */
+    events: {
+      'mousedown [data-action-id="move"] > select': 'showBlockRegionList',
+      'blur [data-action-id="move"] > select': 'hideBlockRegionList',
+      'change [data-action-id="move"] > select': 'selectBlockRegionList',
+      'click [data-action-id="up"]': 'moveBlock',
+      'click [data-action-id="down"]': 'moveBlock',
+      'click [data-action-id="remove"]': 'removeBlock',
+      'click [data-action-id="configure"]': 'configureBlock',
+      'drop .ipe-droppable': 'dropBlock'
+    },
+
+    /**
+     * @type {object}
+     */
+    droppable_settings: {
+      tolerance: 'pointer',
+      hoverClass: 'hover',
+      accept: '[data-block-id]'
+    },
+
+    /**
+     * @constructs
+     *
+     * @augments Backbone.View
+     *
+     * @param {object} options
+     *   An object with the following keys:
+     * @param {Drupal.panels_ipe.LayoutModel} options.model
+     *   The layout state model.
+     */
+    initialize: function (options) {
+      this.model = options.model;
+      // Initialize our html, this never changes.
+      if (this.model.get('html')) {
+        this.$el.html(this.model.get('html'));
+      }
+      this.listenTo(this.model, 'change:active', this.changeState);
+    },
+
+    /**
+     * Re-renders our blocks, we have no HTML to be re-rendered.
+     *
+     * @return {Drupal.panels_ipe.LayoutView}
+     *   Returns this, for chaining.
+     */
+    render: function () {
+      // Remove all existing BlockViews.
+      for (var i in this.blockViews) {
+        if (this.blockViews.hasOwnProperty(i)) {
+          this.blockViews[i].remove();
+        }
+      }
+      this.blockViews = [];
+
+      // Remove any active-state items that may remain rendered.
+      this.$('.ipe-actions').remove();
+      this.$('.ipe-droppable').remove();
+
+      // Re-attach all BlockViews to appropriate regions.
+      this.model.get('regionCollection').each(function (region) {
+        var region_selector = '[data-region-name="' + region.get('name') + '"]';
+
+        // Add an initial droppable area to our region if this is the first render.
+        if (this.model.get('active')) {
+          this.$(region_selector).prepend($(this.template_region_droppable({
+            region: region.get('name'),
+            index: 0
+          })).droppable(this.droppable_settings));
+
+          // Prepend the action header for this region.
+          this.$(region_selector).prepend(this.template_region_actions(region.toJSON()));
+        }
+
+        var i = 1;
+        region.get('blockCollection').each(function (block) {
+          var block_selector = '[data-block-id="' + block.get('uuid') + '"]';
+
+          // Attach an empty element for our View to attach itself to.
+          if (this.$(block_selector).length === 0) {
+            var empty_elem = $('<div data-block-id="' + block.get('uuid') + '">');
+            this.$(region_selector).append(empty_elem);
+          }
+
+          // Attach a View to this empty element.
+          var block_view = new Drupal.panels_ipe.BlockView({
+            model: block,
+            el: block_selector
+          });
+          this.blockViews.push(block_view);
+
+          // Render the new BlockView.
+          block_view.render();
+
+          // Prepend/append droppable regions if the Block is active.
+          if (this.model.get('active')) {
+            block_view.$el.after($(this.template_region_droppable({
+              region: region.get('name'),
+              index: i
+            })).droppable(this.droppable_settings));
+          }
+
+          ++i;
+        }, this);
+      }, this);
+
+      return this;
+    },
+
+    /**
+     * Prepends Regions and Blocks with action items.
+     *
+     * @param {Drupal.panels_ipe.LayoutModel} model
+     *   The target LayoutModel.
+     * @param {bool} value
+     *   The desired active state.
+     * @param {Object} options
+     *   Unused options.
+     */
+    changeState: function (model, value, options) {
+      // Sets the active state of child blocks when our state changes.
+      this.model.get('regionCollection').each(function (region) {
+        // BlockViews handle their own rendering, so just set the active value here.
+        region.get('blockCollection').each(function (block) {
+          block.set({active: value});
+        }, this);
+      }, this);
+
+      // Re-render ourselves.
+      this.render();
+    },
+
+    /**
+     * Replaces the "Move" button with a select list of regions.
+     *
+     * @param {Object} e
+     *   The event object.
+     */
+    showBlockRegionList: function (e) {
+      // Get the BlockModel id (uuid).
+      var id = $(e.currentTarget).closest('[data-block-action-id]').data('block-action-id');
+
+      $(e.currentTarget).empty();
+
+      // Add other regions to select list.
+      this.model.get('regionCollection').each(function (region) {
+        var option = $(this.template_region_option(region.toJSON()));
+        // If this is the current region, place it first in the list.
+        if (region.get('blockCollection').get(id)) {
+          option.attr('selected', 'selected');
+          $(e.currentTarget).prepend(option);
+        }
+        else {
+          $(e.currentTarget).append(option);
+        }
+      }, this);
+    },
+
+    /**
+     * Hides the region selector.
+     *
+     * @param {Object} e
+     *   The event object.
+     */
+    hideBlockRegionList: function (e) {
+      $(e.currentTarget).html('<option>Move</option>');
+    },
+
+    /**
+     * React to a new region being selected.
+     *
+     * @param {Object} e
+     *   The event object.
+     */
+    selectBlockRegionList: function (e) {
+      // Get the BlockModel id (uuid).
+      var id = $(e.currentTarget).closest('[data-block-action-id]').data('block-action-id');
+
+      // Grab the value of this region.
+      var region_name = $(e.currentTarget).children(':selected').data('region-option-name');
+
+      // First, remove the Block from the current region.
+      var block;
+      var region_collection = this.model.get('regionCollection');
+      region_collection.each(function (region) {
+        var block_collection = region.get('blockCollection');
+        if (block_collection.get(id)) {
+          block = block_collection.get(id);
+          block_collection.remove(block);
+        }
+      });
+
+      // Next, add the Block to the new region.
+      if (block) {
+        var region = this.model.get('regionCollection').get(region_name);
+        region.get('blockCollection').add(block);
+      }
+
+      // Hide the select list.
+      this.hideBlockRegionList(e);
+
+      // Re-render.
+      this.render();
+
+      // Highlight the block.
+      this.$('[data-block-id="' + id + '"]').addClass('ipe-highlight');
+    },
+
+    /**
+     * Changes the LayoutModel for this view.
+     *
+     * @param {Drupal.panels_ipe.LayoutModel} layout
+     *   The new LayoutModel.
+     */
+    changeLayout: function (layout) {
+      // Stop listening to the current model.
+      this.stopListening(this.model);
+      // Initialize with the new model.
+      this.initialize({model: layout});
+    },
+
+    /**
+     * Moves a block up or down in its RegionModel's BlockCollection.
+     *
+     * @param {Object} e
+     *   The event object.
+     */
+    moveBlock: function (e) {
+      // Get the BlockModel id (uuid).
+      var id = $(e.currentTarget).closest('[data-block-action-id]').data('block-action-id');
+
+      // Get the direction the block is moving.
+      var dir = $(e.currentTarget).data('action-id');
+
+      // Grab the model for this region.
+      var region_name = $(e.currentTarget).closest('[data-region-name]').data('region-name');
+      var region = this.model.get('regionCollection').get(region_name);
+      var block = region.get('blockCollection').get(id);
+
+      // Shift the Block.
+      region.get('blockCollection').shift(block, dir);
+
+      // Re-render ourselves.
+      this.render();
+
+      // Highlight the block.
+      this.$('[data-block-id="' + id + '"]').addClass('ipe-highlight');
+    },
+
+    /**
+     * Removes a Block from its region.
+     *
+     * @param {Object} e
+     *   The event object.
+     */
+    removeBlock: function (e) {
+      // Get the BlockModel id (uuid).
+      var id = $(e.currentTarget).closest('[data-block-action-id]').data('block-action-id');
+
+      // Grab the model for this region.
+      var region_name = $(e.currentTarget).closest('[data-region-name]').data('region-name');
+      var region = this.model.get('regionCollection').get(region_name);
+
+      // Remove the block.
+      region.get('blockCollection').remove(id);
+
+      // Add the UUID to an array our backend will later consume.
+      this.model.get('deletedBlocks').push(id);
+
+      // Re-render ourselves.
+      this.render();
+    },
+
+    /**
+     * Configures an existing (on screen) Block.
+     *
+     * @param {Object} e
+     *   The event object.
+     */
+    configureBlock: function (e) {
+      // Get the BlockModel id (uuid).
+      var id = $(e.currentTarget).closest('[data-block-action-id]').data('block-action-id');
+
+      // Grab the model for this region.
+      var region_name = $(e.currentTarget).closest('[data-region-name]').data('region-name');
+      var region = this.model.get('regionCollection').get(region_name);
+
+      // Send a App-level event so our BlockPicker View can respond and display a Form.
+      Drupal.panels_ipe.app.trigger('configureBlock', region.get('blockCollection').get(id));
+    },
+
+    /**
+     * Reacts to a block being dropped on a droppable region.
+     *
+     * @param {Object} e
+     *   The event object.
+     * @param {Object} ui
+     *   The jQuery UI object.
+     */
+    dropBlock: function (e, ui) {
+      // Get the BlockModel id (uuid) and old region name.
+      var id = ui.draggable.data('block-id');
+      var old_region_name = ui.draggable.closest('[data-region-name]').data('region-name');
+
+      // Get the BlockModel and remove it from its last position.
+      var old_region = this.model.get('regionCollection').get(old_region_name);
+      var block = old_region.get('blockCollection').get(id);
+      old_region.get('blockCollection').remove(block, {silent: true});
+
+      // Get the new region name and index from the droppable.
+      var new_region_name = $(e.currentTarget).data('droppable-region-name');
+      var index = $(e.currentTarget).data('droppable-index');
+
+      // Add the BlockModel to its new region/index.
+      var new_region = this.model.get('regionCollection').get(new_region_name);
+      new_region.get('blockCollection').add(block, {at: index, silent: true});
+
+      // Re-render ourselves.
+      // We do this twice as jQuery UI mucks with the DOM as it lets go of a
+      // cloned element. Typically we would only ever need to re-render once.
+      this.render().render();
+
+      // Highlight the block.
+      this.$('[data-block-id="' + id + '"]').addClass('ipe-highlight');
+    },
+
+    /**
+     * Adds a new BlockModel to the layout, or updates an existing Block model.
+     *
+     * @param {Drupal.panels_ipe.BlockModel} block
+     *   The new BlockModel
+     * @param {string} region_name
+     *   The region name that the block should be placed in.
+     */
+    addBlock: function (block, region_name) {
+      // First, check if the Block already exists and remove it if so.
+      var index = null;
+      this.model.get('regionCollection').each(function (region) {
+        if (region.get('blockCollection').get(block.get('uuid'))) {
+          index = region.get('blockCollection').indexOf(block.get('uuid'));
+          region.get('blockCollection').remove(block.get('uuid'));
+        }
+      });
+
+      // Get the target region.
+      var region = this.model.get('regionCollection').get(region_name);
+      if (region) {
+        // Add the block, at its previous index if necessary.
+        var options = {};
+        if (index) {
+          options.at = index;
+        }
+        region.get('blockCollection').add(block, options);
+
+        // Re-render ourselves.
+        this.render();
+
+        // Highlight the block.
+        this.$('[data-block-id="' + block.get('uuid') + '"]').addClass('ipe-highlight');
+      }
+    }
+
+  });
+
+}(jQuery, _, Backbone, Drupal));
diff --git a/panels_ipe/js/views/TabsView.js b/panels_ipe/js/views/TabsView.js
new file mode 100644
index 0000000..7077968
--- /dev/null
+++ b/panels_ipe/js/views/TabsView.js
@@ -0,0 +1,181 @@
+/**
+ * @file
+ * The primary Backbone view for a tab collection.
+ *
+ * see Drupal.panels_ipe.TabCollection
+ */
+
+(function ($, _, Backbone, Drupal, drupalSettings) {
+
+  'use strict';
+
+  Drupal.panels_ipe.TabsView = Backbone.View.extend(/** @lends Drupal.panels_ipe.TabsView# */{
+
+    /**
+     * @type {function}
+     */
+    template_tab: _.template(
+      '<li class="ipe-tab<% if (active) { %> active<% } %>" data-tab-id="<%- id %>">' +
+      '  <a title="<%- title %>">' +
+      '    <span class="ipe-icon ipe-icon-<% if (loading) { %>loading<% } else { print(id) } %>"></span>' +
+      '    <span class="ipe-tab-title"><%- title %></span>' +
+      '  </a>' +
+      '</li>'
+    ),
+
+    /**
+     * @type {function}
+     */
+    template_content: _.template('<div class="ipe-tab-content<% if (active) { %> active<% } %>" data-tab-content-id="<%- id %>"></div>'),
+
+    /**
+     * @type {object}
+     */
+    events: {
+      'click .ipe-tab > a': 'switchTab'
+    },
+
+    /**
+     * @type {Drupal.panels_ipe.TabCollection}
+     */
+    collection: null,
+
+    /**
+     * @type {Object}
+     *
+     * An object mapping tab IDs to Backbone views.
+     */
+    tabViews: {},
+
+    /**
+     * @constructs
+     *
+     * @augments Backbone.TabsView
+     *
+     * @param {object} options
+     *   An object with the following keys:
+     * @param {object} options.tabViews
+     *   An object mapping tab IDs to Backbone views.
+     */
+    initialize: function (options) {
+      this.tabViews = options.tabViews;
+    },
+
+    /**
+     * Renders our tab collection.
+     *
+     * @return {Drupal.panels_ipe.TabsView}
+     *   Return this, for chaining.
+     */
+    render: function () {
+      // Empty our list.
+      this.$el.empty();
+
+      // Setup the initial wrapping elements.
+      this.$el.append('<ul class="ipe-tabs"></ul>');
+      this.$el.append('<div class="ipe-tabs-content"></div>');
+
+      // Append each of our tabs and their tab content view.
+      this.collection.each(function (tab) {
+        // Append the tab.
+        var id = tab.get('id');
+
+        this.$('.ipe-tabs').append(this.template_tab(tab.toJSON()));
+
+        // Render the tab content.
+        this.$('.ipe-tabs-content').append(this.template_content(tab.toJSON()));
+        // Check to see if this tab has content.
+        if (tab.get('active') && this.tabViews[id]) {
+          this.tabViews[id].setElement('[data-tab-content-id="' + id + '"]').render();
+        }
+      }, this);
+
+      return this;
+    },
+
+    /**
+     * Switches the current tab.
+     *
+     * @param {Object} e
+     *   The event object.
+     */
+    switchTab: function (e) {
+      var id;
+      if (typeof e === 'string') {
+        id = e;
+      }
+      else {
+        e.preventDefault();
+        id = $(e.currentTarget).parent().data('tab-id');
+      }
+
+      // Disable all existing tabs.
+      var animation = null;
+      var already_open = false;
+      this.collection.each(function (tab) {
+        // If the tab is loading, do nothing.
+        if (tab.get('loading')) {
+          return;
+        }
+
+        // Don't repeat comparisons, if possible.
+        var clicked = tab.get('id') === id;
+        var active = tab.get('active');
+
+        // If the user is clicking the same tab twice, close it.
+        if (clicked && active) {
+          tab.set('active', false);
+          animation = 'close';
+        }
+        // If this is the first click, open the tab.
+        else if (clicked) {
+          tab.set('active', true);
+          // Only animate the tab if there is an associate Backbone View.
+          if (this.tabViews[id]) {
+            animation = 'open';
+          }
+        }
+        // The tab wasn't clicked, make sure it's closed.
+        else {
+          // Mark that the View was already open.
+          if (active) {
+            already_open = true;
+          }
+          tab.set('active', false);
+        }
+      }, this);
+
+      // Trigger a re-render, with animation if needed.
+      if (animation === 'close') {
+        this.closeTabContent();
+      }
+      else if (animation === 'open' && !already_open) {
+        this.openTabContent();
+      }
+      else {
+        this.render();
+      }
+    },
+
+    /**
+     * Closes any currently open tab.
+     */
+    closeTabContent: function () {
+      // Close the tab, then re-render.
+      var self = this;
+      this.$('.ipe-tabs-content')['slideUp']('fast', function () { self.render(); });
+    },
+
+    /**
+     * Opens any currently closed tab.
+     */
+    openTabContent: function () {
+      // We need to render first as hypothetically nothing is open.
+      this.render();
+      this.$('.ipe-tabs-content').hide();
+      this.$('.ipe-tabs-content')['slideDown']('fast');
+    }
+
+  });
+
+}(jQuery, _, Backbone, Drupal, drupalSettings));
diff --git a/panels_ipe/panels_ipe.info.yml b/panels_ipe/panels_ipe.info.yml
new file mode 100644
index 0000000..9786c02
--- /dev/null
+++ b/panels_ipe/panels_ipe.info.yml
@@ -0,0 +1,8 @@
+name: Panels IPE
+type: module
+description: Panels In-place editor.
+core: 8.x
+package: Panels
+dependencies:
+  - panels
+  - page_manager
\ No newline at end of file
diff --git a/panels_ipe/panels_ipe.libraries.yml b/panels_ipe/panels_ipe.libraries.yml
new file mode 100644
index 0000000..d062063
--- /dev/null
+++ b/panels_ipe/panels_ipe.libraries.yml
@@ -0,0 +1,33 @@
+panels_ipe:
+  version: VERSION
+  js:
+    # Core.
+    js/panels_ipe.js: {}
+    # Models.
+    js/models/AppModel.js: {}
+    js/models/BlockModel.js: {}
+    js/models/BlockPluginModel.js: {}
+    js/models/RegionModel.js: {}
+    js/models/TabModel.js: {}
+    js/models/LayoutModel.js: {}
+    # Views.
+    js/views/AppView.js: {}
+    js/views/BlockView.js: {}
+    js/views/BlockPicker.js: {}
+    js/views/LayoutPicker.js: {}
+    js/views/LayoutView.js: {}
+    js/views/TabsView.js: {}
+  css:
+    component:
+      css/panels_ipe.css: {}
+  dependencies:
+    - core/jquery
+    - core/jquery.once
+    - core/jquery.ui
+    - core/jquery.ui.draggable
+    - core/jquery.ui.droppable
+    - core/underscore
+    - core/backbone
+    - core/drupal
+    - core/drupal.form
+    - core/drupalSettings
diff --git a/panels_ipe/panels_ipe.module b/panels_ipe/panels_ipe.module
new file mode 100644
index 0000000..18d7d94
--- /dev/null
+++ b/panels_ipe/panels_ipe.module
@@ -0,0 +1,26 @@
+<?php
+
+/**
+ * @file
+ * Contains panels_ipe.module.
+ */
+
+use Drupal\Core\Routing\RouteMatchInterface;
+
+/**
+ * Implements hook_help().
+ */
+function panels_ipe_help($route_name, RouteMatchInterface $route_match) {
+  switch ($route_name) {
+    // Main module help for the panels_ipe module.
+    case 'help.page.panels_ipe':
+      $output = '';
+      $output .= '<h3>' . t('About') . '</h3>';
+      $output .= '<p>' . t('Panels In-place editor.') . '</p>';
+      // @todo: Add useful help text for Panels In-place editor.
+      return $output;
+
+    default:
+  }
+}
+
diff --git a/panels_ipe/panels_ipe.permissions.yml b/panels_ipe/panels_ipe.permissions.yml
new file mode 100644
index 0000000..6350b38
--- /dev/null
+++ b/panels_ipe/panels_ipe.permissions.yml
@@ -0,0 +1,2 @@
+access panels in-place editing:
+  title: 'Access panels in-place editing'
\ No newline at end of file
diff --git a/panels_ipe/panels_ipe.routing.yml b/panels_ipe/panels_ipe.routing.yml
new file mode 100644
index 0000000..5b097cf
--- /dev/null
+++ b/panels_ipe/panels_ipe.routing.yml
@@ -0,0 +1,68 @@
+panels_ipe.cancel:
+  path: '/admin/panels_ipe/variant/{page_variant}/cancel'
+  defaults:
+      _controller: '\Drupal\panels_ipe\Controller\PanelsIPEPageController::cancelPageVariant'
+  requirements:
+    _entity_access: page_variant.update
+    _permission: 'access panels in-place editing'
+
+panels_ipe.block_plugins:
+  path: '/admin/panels_ipe/variant/{page_variant}/block_plugins'
+  defaults:
+      _controller: '\Drupal\panels_ipe\Controller\PanelsIPEPageController::getBlockPlugins'
+  requirements:
+    _entity_access: page_variant.read
+    _permission: 'access panels in-place editing'
+    _method: 'GET'
+
+panels_ipe.block_plugin.form:
+  path: '/admin/panels_ipe/variant/{page_variant}/layout/{layout_id}/block_plugins/{plugin_id}/form'
+  defaults:
+      _controller: '\Drupal\panels_ipe\Controller\PanelsIPEPageController::getBlockPluginForm'
+  requirements:
+    _entity_access: page_variant.read
+    _permission: 'access panels in-place editing'
+
+panels_ipe.block_plugin_existing.form:
+  path: '/admin/panels_ipe/variant/{page_variant}/layout/{layout_id}/block_plugins/{plugin_id}/block/{block_uuid}/form'
+  defaults:
+      _controller: '\Drupal\panels_ipe\Controller\PanelsIPEPageController::getBlockPluginForm'
+  requirements:
+    _entity_access: page_variant.read
+    _permission: 'access panels in-place editing'
+
+panels_ipe.layouts:
+  path: '/admin/panels_ipe/variant/{page_variant}/layouts'
+  defaults:
+      _controller: '\Drupal\panels_ipe\Controller\PanelsIPEPageController::getLayouts'
+  requirements:
+    _entity_access: page_variant.read
+    _permission: 'access panels in-place editing'
+    _method: 'GET'
+
+panels_ipe.layout:
+  path: '/admin/panels_ipe/variant/{page_variant}/layouts/{layout_id}'
+  defaults:
+      _controller: '\Drupal\panels_ipe\Controller\PanelsIPEPageController::getLayout'
+  requirements:
+    _entity_access: page_variant.read
+    _permission: 'access panels in-place editing'
+    _method: 'GET'
+
+panels_ipe.layout.update:
+  path: '/admin/panels_ipe/variant/{page_variant}/layouts/{layout_id}'
+  defaults:
+      _controller: '\Drupal\panels_ipe\Controller\PanelsIPEPageController::updateLayout'
+  requirements:
+    _entity_access: page_variant.update
+    _permission: 'access panels in-place editing'
+    _method: 'PUT'
+
+panels_ipe.layout.save:
+  path: '/admin/panels_ipe/variant/{page_variant}/layouts/{layout_id}'
+  defaults:
+      _controller: '\Drupal\panels_ipe\Controller\PanelsIPEPageController::createLayout'
+  requirements:
+    _entity_access: page_variant.update
+    _permission: 'access panels in-place editing'
+    _method: 'POST'
diff --git a/panels_ipe/src/Controller/PanelsIPEPageController.php b/panels_ipe/src/Controller/PanelsIPEPageController.php
new file mode 100644
index 0000000..8b11056
--- /dev/null
+++ b/panels_ipe/src/Controller/PanelsIPEPageController.php
@@ -0,0 +1,395 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\panels_ipe\Controller\PanelsIPEPageController.
+ */
+
+namespace Drupal\panels_ipe\Controller;
+
+use Drupal\Component\Serialization\Json;
+use Drupal\Component\Utility\Html;
+use Drupal\Core\Ajax\AjaxResponse;
+use Drupal\Core\Ajax\AppendCommand;
+use Drupal\Core\Block\BlockManagerInterface;
+use Drupal\Core\Controller\ControllerBase;
+use Drupal\Core\Render\Element;
+use Drupal\Core\Render\RendererInterface;
+use Drupal\layout_plugin\Plugin\Layout\LayoutPluginManagerInterface;
+use Drupal\page_manager\PageVariantInterface;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Symfony\Component\HttpFoundation\Request;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\HttpKernel\Exception\NotFoundHttpException;
+use Symfony\Component\HttpFoundation\JsonResponse;
+use Drupal\user\SharedTempStoreFactory;
+
+/**
+ * Contains all JSON endpoints required for Panels IPE + Page Manager.
+ */
+class PanelsIPEPageController extends ControllerBase {
+
+  /**
+   * @var \Drupal\Core\Block\BlockManagerInterface
+   */
+  protected $blockManager;
+
+  /**
+   * @var \Drupal\Core\Render\RendererInterface
+   */
+  protected $renderer;
+
+  /**
+   * @var \Drupal\layout_plugin\Plugin\Layout\LayoutPluginManagerInterface
+   */
+  protected $layoutPluginManager;
+
+  /**
+   * @var \Drupal\user\SharedTempStore
+   */
+  protected $tempStore;
+
+  /**
+   * Constructs a new PanelsIPEController.
+   *
+   * @param \Drupal\Core\Block\BlockManagerInterface $block_manager
+   * @param \Drupal\Core\Render\RendererInterface $renderer
+   * @param \Drupal\layout_plugin\Plugin\Layout\LayoutPluginManagerInterface $layout_plugin_manager
+   * @param \Drupal\user\SharedTempStoreFactory $temp_store_factory
+   */
+  public function __construct(BlockManagerInterface $block_manager, RendererInterface $renderer, LayoutPluginManagerInterface $layout_plugin_manager, SharedTempStoreFactory $temp_store_factory) {
+    $this->blockManager = $block_manager;
+    $this->renderer = $renderer;
+    $this->layoutPluginManager = $layout_plugin_manager;
+    $this->tempStore = $temp_store_factory->get('panels_ipe');
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('plugin.manager.block'),
+      $container->get('renderer'),
+      $container->get('plugin.manager.layout_plugin'),
+      $container->get('user.shared_tempstore')
+    );
+  }
+
+  /**
+ * Takes the current Page Variant and returns a possibly modified Page Variant
+ * based on what's in TempStore for this user.
+ *
+ * @param \Drupal\page_manager\PageVariantInterface $page_variant
+ *   The current Page Variant.
+ *
+ * @return \Drupal\page_manager\PageVariantInterface
+ */
+  protected function loadPageVariant(PageVariantInterface $page_variant) {
+    // If a temporary configuration for this variant exists, use it.
+    $temp_store_key = 'variant.' . $page_variant->id();
+    if ($variant_config = $this->tempStore->get($temp_store_key)) {
+      /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+      $variant_plugin = $page_variant->getVariantPlugin();
+      $variant_plugin->setConfiguration($variant_config);
+    }
+
+    return $page_variant;
+  }
+
+  /**
+   * Takes the current Page Variant and saves it, optionally deleting anything
+   * that may be in temp store.
+   *
+   * @param \Drupal\page_manager\PageVariantInterface $page_variant
+   *   The current Page Variant.
+   * @param bool $temp
+   *   Whether or not to save to temp store.
+   *
+   * @return \Drupal\page_manager\PageVariantInterface
+   */
+  protected function savePageVariant(PageVariantInterface $page_variant, $temp = FALSE) {
+    $temp_store_key = 'variant.' . $page_variant->id();
+    // Save configuration to temp store.
+    if ($temp) {
+      /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+      $variant_plugin = $page_variant->getVariantPlugin();
+      $this->tempStore->set($temp_store_key, $variant_plugin->getConfiguration());
+      return SAVED_UPDATED;
+    }
+    else {
+      // Check to see if temp store has configuration saved.
+      if ($variant_config = $this->tempStore->get($temp_store_key)) {
+        // Delete the existing temp store value.
+        $this->tempStore->delete($temp_store_key);
+      }
+      // Save the real entity.
+      return $page_variant->save();
+    }
+  }
+
+  /**
+   * Removes any temporary changes to the variant.
+   *
+   * @param \Drupal\page_manager\PageVariantInterface $page_variant
+   *   The current Page Variant.
+   *
+   * @return \Symfony\Component\HttpFoundation\JsonResponse
+   */
+  public function cancelPageVariant(PageVariantInterface $page_variant) {
+    // If a temporary configuration for this variant exists, use it.
+    $temp_store_key = 'variant.' . $page_variant->id();
+    if ($variant_config = $this->tempStore->get($temp_store_key)) {
+      $this->tempStore->delete($temp_store_key);
+    }
+
+    // Return an empty JSON response.
+    return new JsonResponse();
+  }
+
+  /**
+   * Gets a list of available Layouts, without wrapping HTML.
+   *
+   * @param \Drupal\page_manager\PageVariantInterface $page_variant
+   *   The page variant entity.
+   *
+   * @return \Symfony\Component\HttpFoundation\JsonResponse
+   */
+  public function getLayouts(PageVariantInterface $page_variant) {
+    $page_variant = $this->loadPageVariant($page_variant);
+
+    /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+    $variant_plugin = $page_variant->getVariantPlugin();
+
+    // Get the current layout.
+    $layout = $variant_plugin->getLayout()->getPluginId();
+
+    // Get a list of all available layouts.
+    $layouts = $this->layoutPluginManager->getLayoutOptions();
+    $data = [];
+    foreach ($layouts as $id => $label) {
+      $data[] = [
+        'id' => $id,
+        'label' => $label,
+        'current' => $layout == $id,
+      ];
+    }
+
+    // Return a structured JSON response for our Backbone App.
+    return new JsonResponse($data);
+  }
+
+  /**
+   * Gets a given layout with empty regions and relevant metadata.
+   *
+   * @param \Drupal\page_manager\PageVariantInterface $page_variant
+   *   The page variant entity.
+   * @param string $layout_id
+   *   The machine name of the requested layout.
+   *
+   * @return \Symfony\Component\HttpFoundation\JsonResponse
+   */
+  public function getLayout(PageVariantInterface $page_variant, $layout_id) {
+    /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+    $variant_plugin = $page_variant->getVariantPlugin();
+
+    // Build the requested layout.
+    $configuration = $variant_plugin->getConfiguration();
+    $configuration['layout'] = $layout_id;
+    $variant_plugin->setConfiguration($configuration);
+
+    // Inherit our PageVariant's contexts before rendering.
+    $variant_plugin->setContexts($page_variant->getContexts());
+
+    $regions = $variant_plugin->getRegionNames();
+    $region_data = [];
+    $region_content = [];
+
+    // Compile region content and metadata.
+    foreach ($regions as $id => $label) {
+      // Wrap the region with a class/data attribute that our app can use.
+      $region_name = Html::getClass("block-region-$id");
+      $region_content[$id] = [
+        '#prefix' =>'<div class="' . $region_name . '" data-region-name="' . $id . '">',
+        '#suffix' => '</div>',
+      ];
+
+      // Format region metadata.
+      $region_data[] = [
+        'name' => $id,
+        'label' => $label,
+      ];
+    }
+    $build = $variant_plugin->getLayout()->build($region_content);
+
+    // Get the current layout.
+    $current_layout = $variant_plugin->getLayout()->getPluginId();
+
+    // Get a list of all available layouts.
+    $layouts = $this->layoutPluginManager->getLayoutOptions();
+
+    $data = [
+      'id' => $layout_id,
+      'label' => $layouts[$layout_id],
+      'current' => $current_layout == $layout_id,
+      'html' => $this->renderer->render($build),
+      'regions' => $region_data,
+    ];
+
+    // Update temp store.
+    $this->savePageVariant($page_variant, TRUE);
+
+    // Return a structured JSON response for our Backbone App.
+    return new JsonResponse($data);
+  }
+
+  /**
+   * Updates the current PageVariant based on the changes done in our app.
+   *
+   * @param \Drupal\page_manager\PageVariantInterface $page_variant
+   *   The current variant.
+   * @param array $layout
+   *   The decoded LayoutModel from our App.
+   *
+   * @return \Symfony\Component\HttpFoundation\JsonResponse
+   */
+  protected function updateVariant(PageVariantInterface $page_variant, $layout) {
+    // Load the variant.
+    $page_variant = $this->loadPageVariant($page_variant);
+
+    // Load the current variant plugin.
+    /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+    $variant_plugin = $page_variant->getVariantPlugin();
+
+    // Set our weight and region based on the metadata in our Backbone app.
+    foreach ($layout['regionCollection'] as $region) {
+      $weight = 0;
+      foreach ($region['blockCollection'] as $block) {
+        /** @var \Drupal\Core\Block\BlockBase $block_instance */
+        $block_instance = $variant_plugin->getBlock($block['uuid']);
+
+        $block_instance->setConfigurationValue('region', $region['name']);
+        $block_instance->setConfigurationValue('weight', ++$weight);
+
+        $variant_plugin->updateBlock($block['uuid'], $block_instance->getConfiguration());
+      }
+    }
+
+    // Remove blocks that need removing.
+    // @todo We should do this on the fly instead of at on save.
+    foreach ($layout['deletedBlocks'] as $uuid) {
+      $variant_plugin->removeBlock($uuid);
+    }
+
+    // Save the variant and remove temp storage.
+    $this->savePageVariant($page_variant);
+
+    return new JsonResponse(['deletedBlocks' => []]);
+  }
+
+  /**
+   * Updates (PUT) an existing Layout in this Variant.
+   *
+   * @param \Drupal\page_manager\PageVariantInterface $page_variant
+   *   The current variant.
+   * @param \Symfony\Component\HttpFoundation\Request $request
+   *   The current request.
+   *
+   * @return \Symfony\Component\HttpFoundation\JsonResponse
+   */
+  public function updateLayout(PageVariantInterface $page_variant, Request $request) {
+    // Decode the request.
+    $content = $request->getContent();
+    if (!empty($content) && $layout = Json::decode($content)) {
+      return $this->updateVariant($page_variant, $layout);
+    }
+    else {
+      return new JsonResponse(['success' => false], 400);
+    }
+  }
+
+  /**
+   * Creates (POST) a new Layout for this Variant.
+   *
+   * @param \Drupal\page_manager\PageVariantInterface $page_variant
+   *   The current variant.
+   * @param \Symfony\Component\HttpFoundation\Request $request
+   *   The current request.
+   *
+   * @return \Symfony\Component\HttpFoundation\JsonResponse
+   */
+  public function createLayout(PageVariantInterface $page_variant, Request $request) {
+    // For now, creating and updating a layout is the same thing.
+    return $this->updateLayout($page_variant, $request);
+  }
+
+  /**
+   * Gets a list of Block Plugins from the server.
+   *
+   * @param \Drupal\page_manager\PageVariantInterface $page_variant
+   *   The current variant.
+   *
+   * @return \Symfony\Component\HttpFoundation\JsonResponse
+   */
+  public function getBlockPlugins(PageVariantInterface $page_variant) {
+    $page_variant = $this->loadPageVariant($page_variant);
+
+    // Get block plugin definitions from the server.
+    $definitions = $this->blockManager->getDefinitionsForContexts($page_variant->getContexts());
+
+    // Assemble our relevant data.
+    $data = [];
+    foreach ($definitions as $plugin_id => $definition) {
+      // Don't add broken Blocks.
+      if ($plugin_id == 'broken') {
+        continue;
+      }
+      $data[] = [
+        'plugin_id' => $plugin_id,
+        'label' => $definition['admin_label'],
+        'category' => $definition['category'],
+        'id' => $definition['id'],
+        'provider' => $definition['provider'],
+      ];
+    }
+
+    // Return a structured JSON response for our Backbone App.
+    return new JsonResponse($data);
+  }
+
+  /**
+   * Drupal AJAX compatible route for rendering a given Block Plugin's form.
+   *
+   * @param \Drupal\page_manager\PageVariantInterface $page_variant
+   *   The current variant.
+   * @param string $plugin_id
+   *   The requested Block Plugin ID.
+   * @param string $block_uuid
+   *   The Block UUID, if this is an existing Block.
+   *
+   * @return Response
+   */
+  public function getBlockPluginForm(PageVariantInterface $page_variant, $plugin_id, $block_uuid = NULL) {
+    $page_variant = $this->loadPageVariant($page_variant);
+
+    // Get the configuration in the block plugin definition.
+    $definitions = $this->blockManager->getDefinitionsForContexts($page_variant->getContexts());
+
+    // Check if the block plugin is defined.
+    if (!isset($definitions[$plugin_id])) {
+      throw new NotFoundHttpException();
+    }
+
+    // Build a Block Plugin configuration form.
+    $form = $this->formBuilder()->getForm('Drupal\panels_ipe\Form\PanelsIPEBlockPluginForm', $plugin_id, $page_variant, $block_uuid);
+
+    // Return the rendered form as a proper Drupal AJAX response.
+    // This is needed as forms often have custom JS and CSS that need added,
+    // and it isn't worth replicating things that work in Drupal with Backbone.
+    $response = new AjaxResponse();
+    $command = new AppendCommand('.ipe-block-plugin-form', $form);
+    $response->addCommand($command);
+    return $response;
+  }
+
+}
diff --git a/panels_ipe/src/Form/PanelsIPEBlockPluginForm.php b/panels_ipe/src/Form/PanelsIPEBlockPluginForm.php
new file mode 100644
index 0000000..f2dac52
--- /dev/null
+++ b/panels_ipe/src/Form/PanelsIPEBlockPluginForm.php
@@ -0,0 +1,370 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\panels_ipe\Form\PanelsIPEBlockPluginForm.
+ */
+
+namespace Drupal\panels_ipe\Form;
+
+use Drupal\Component\Plugin\PluginManagerInterface;
+use Drupal\Core\Form\FormBase;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\Core\Plugin\Context\ContextHandlerInterface;
+use Drupal\Component\Plugin\ContextAwarePluginInterface;
+use Drupal\Core\Render\RendererInterface;
+use Drupal\page_manager\Entity\PageVariant;
+use Drupal\page_manager\PageVariantInterface;
+use Drupal\user\SharedTempStoreFactory;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * Provides a form for adding a block plugin temporarily using AJAX.
+ *
+ * Unlike most forms, this never saves a block plugin instance or persists it
+ * from state to state. This is only for the initial addition to the Layout.
+ */
+class PanelsIPEBlockPluginForm extends FormBase {
+
+  /**
+   * @var \Drupal\Component\Plugin\PluginManagerInterface $blockManager
+   */
+  protected $blockManager;
+
+  /**
+   * @var \Drupal\Core\Plugin\Context\ContextHandlerInterface $contextHandler
+   */
+  protected $contextHandler;
+
+  /**
+   * @var \Drupal\Core\Render\RendererInterface $renderer
+   */
+  protected $renderer;
+
+  /**
+   * @var \Drupal\user\SharedTempStore
+   */
+  protected $tempStore;
+
+  /**
+   * Constructs a new PanelsIPEBlockPluginForm.
+   *
+   * @param \Drupal\Component\Plugin\PluginManagerInterface $block_manager
+   * @param \Drupal\Core\Plugin\Context\ContextHandlerInterface $context_handler
+   * @param \Drupal\Core\Render\RendererInterface $renderer
+   * @param \Drupal\user\SharedTempStoreFactory $temp_store_factory
+   */
+  public function __construct(PluginManagerInterface $block_manager, ContextHandlerInterface $context_handler, RendererInterface $renderer, SharedTempStoreFactory $temp_store_factory) {
+    $this->blockManager = $block_manager;
+    $this->contextHandler = $context_handler;
+    $this->renderer = $renderer;
+    $this->tempStore = $temp_store_factory->get('panels_ipe');
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container) {
+    return new static(
+      $container->get('plugin.manager.block'),
+      $container->get('context.handler'),
+      $container->get('renderer'),
+      $container->get('user.shared_tempstore')
+    );
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function getFormId() {
+    return 'panels_ipe_block_plugin_form';
+  }
+
+  /**
+   * Builds a form that constructs a unsaved instance of a Block for the IPE.
+   *
+   * @param array $form
+   *   An associative array containing the structure of the form.
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   *   The current state of the form.
+   * @param string $plugin_id
+   *   The requested Block Plugin ID.
+   * @param \Drupal\page_manager\PageVariantInterface $page_variant
+   *   The current PageVariant ID.
+   * @param string $uuid
+   *   An optional Block UUID, if this is an existing Block.
+   *
+   * @return array
+   *   The form structure.
+   */
+  public function buildForm(array $form, FormStateInterface $form_state, $plugin_id = NULL, PageVariantInterface $page_variant = NULL, $uuid = NULL) {
+    // We require these default arguments.
+    if (!$plugin_id || !$page_variant) {
+      return FALSE;
+    }
+
+    /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+    $variant_plugin = $page_variant->getVariantPlugin();
+
+    // Grab the current layout's regions.
+    $regions = $variant_plugin->getRegionNames();
+
+    // If $uuid is present, a block should exist.
+    if ($uuid) {
+      /** @var \Drupal\Core\Block\BlockBase $block_instance */
+      $block_instance = $variant_plugin->getBlock($uuid);
+    }
+    else {
+      // Create an instance of this Block plugin.
+      /** @var \Drupal\Core\Block\BlockBase $block_instance */
+      $block_instance = $this->blockManager->createInstance($plugin_id);
+    }
+
+    // Determine the current region.
+    $block_config = $block_instance->getConfiguration();
+    if (isset($block_config['region']) && isset($regions[$block_config['region']])) {
+      $region = $block_config['region'];
+    }
+    else {
+      $region = reset($regions);
+    }
+
+    // Wrap the form so that our AJAX submit can replace its contents.
+    $form['#prefix'] = '<div id="panels-ipe-block-plugin-form-wrapper">';
+    $form['#suffix'] = '</div>';
+
+    // Add our various card wrappers.
+    $form['flipper'] = [
+      '#type' => 'container',
+      '#attributes' => [
+        'class' => 'flipper',
+      ],
+    ];
+
+    $form['flipper']['front'] = [
+      '#type' => 'container',
+      '#attributes' => [
+        'class' => 'front',
+      ],
+    ];
+
+    $form['flipper']['back'] = [
+      '#type' => 'container',
+      '#attributes' => [
+        'class' => 'back',
+      ],
+    ];
+
+    $form['#attributes']['class'][] = 'flip-container';
+
+    // Get the base configuration form for this block.
+    $form['flipper']['front']['settings'] = $block_instance->buildConfigurationForm([], $form_state);
+
+    // Add the block ID, variant ID to the form as values.
+    $form['plugin_id'] = ['#type' => 'value', '#value' => $plugin_id];
+    $form['variant_id'] = ['#type' => 'value', '#value' => $page_variant->id()];
+    $form['uuid'] = ['#type' => 'value', '#value' => $uuid];
+
+    // Add a select list for region assignment.
+    $form['flipper']['front']['settings']['region'] = [
+      '#title' => $this->t('Region'),
+      '#type' => 'select',
+      '#options' => $regions,
+      '#required' => TRUE,
+      '#default_value' => $region
+    ];
+
+    // Add an add button, which is only used by our App.
+    $form['submit'] = [
+      '#type' => 'button',
+      '#value' => $uuid ? $this->t('Update') : $this->t('Add'),
+      '#ajax' => [
+        'callback' => '::submitForm',
+        'wrapper' => 'panels-ipe-block-plugin-form-wrapper',
+        'method' => 'replace',
+        'progress' => [
+          'type' => 'throbber',
+          'message' => '',
+        ],
+      ],
+    ];
+
+    // Add a preview button.
+    $form['preview'] = [
+      '#type' => 'button',
+      '#value' => $this->t('Toggle Preview'),
+      '#ajax' => [
+        'callback' => '::submitPreview',
+        'wrapper' => 'panels-ipe-block-plugin-form-wrapper',
+        'method' => 'replace',
+        'progress' => [
+          'type' => 'throbber',
+          'message' => '',
+        ],
+      ],
+    ];
+
+    return $form;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function validateForm(array &$form, FormStateInterface $form_state) {
+    $block_instance = $this->getBlockInstance($form_state);
+
+    $block_instance->validateConfigurationForm($form, $form_state);
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function submitForm(array &$form, FormStateInterface $form_state) {
+    $block_instance = $this->getBlockInstance($form_state);
+
+    // Submit the block form.
+    $block_instance->submitConfigurationForm($form, $form_state);
+
+    // Save the block instance to our temporary configuration.
+    /** @var \Drupal\page_manager\PageVariantInterface $page_variant */
+    $page_variant = PageVariant::load($form_state->getValue('variant_id'));
+    /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+    $variant_plugin = $page_variant->getVariantPlugin();
+
+    // If a temporary configuration for this variant exists, use it.
+    $temp_store_key = 'variant.' . $page_variant->id();
+    if ($variant_config = $this->tempStore->get($temp_store_key)) {
+      $variant_plugin->setConfiguration($variant_config);
+    }
+
+    // Set the block region appropriately.
+    $block_config = $block_instance->getConfiguration();
+    $block_config['region'] = $form_state->getValue('region');
+
+    // Determine if we need to update or add this block.
+    if ($uuid = $form_state->getValue('uuid')) {
+      $variant_plugin->updateBlock($uuid, $block_config);
+    }
+    else {
+      $uuid = $variant_plugin->addBlock($block_config);
+    }
+
+    // Set the tempstore value.
+    $variant_config = $variant_plugin->getConfiguration();
+    $this->tempStore->set('variant.' . $page_variant->id(), $variant_config);
+
+    // Assemble data required for our App.
+    $build = $this->buildBlockInstance($block_instance);
+
+    // Add our data attribute for the Backbone app.
+    $build['#attributes']['data-block-id'] = $uuid;
+
+    $settings = [
+      'uuid' => $uuid,
+      'label' => $block_instance->label(),
+      'id' => $block_instance->getPluginId(),
+      'region' => $form_state->getValue('region'),
+      'html' => $this->renderer->render($build)
+    ];
+
+    // Add Block metadata and HTML as a drupalSetting.
+    // @todo How do we handle #attachments in the $build this way?
+    $form['#attached']['drupalSettings']['panels_ipe']['updated_block'] = $settings;
+
+    return $form;
+  }
+
+  /**
+   * Previews our current Block configuration.
+   *
+   * @param array $form
+   *   An associative array containing the structure of the form.
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   *   The current state of the form.
+   *
+   * @return array $form
+   *   The form structure.
+   */
+  public function submitPreview(array &$form, FormStateInterface $form_state) {
+    // Get the Block instance.
+    $block_instance = $this->getBlockInstance($form_state);
+    $block_instance->submitConfigurationForm($form, $form_state);
+
+    // Gather a render array for the block.
+    $build = $this->buildBlockInstance($block_instance);
+
+    // Add the preview to the backside of the card and inform JS that we need to
+    // be flipped.
+    $form['flipper']['back']['preview'] = $build;
+    $form['#attached']['drupalSettings']['panels_ipe']['toggle_preview'] = TRUE;
+
+    return $form;
+  }
+
+  /**
+   * Loads or creates a Block Plugin instance suitable for rendering or testing.
+   *
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   *   The current state of the form.
+   *
+   * @return \Drupal\Core\Block\BlockBase
+   *   The Block Plugin instance.
+   */
+  protected function getBlockInstance($form_state) {
+    /** @var \Drupal\page_manager\PageVariantInterface $page_variant */
+    $page_variant = PageVariant::load($form_state->getValue('variant_id'));
+    /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+    $variant_plugin = $page_variant->getVariantPlugin();
+
+    // If a UUID is provided, the Block should already exist.
+    if ($uuid = $form_state->getValue('uuid')) {
+      // If a temporary configuration for this variant exists, use it.
+      $temp_store_key = 'variant.' . $page_variant->id();
+      if ($variant_config = $this->tempStore->get($temp_store_key)) {
+        $variant_plugin->setConfiguration($variant_config);
+      }
+
+      // Load the existing Block instance.
+      $block_instance = $variant_plugin->getBlock($uuid);
+    }
+    else {
+      // Create an instance of this Block plugin.
+      /** @var \Drupal\Core\Block\BlockBase $block_instance */
+      $block_instance = $this->blockManager->createInstance($form_state->getValue('plugin_id'));
+    }
+
+    // Add context to the block.
+    if ($block_instance instanceof ContextAwarePluginInterface) {
+      $this->contextHandler->applyContextMapping($block_instance, $page_variant->getContexts());
+    }
+
+    return $block_instance;
+  }
+
+  /**
+   * Compiles a render array for the given Block instance based on the form.
+   *
+   * @param \Drupal\Core\Block\BlockBase $block_instance
+   *   The Block instance you want to render.
+   *
+   * @return array $build
+   *   The Block render array.
+   */
+  protected function buildBlockInstance($block_instance) {
+    // Get the new block configuration.
+    $configuration = $block_instance->getConfiguration();
+
+    // Compile the render array.
+    $build = [
+      '#theme' => 'block',
+      '#configuration' => $configuration,
+      '#plugin_id' => $block_instance->getPluginId(),
+      '#base_plugin_id' => $block_instance->getBaseId(),
+      '#derivative_plugin_id' => $block_instance->getDerivativeId(),
+      'content' => $block_instance->build(),
+    ];
+
+    return $build;
+  }
+
+}
diff --git a/panels_ipe/src/Plugin/DisplayBuilder/InPlaceEditorDisplayBuilder.php b/panels_ipe/src/Plugin/DisplayBuilder/InPlaceEditorDisplayBuilder.php
new file mode 100644
index 0000000..291d59f
--- /dev/null
+++ b/panels_ipe/src/Plugin/DisplayBuilder/InPlaceEditorDisplayBuilder.php
@@ -0,0 +1,205 @@
+<?php
+
+/**
+ * @file
+ * Contains \Drupal\panels_ipe\Plugin\DisplayBuilder\InPlaceEditorDisplayBuilder.
+ */
+
+namespace Drupal\panels_ipe\Plugin\DisplayBuilder;
+
+use Drupal\Component\Utility\Html;
+use Drupal\Component\Utility\NestedArray;
+use Drupal\page_manager\Entity\PageVariant;
+use Drupal\page_manager\PageVariantInterface;
+use Drupal\Core\Plugin\Context\ContextHandlerInterface;
+use Drupal\Core\Session\AccountInterface;
+use Drupal\layout_plugin\Plugin\Layout\LayoutInterface;
+use Drupal\panels\Plugin\DisplayBuilder\StandardDisplayBuilder;
+use Drupal\user\SharedTempStoreFactory;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+
+/**
+ * The In-place editor display builder for viewing and editing a
+ * PanelsDisplayVariant in the same place.
+ *
+ * @DisplayBuilder(
+ *   id = "ipe",
+ *   label = @Translation("In-place editor")
+ * )
+ */
+class InPlaceEditorDisplayBuilder extends StandardDisplayBuilder {
+
+  /**
+   * @var \Drupal\user\SharedTempStore
+   */
+  protected $tempStore;
+
+  /**
+   * Constructs a new InPlaceEditorDisplayBuilder.
+   *
+   * @param array $configuration
+   *   A configuration array containing information about the plugin instance.
+   * @param string $plugin_id
+   *   The plugin ID for the plugin instance.
+   * @param mixed $plugin_definition
+   *   The plugin definition.
+   * @param \Drupal\Core\Plugin\Context\ContextHandlerInterface $context_handler
+   *   The context handler.
+   * @param \Drupal\Core\Session\AccountInterface $account
+   *   The current user.
+   * @param \Drupal\user\SharedTempStoreFactory $temp_store_factory
+   *   The factory for the temp store object.
+   */
+  public function __construct(array $configuration, $plugin_id, $plugin_definition, ContextHandlerInterface $context_handler, AccountInterface $account, SharedTempStoreFactory $temp_store_factory) {
+    parent::__construct($configuration, $plugin_id, $plugin_definition, $context_handler, $account);
+
+    $this->tempStore = $temp_store_factory->get('panels_ipe');
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition) {
+    return new static(
+      $configuration,
+      $plugin_id,
+      $plugin_definition,
+      $container->get('context.handler'),
+      $container->get('current_user'),
+      $container->get('user.shared_tempstore')
+    );
+  }
+
+  /**
+   * Compiles settings needed for the IPE to function.
+   *
+   * @param array $regions
+   *   The render array representing regions.
+   * @param \Drupal\layout_plugin\Plugin\Layout\LayoutInterface $layout
+   *   The current layout.
+   * @param \Drupal\page_manager\PageVariantInterface $page_variant
+   *   The current path's page variant.
+   *
+   * @return array|bool
+   *   An associative array representing the contents of drupalSettings, or
+   *   FALSE if there was an error.
+   */
+  protected function getDrupalSettings(array $regions, LayoutInterface $layout, PageVariantInterface $page_variant) {
+    $settings = [
+      'regions' => [],
+    ];
+
+    // Add current block IDs to settings sorted by region.
+    foreach ($regions as $region => $blocks) {
+      $settings['regions'][$region]  = [
+        'name' => $region,
+        'label' => '',
+        'blocks' => [],
+      ];
+
+      if (!$blocks) {
+        continue;
+      }
+
+      /** @var \Drupal\Core\Block\BlockPluginInterface[] $blocks */
+      foreach ($blocks as $block_uuid => $block) {
+        $configuration = $block->getConfiguration();
+        $setting = [
+          'uuid' => $block_uuid,
+          'label' => $block->label(),
+          'id' => $block->getPluginId(),
+        ];
+        $settings['regions'][$region]['blocks'][$block_uuid] = NestedArray::mergeDeep($configuration, $setting);
+      }
+    }
+
+    // Add the layout information.
+    $layout_definition = $layout->getPluginDefinition();
+    $settings['layout'] = [
+      'id' => $layout->getPluginId(),
+      'label' => $layout_definition['label'],
+      'original' => true,
+    ];
+
+    // Add the display variant's config.
+    $settings['display_variant'] = [
+      'label' => $page_variant->label(),
+      'id' => $page_variant->id(),
+      'uuid' => $page_variant->uuid(),
+    ];
+
+    return $settings;
+  }
+
+  /**
+   * {@inheritdoc}
+   */
+  public function build(array $regions, array $contexts, LayoutInterface $layout = NULL) {
+    $build = parent::build($regions, $contexts, $layout);
+
+    // Load our PageVariant.
+    /** @var \Drupal\page_manager\PageVariantInterface $page_variant */
+    $page_variant = \Drupal::request()->attributes->get('page_manager_page_variant');
+
+    // If we can't grab the PageVariant, we can't do any IPE actions later on.
+    if (!$page_variant) {
+      return $build;
+    }
+
+    // Attach the Panels In-place editor library based on permissions.
+    $unsaved = FALSE;
+    if ($this->account->hasPermission('access panels in-place editing')) {
+      // If a temporary configuration for this variant exists, use it.
+      $temp_store_key = 'variant.' . $page_variant->id();
+      if ($variant_config = $this->tempStore->get($temp_store_key)) {
+        // Reload the PageVariant. This is required to set variant plugin
+        // configuration correctly.
+        $page_variant = PageVariant::load($page_variant->id());
+
+        /** @var \Drupal\panels\Plugin\DisplayVariant\PanelsDisplayVariant $variant_plugin */
+        $variant_plugin = $page_variant->getVariantPlugin();
+        $variant_plugin->setConfiguration($variant_config);
+
+        // Override our initial values with what's in TempStore.
+        $layout = $variant_plugin->getLayout();
+        $regions = $variant_plugin->getRegionAssignments();
+
+        // Indicate that the user is viewing un-saved changes.
+        $unsaved = TRUE;
+      }
+
+      // Build again as regions and layout may have changed.
+      $build = parent::build($regions, $contexts, $layout);
+
+      foreach ($regions as $region => $blocks) {
+        // Wrap each region with a unique class and data attribute.
+        $region_name = Html::getClass("block-region-$region");
+        $build[$region]['#prefix'] = '<div class="' . $region_name . '" data-region-name="' . $region . '">';
+        $build[$region]['#suffix'] = '</div>';
+
+        if ($blocks) {
+          foreach ($blocks as $block_id => $block) {
+            $build[$region][$block_id]['#attributes']['data-block-id'] = $block_id;
+          }
+        }
+      }
+
+      // Attach the required settings and IPE.
+      $build['#attached']['library'][] = 'panels_ipe/panels_ipe';
+      $build['#attached']['drupalSettings']['panels_ipe'] = $this->getDrupalSettings($regions, $layout, $page_variant);
+
+      // Add our custom elements to the build.
+      $build['#prefix'] = '<div id="panels-ipe-content">';
+      // Indicate unsaved elements.
+      if ($unsaved) {
+        $build['#suffix'] = '</div><div id="panels-ipe-tray" class="unsaved"></div>';
+      }
+      else {
+        $build['#suffix'] = '</div><div id="panels-ipe-tray"></div>';
+      }
+    }
+
+    return $build;
+  }
+
+}