How to Embed 3D Models in Ghost Blog Posts

Ghost is a fantastic blogging platform — clean, fast, and focused on content. But like most CMS platforms, Ghost has no built-in support for 3D content. If you want to include an interactive 3D model in a blog post — a product you're showcasing, a 3D print design you're reviewing, or a model from a tutorial — you need an external solution.

The good news: Ghost has excellent oEmbed support, and GeometryViewer supports oEmbed. This means embedding a 3D model in a Ghost post is as simple as pasting a link.

Method 1: oEmbed (paste a link)

This is the simplest approach and it works with any Ghost theme.

Step 1: Get a GeometryViewer viewer link

1. Go to geometryviewer.com
2. Open your 3D model file (STL, OBJ, GLTF, GLB, or 3MF)
3. Click the "Share" button
4. Copy the generated viewer URL

The URL will look something like: https://geometryviewer.com/view/abc123

Step 2: Paste it in the Ghost editor

1. Open the Ghost editor for your post
2. Place your cursor where you want the 3D model to appear
3. Paste the GeometryViewer URL
4. Ghost will automatically detect the oEmbed endpoint and convert it into an embedded 3D viewer

That's it. When readers visit your blog post, they'll see an interactive 3D viewer right in the content. They can rotate, zoom, and explore the model without leaving your page.

How oEmbed works

oEmbed is a protocol that lets websites provide rich embeds for their URLs. When you paste a URL in Ghost, Ghost checks whether the URL's domain supports oEmbed. If it does, Ghost fetches the embed HTML from the oEmbed endpoint and renders it in place of the plain URL.

This is the same mechanism that lets you paste a YouTube link in Ghost and get an embedded video player, or paste a Twitter link and get an embedded tweet. GeometryViewer's oEmbed endpoint works the same way — it returns an iframe or web component that renders the interactive 3D viewer.

Method 2: HTML card with web component

If you prefer more control over the embed, or if you want to embed a model that doesn't have a shareable link (e.g., a model hosted on your own server), you can use GeometryViewer's web component directly in an HTML card.

Step 1: Add an HTML card

In the Ghost editor, click the + button to add a new card. Select "HTML" from the card menu. This gives you a block where you can write raw HTML.

Step 2: Paste the web component code

Add the following two lines of code:

<script type="module" src="https://geometryviewer.com/embed.js"></script>
<geometry-viewer src="https://geometryviewer.com/view/abc123" style="width:100%;height:500px;"></geometry-viewer>

Replace abc123 with your actual model's share ID, or replace the entire src URL with a direct link to your 3D file.

Customizing the embed

The web component accepts several attributes for customization:

• style="width:100%;height:500px;" — controls the size of the viewer. Adjust the height as needed. Width at 100% is recommended for responsive layouts.
• src — the URL of the model to display. Can be a GeometryViewer share link or a direct URL to a 3D file.

Which method to choose

Use Method 1 (oEmbed) if you want the simplest possible embedding. Paste a link, done. Ghost handles the rest. This is ideal for most blog posts.

Use Method 2 (HTML card) if you need custom sizing, want to embed a self-hosted model file, or if oEmbed detection isn't working for some reason. This gives you full control over the embed.

Works with any Ghost theme

Both embedding methods work with any Ghost theme. The 3D viewer renders inside an iframe or shadow DOM, so it doesn't conflict with your theme's CSS or JavaScript. Whether you're using the default Casper theme, a premium theme, or a custom theme, the embed will display correctly.

The viewer is responsive by default — it adjusts to the width of its container. On mobile, readers can interact with the model using touch controls (pinch to zoom, drag to rotate).

Use cases for 3D content in Ghost blogs

Product blogs

If you're blogging about a physical product — reviewing it, announcing it, or explaining its design — an interactive 3D model is far more engaging than static photos. Readers can spin the product around and examine it from angles you might not have photographed.

3D printing blogs

3D printing blogs frequently reference specific STL files. Instead of linking to an external download and hoping the reader has software to view it, embed the model right in the post. Readers can see the model immediately without downloading anything.

Portfolio posts

If you're a 3D artist, product designer, or architect using Ghost as a portfolio site, interactive 3D embeds let visitors experience your work the way it's meant to be experienced — in three dimensions, not as flat renders.

Educational content

If you're writing tutorials about 3D modeling, CAD software, or 3D printing, embedding the models you're discussing makes the content much more useful. Readers can follow along with the actual 3D geometry, not just screenshots of it.

Engineering and technical documentation

Technical blogs explaining mechanical designs, structural elements, or manufacturing processes benefit enormously from interactive 3D views. A gearbox is much easier to understand when you can rotate it than when you're looking at a single photo.

Performance considerations

The embedded 3D viewer loads asynchronously — it doesn't block your page from rendering. The viewer's JavaScript and WebGL rendering happen inside an iframe, isolated from your blog's main thread. This means:

• Your page's initial load time is not affected
• The 3D viewer loads in the background as the reader scrolls
• If a reader never scrolls to the embed, it doesn't consume resources
• Multiple embeds on one page work fine — each loads independently

For best performance, we recommend keeping embedded models under 20MB. Larger models work but take longer to load, especially on mobile connections.

Self-hosted Ghost considerations

If you're running a self-hosted Ghost instance (not Ghost Pro), oEmbed should work out of the box — Ghost's oEmbed implementation is built into the core platform. However, if your Ghost instance has strict CSP (Content Security Policy) headers, you may need to allow geometryviewer.com as a frame source.

If oEmbed isn't working on your self-hosted instance, the HTML card method (Method 2) always works, as HTML cards bypass oEmbed entirely.