Code Embed Feature — Wireframe

How shared code links would appear in the Anseo feed

AM
Aoife Murphy 2h ago palette Design Club

Finally got that glassmorphism card effect working! Check it out 👇

Card Preview
play_arrow

Glassmorphism Card Effect

codepen.io/aoife_designs

open_in_new Open
TW
Todd Willingham 5h ago code Web Dev

Here's that Alpine.js accordion component I mentioned. Fork it and try it out!

<div x-data="{ open: false }">
<button @click="open = !open">
Toggle
</button>
</div>
play_arrow
JS

Alpine.js Accordion Component

jsfiddle.net/toddw/abc123

open_in_new Open
SC
Sarah Chen 1d ago code Web Dev

Built a React todo app for the assignment. Here's my CodeSandbox if anyone wants to compare approaches!

My Todos
Learn React
Setup project
play_arrow

React Todo App

codesandbox.io/s/react-todo-abc123

open_in_new Open

fullscreen Expanded View (Click to Expand)

Glassmorphism Card Effect by Aoife Murphy
Live Preview

Interactive CodePen embed loads here

(sandboxed iframe)

engineering Implementation Plan

looks_one Phase 1: Link Detection & Preview Cards

Detect CodePen/JSFiddle/CodeSandbox URLs in posts, fetch oEmbed metadata, display rich preview cards.

schedule 6-8 hours URL regex, oEmbed API calls, card template

looks_two Phase 2: Click-to-Expand Embeds

Clicking preview loads the actual iframe embed (sandboxed). Keeps feed fast, only loads when needed.

schedule 4-6 hours Iframe sandboxing, lazy loading, modal/inline toggle

looks_3 Phase 3: Additional Platforms

Add support for Replit, GitHub Gists, StackBlitz, Figma embeds.

schedule 4-6 hours Per-platform oEmbed handlers

summarize Total Estimate

MVP (Phase 1)

6-8 hours

Full Feature (1-3)

14-20 hours

Supported Platforms (Phase 1-3):

CodePen JSFiddle CodeSandbox Replit GitHub Gist StackBlitz Figma