Jon Gottfried for The DEV Team

Posted on Feb 27

Upgraded embed experience and new embed types in DEV posts

#news #devto #forem

When you paste a URL into your DEV post, if it is embeddable, you now get a handy little tooltip to generate your liquid tag for you using a new universal embed tag:

Also - You can now embed new types of projects directly in your DEV posts. We now support Lovable, Bolt.new, Warp blocks, HuggingFace Spaces, and the HuggingFace Dataset Viewer. These are in addition to our widely used Cloud Run embed feature that launched recently!

Here's a few example projects to show you how it works:
Lovable:
{% embed https://iconstack.lovable.app/ %}

HuggingFace Spaces:
{% embed https://huggingface.co/spaces/KittenML/KittenTTS-Demo %}

HuggingFace Datasets:
{% embed https://huggingface.co/datasets/openfoodfacts/product-database %}

Warp Block Sharing:
{% embed https://app.warp.dev/block/JjdoVfeKebVSw8wiykuDag %}

Bolt.new:
{% embed https://ai-dashboard-with-da-z516.bolt.host/ %}

We hope you enjoy - and if you have any ideas or feature requests for more embeds feel free to post them in the comments.

Top comments (2)

Ben Halpern The DEV Team • Feb 27

In case anyone wants to peruse the PR where this landed in Forem

feat: add AI tool embed tags and paste-to-embed editor UX #22853

jonmarkgo posted on Feb 26, 2026

What type of PR is this? (check all applicable)

[x] Refactor
[x] Feature
[ ] Bug Fix
[ ] Optimization
[x] Documentation Update

Description

Adds embed support for 5 AI development tools via Forem's existing {% embed url %} liquid tag system, plus a paste-to-embed UX in the article editor.

New Embeds

Service	URL Patterns	Embed Method
HuggingFace	`.hf.space`, `huggingface.co/spaces/`, `huggingface.co/datasets/*`	iframe (Spaces + Dataset Viewer)
Bolt.new	`bolt.new/~/`, `.bolt.host`	iframe
Lovable	`*.lovable.app`	iframe
v0.dev	`v0.dev/chat/`, `.vusercontent.net`	iframe
Warp	`app.warp.dev/block/*`	iframe (converts to `/block/embed/` URL)

Editor Paste-to-Embed

When a user pastes a URL into the article body editor, an inline popover appears near the cursor offering to convert it into an {% embed url %} tag. The popover:

Uses Forem's existing getCursorXY utility and c-autocomplete__popover styles
Auto-dismisses after 5 seconds or on keypress
Works for any URL (not limited to the 5 new services)

Architecture

All embeds use UnifiedEmbed only — no standalone {% tagname %} liquid tag registration. Each tag class:

Defines REGISTRY_REGEXP for URL matching
Implements parse_input to normalize URLs for iframe src
Registers via UnifiedEmbed.register(TagClass, regexp: ...)
Renders through a shared partial pattern (liquids/_tagname.html.erb)

Services Evaluated but Not Included

Claudebin — embed API requires undocumented query params
Streamlit — known upstream iframe redirect loop caused by SameSite=Lax cookies
ChatGPT, Amp, Cursor — no embeddable share URLs or blocked by CSP/x-frame-options

Related Tickets & Documents

QA Instructions, Screenshots, Recordings

Testing embeds

Create or edit an article

In the body, add any of these liquid tags:

{% embed https://huggingface.co/spaces/microsoft/TRELLIS.2 %}
{% embed https://huggingface.co/datasets/nyu-mll/glue %}
{% embed https://simple-team-project-djg1.bolt.host %}
{% embed https://shared-doc-chat.lovable.app %}
{% embed https://v0.dev/chat/public-link-request-PUaBPjRAhiL %}
{% embed https://app.warp.dev/block/vzFATak939iqGWfNh7wsAP %}

Preview/publish — each should render as an iframe embed

Testing paste-to-embed

Copy any URL to clipboard
Paste it into the article body textarea
An inline popover should appear near the pasted text with "Embed" and "Dismiss" buttons
Clicking "Embed" replaces the URL with {% embed <url> %}
Clicking "Dismiss" (or waiting 5s, or pressing any key) removes the popover

UI accessibility checklist

[x] Semantic HTML implemented?
[x] Keyboard operability supported?
[ ] Checked with axe DevTools and addressed Critical and Serious issues?
[x] Color contrast tested?

Added/updated tests?

[x] Yes

Ruby (44 examples, 0 failures):

spec/liquid_tags/huggingface_tag_spec.rb — 10 examples (Spaces, Datasets, embed viewer)
spec/liquid_tags/bolt_tag_spec.rb — 7 examples (bolt.host, bolt.new)
spec/liquid_tags/lovable_tag_spec.rb — 6 examples
spec/liquid_tags/v0_tag_spec.rb — 9 examples (vusercontent.net, v0.dev/chat)
spec/liquid_tags/warp_tag_spec.rb — 6 examples (block URL → embed URL conversion)
spec/liquid_tags/ai_embeds_integration_spec.rb — 6 routing + 5 rendering examples