diff --git a/chrome/content/zotero/bibliography.js b/chrome/content/zotero/bibliography.js
index 5be96e216a..e6619078e3 100644
--- a/chrome/content/zotero/bibliography.js
+++ b/chrome/content/zotero/bibliography.js
@@ -61,6 +61,8 @@ window.Zotero_File_Interface_Bibliography = new function () {
 		window.addEventListener('dialogaccept', () => this.acceptSelection());
 		window.addEventListener('dialoghelp', () => this.openHelpLink());
 		styleConfigurator = document.querySelector("#style-configurator");
+
+		this.updateIframe(Zotero.getString('styles.preview.instructions'));
 		
 		// Disable accept button until CE is initialized
 		document.querySelector("dialog").getButton('accept').setAttribute('disabled', 'true');
@@ -142,11 +144,14 @@ window.Zotero_File_Interface_Bibliography = new function () {
 
 		styleConfigurator.addEventListener("select", event => this.styleChanged(event));
 		styleConfigurator.addEventListener("manage-styles", this.manageStyles.bind(this));
+
 		
 		this.initBibWindow();
 
 		this.initDocPrefsWindow();
 
+		this.refresh()
+
 		setTimeout(() => this.updateWindowSize(), 0);
 		
 		// set style to false, in case this is cancelled
@@ -175,6 +180,9 @@ window.Zotero_File_Interface_Bibliography = new function () {
 		document.getElementById('output-method-radio').selectedItem
 			= document.getElementById(method);
 		
+		
+		document.getElementById('output-mode-radio').addEventListener("select",this.refresh.bind(this))		
+		
 		this.onBibWindowStyleChange();
 	};
 
@@ -248,6 +256,8 @@ window.Zotero_File_Interface_Bibliography = new function () {
 			this.onDocPrefsWindowStyleChange(selectedStyleObj);
 		}
 		this.updateWindowSize();
+		this.refresh();
+
 	};
 
 	this.onBibWindowStyleChange = function (style = undefined) {
@@ -388,6 +398,99 @@ window.Zotero_File_Interface_Bibliography = new function () {
 			document.querySelector('dialog').acceptDialog();
 		}
 	};
+
+	this.refresh = function () {
+		var items = Zotero.getActiveZoteroPane().getSelectedItems();
+		if (items.length === 0) {
+			this.updateIframe(Zotero.getString('styles.editor.warning.noItems'), 'warning');
+			return;
+		}
+		
+		let style = Zotero.Styles.get(styleConfigurator.style);
+		var d = new Date();
+		var str = '<div>';
+		
+		Zotero.debug("Generate bibliography for " + style.title);
+		let bib;
+		let err = false;
+		try {
+			bib = this.generateBibliography(style);
+		}
+		catch (e) {
+			err = e;
+			Zotero.logError(e);
+		}
+		if (bib || err) {
+			str += bib || `<p style="color: red">${Zotero.Utilities.htmlSpecialChars(err)}</p>`;
+			str += '<hr>';
+		}
+		
+
+		str += '</div>';
+		this.updateIframe(str);
+
+		Zotero.debug(`Generated previews in ${new Date() - d} ms`);
+	};
+	
+	this.generateBibliography = function (style) {
+		var items = Zotero.getActiveZoteroPane().getSelectedItems();
+		if (items.length === 0) {
+			return '';
+		}
+		
+		
+		var locale = styleConfigurator.locale;
+
+		let mode = "both";
+		if (windowType === "bibliography"){
+			mode = document.getElementById("output-mode-radio").selectedItem.id;
+		}
+		var styleEngine = style.getCiteProc(locale, 'html');
+		
+		// Generate multiple citations
+		let result = "";
+
+		if(mode==="citations" || mode==="both"){
+			result += styleEngine.previewCitationCluster(
+				{
+					citationItems: items.map(item => ({ id: item.id })),
+					properties: {}
+				},
+				[], [], "html"
+			);
+		}
+		if(mode==="both"){
+			result += "</br>"
+		}
+
+		if (mode=="bibliography" || mode==="both"){
+			if (style.hasBibliography) {
+				styleEngine.updateItems(items.map(item => item.id));
+				result += Zotero.Cite.makeFormattedBibliography(styleEngine, "html");
+			}
+		}
+		styleEngine.free();
+		
+		return result;
+	};
+
+	this.updateIframe = function (content, containerClass = 'preview') {
+		this.lastContent = { content, containerClass };
+		const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		let iframe = document.getElementById('zotero-csl-preview-box');
+		iframe.contentDocument.documentElement.innerHTML = `<html>
+		<head>
+			<title></title>
+			<link rel="stylesheet" href="chrome://zotero-platform/content/zotero.css">
+			<style>
+				html {
+					color-scheme: ${isDarkMode ? "dark" : "light"};
+				}
+			</style>
+		</head>
+		<body id="csl-edit-preview"><div class="${containerClass} zotero-dialog">${content}</div></body>
+		</html>`;
+	};
 };
 
 window.cancel = () => {
diff --git a/chrome/content/zotero/bibliography.xhtml b/chrome/content/zotero/bibliography.xhtml
index 91b8e246cd..38af9d7273 100644
--- a/chrome/content/zotero/bibliography.xhtml
+++ b/chrome/content/zotero/bibliography.xhtml
@@ -12,7 +12,7 @@
 	class="bibliography-window"
 	data-l10n-id="bibliography-window"
 	drawintitlebar-platforms="mac"
-	onload="Zotero_File_Interface_Bibliography.init()">
+	onload="Zotero_File_Interface_Bibliography.init();">
 <dialog
 	buttons="cancel,accept"
 	class="zotero-dialog-window"
@@ -23,6 +23,7 @@
 		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 		Services.scriptloader.loadSubScript('chrome://zotero/content/elements/styleConfigurator.js', this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/bibliography.js", this);
+		
 	</script>
 	<html:link rel="localization" href="zotero.ftl"/>
 	
@@ -35,7 +36,7 @@
 				<radio id="bibliography" data-l10n-id="bibliography-outputMode-bibliography"/>
 			</radiogroup>
 		</groupbox>
-		<groupbox class="radio-col">
+		<groupbox class="radio-row">
 			<html:label data-l10n-id="bibliography-outputMethod-label"></html:label>
 			<radiogroup id="output-method-radio">
 				<radio id="save-as-rtf" data-l10n-id="bibliography-outputMethod-saveAsRTF"/>
@@ -44,6 +45,7 @@
 				<radio id="print"  data-l10n-id="bibliography-outputMethod-print"/>
 			</radiogroup>
 		</groupbox>
+		<iframe id="zotero-csl-preview-box" flex="1" overflow="auto" type="content" />
 	</vbox>
 </dialog>
 </window>
diff --git a/chrome/content/zotero/integration/integrationDocPrefs.xhtml b/chrome/content/zotero/integration/integrationDocPrefs.xhtml
index c12d29b74a..c9306a3dad 100644
--- a/chrome/content/zotero/integration/integrationDocPrefs.xhtml
+++ b/chrome/content/zotero/integration/integrationDocPrefs.xhtml
@@ -67,6 +67,8 @@
 				<button id="exportDocument" data-l10n-id="integration-prefs-exportDocument" />
 			</hbox>
 
+			<iframe id="zotero-csl-preview-box" flex="1" overflow="auto" type="content" />
+
 			<vbox class="advanced-options">
 				<hbox class="advanced-header">
 					<html:span class="advanced-header-icon"></html:span>