Skip to content
All components
Component 07

Bookshelf

A dense poster grid of cover scans — the collection as a wall of books.

Make it yours below — switch theme, retune the layout, rewrite the heading and subheading — and watch the preview update as you go. When it reads the way you want, copy the one-line embed and paste it into any Webflow Embed block. The component pulls live data from the Source Library on every visit; there’s no build step, no API key, and no second file to host. It serves the Marketing Lead first.

LiveBest for the Marketing Lead/books/library
02

Customize

Set it up, then copy the code

Adjust the knobs below. The live preview re-renders on every change; the embed code beneath it updates to match, so the snippet you copy is always the configuration you see.
WWebflow · HTML Embed blockwidth 100% · margin 0

Exactly as it appears embedded: a full-width HTML Embed block with zero margin — flush to the page, no border, no rounded corners. The only inset is the component’s own padding.

Webflow embed · your settings
<!-- Bookshelf · Source Library × Embassy of the Free Mind -->
<iframe
  src="https://embassy-sourcelibrary-ds.vercel.app/embed/bookshelf?theme=dark&density=comfortable&limit=8&progress=1"
  title="Bookshelf"
  loading="lazy"
  style="width:100%;height:1620px;margin:0;border:0;display:block;background:transparent;overflow:hidden"
></iframe>
<script>(function(){var s=document.currentScript,i=s.previousElementSibling;while(i&&i.nodeType!==1)i=i.previousSibling;if(!i||i.tagName!=="IFRAME")return;var O="https://embassy-sourcelibrary-ds.vercel.app",savedStyle="",savedOverflow="";function lift(){savedStyle=i.getAttribute("style")||"";savedOverflow=document.documentElement.style.overflow;i.setAttribute("style","position:fixed;inset:0;width:100vw;height:100vh;z-index:2147483647;border:0;margin:0;display:block;background:#000");document.documentElement.style.overflow="hidden"}function drop(){i.setAttribute("style",savedStyle);document.documentElement.style.overflow=savedOverflow}addEventListener("message",function(e){if(e.source!==i.contentWindow||e.origin!==O)return;var d=e.data;if(!d||d.source!=="source-library")return;if(d.type==="modal-open")lift();else if(d.type==="modal-close")drop()})})();</script>
Source LibraryEmbassy of the Free Mind

The rediscovery of ancient wisdom helped spark the Renaissance. It's time for another.

ad fontes — to the sources