diff --git a/extension.json b/extension.json
index fb04a4b3a7..8535166f91 100644
--- a/extension.json
+++ b/extension.json
@@ -1025,6 +1025,7 @@
 				"modules/ve-mw/ui/widgets/ve.ui.MWTocItemWidget.js",
 				"modules/ve-mw/ui/widgets/ve.ui.MWTocWidget.js",
 				"modules/ve-mw/ui/dialogs/ve.ui.MWExtensionDialog.js",
+				"modules/ve-mw/ui/dialogs/ve.ui.MWExtensionPreviewDialog.js",
 				"modules/ve-mw/ui/dialogs/ve.ui.MWSaveDialog.js",
 				"modules/ve-mw/ui/dialogs/ve.ui.MWWelcomeDialog.js",
 				"modules/ve-mw/ui/dialogs/ve.ui.MWCommandHelpDialog.js",
diff --git a/modules/ve-mw/ui/dialogs/ve.ui.MWExtensionPreviewDialog.js b/modules/ve-mw/ui/dialogs/ve.ui.MWExtensionPreviewDialog.js
new file mode 100644
index 0000000000..129721bdba
--- /dev/null
+++ b/modules/ve-mw/ui/dialogs/ve.ui.MWExtensionPreviewDialog.js
@@ -0,0 +1,85 @@
+/*!
+ * VisualEditor UserInterface MWExtensionPreviewDialog class.
+ *
+ * @copyright 2011-2015 VisualEditor Team and others; see AUTHORS.txt
+ * @license The MIT License (MIT); see LICENSE.txt
+ */
+
+/**
+ * Dialog for editing generic MediaWiki extensions with a preview.
+ *
+ * @class
+ * @abstract
+ * @extends ve.ui.MWExtensionDialog
+ *
+ * @constructor
+ * @param {Object} [config] Configuration options
+ */
+ve.ui.MWExtensionPreviewDialog = function VeUiMWExtensionPreviewDialog() {
+	// Parent constructor
+	ve.ui.MWExtensionPreviewDialog.super.apply( this, arguments );
+
+	// Late bind onChangeHandler to a debounced updatePreview
+	this.onChangeHandler = ve.debounce( this.updatePreview.bind( this ), 250 );
+};
+
+/* Inheritance */
+
+OO.inheritClass( ve.ui.MWExtensionPreviewDialog, ve.ui.MWExtensionDialog );
+
+/* Methods */
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWExtensionPreviewDialog.prototype.initialize = function () {
+	// Parent method
+	ve.ui.MWExtensionPreviewDialog.super.prototype.initialize.call( this );
+
+	// Properties
+	this.previewNode = null;
+	this.previewElement = new ve.ui.PreviewElement();
+
+	// Initialization
+	this.$element.addClass( 've-ui-mwExtensionPreviewDialog' );
+};
+
+/**
+ * @inheritdoc
+ */
+ve.ui.MWExtensionPreviewDialog.prototype.getSetupProcess = function ( data ) {
+	return ve.ui.MWExtensionPreviewDialog.super.prototype.getSetupProcess.call( this, data )
+		.next( function () {
+			var doc, element;
+			if ( this.selectedNode ) {
+				doc = this.selectedNode.getDocument().cloneSliceFromRange( this.selectedNode.getOuterRange() );
+			} else {
+				element = this.getNewElement();
+				doc = new ve.dm.Document( [
+					element,
+					{ type: '/' + element.type },
+					{ type: 'internalList' },
+					{ type: '/internalList' }
+				] );
+			}
+			this.previewNode = doc.getDocumentNode().children[ 0 ];
+			this.previewElement.setModel( this.previewNode );
+		}, this );
+};
+
+/**
+ * Update the node rendering to reflect the current content in the dialog.
+ */
+ve.ui.MWExtensionPreviewDialog.prototype.updatePreview = function () {
+	var mwData = ve.copy( this.previewNode.getAttribute( 'mw' ) ),
+		doc = this.previewNode.getDocument();
+
+	this.updateMwData( mwData );
+
+	doc.commit(
+		ve.dm.Transaction.newFromAttributeChanges(
+			doc, this.previewNode.getOuterRange().start, { mw: mwData }
+		)
+	);
+	this.previewElement.updatePreview();
+};