---

HiveReactKit adds media strip UI, responsive layouts, markdown rendering, and improved Snaps experience.

HiveReactKit

Blog Feed Media Strip Redesign

Rich Media Layout Improvements

• feat(blog-list): add right-side media strip with multi-media support.
• Refactored post cards with:
  • Right-side media strip
  • Full-height media layout
  • Flex-based responsive structure

• Moved avatar inline with post header:
  • Author
  • Time
  • Community

• Added extractPostMedia utility supporting:
  • Images
  • YouTube
  • 3Speak
  • X (Twitter) embeds

• Built reusable PostMediaCarousel:
  • Multi-media tiles
  • Carousel navigation arrows
  • Media counter
  • Lightbox support

• Added responsive media strip sizing and improved spacing consistency.

• Updated skeleton loaders to match the redesigned layout.

• Outcome:
  • Cleaner blog feed presentation
  • Better multi-media browsing experience
  • Improved readability and content structure

Blog Feed Media Strip

Post Media Carousel

---

Mobile Cards & Community Layout Improvements

Responsive UI Refinements

• feat(ui): media strip + mobile cards + community layout.
• Added unified right-side media strip support for:
  • Images
  • YouTube
  • 3Speak
  • X embeds

• Introduced unified media parsing system using postMedia.ts.

• Refactored post cards:

  • Flex layout improvements
  • Full-height media alignment

• Updated skeleton loaders to match the new responsive UI system.

Mobile Optimizations

• Added smaller mobile card layouts.

• Implemented fixed thumbnail sizing for consistent rendering.

CommunityDetail Improvements

• Added single-scroll page structure.

• Added sticky community tabs.

• Added compact community header layout.

• Outcome:
  • Improved mobile usability
  • Better scrolling experience
  • More consistent responsive layouts across devices

Responsive Mobile Cards

Community Layout Improvements

---

Snaps Markdown Rendering & Body Processing

Content Rendering Improvements

• feat(snaps): add markdown rendering + body preprocessing.
• Added markdown rendering support for Snaps feed:
  • Tables
  • Lists
  • Text formatting

• Added body preprocessing pipeline:
  • Fixed <br> rendering issues
  • Improved table formatting
  • Removed media duplication
  • Removed footer noise and unnecessary content

• Removed line-clamp rendering issues.

• Added proper CSS handling for:

  • Tables
  • Layout spacing
  • Markdown formatting

• Ensured media rendering handled only through AttachmentStrip to avoid duplicate previews.

Development Workflow Improvement

• Linked HiveReactKit locally using:
  • file:../HiveReactKit

• Enabled faster development iteration and testing workflow.

• Outcome:
  • Better markdown readability within Snaps feed
  • Cleaner media rendering behavior
  • Faster local development workflow

Markdown Rendering in Snaps & AttachmentStrip Media Handling

---

Powering the Hive Ecosystem

• Continuously improving reusable UI infrastructure for Hive applications
• Building scalable media rendering systems and responsive layouts for the community
• Contributing towards better creator experiences and modern open-source Hive tooling

---

Final Note

• This post has been refined with the help of AI to improve readability and structure
• The original development updates and optimised version are both available for reference

---

More Links

HiveSuite App	Vote as Witness	Support via Discord

---

---

▶️ 3Speak