Public
Edited
Jan 21, 2024
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
{
const main = document.createElement('main');
main.innerHTML = formHtml;
return renderIframe(main, { height: '700px' });
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function renderIframe(node, options = {}) {
const { width, border } = options;
const iframe = document.createElement('iframe');
iframe.style.width = width || '100%';
iframe.style.border = border || 'none';
iframe.addEventListener('load', async function() {
const doc = iframe.contentWindow.document;
const tailwindScript = doc.createElement('script');
doc.head.append(tailwindScript);
tailwindScript.addEventListener('load', function() {
doc.body.append(node);
iframe.style.height = options?.height || `${doc.body.offsetHeight}px`;
});
tailwindScript.src = 'https://cdn.tailwindcss.com/3.3.3?plugins=forms,typography,aspect-ratio';
});
return iframe;
}
Insert cell
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more