HiveContentRenderer

Renders Hive blockchain post content with markdown parsing, HTML sanitization, media embedding, and link security.

Video Embeds

YouTube, Vimeo, Twitch, 3Speak, Spotify

Social Embeds

Twitter/X, Instagram

Markdown + HTML

GFM tables, code blocks, blockquotes

Image Proxy

Custom proxy function for images

@mentions & #tags

Auto-linked with custom URL functions

Security

XSS sanitization, phishing detection

Styles not included by default

The renderer outputs raw HTML. For proper typography, import the bundled stylesheet and wrap the component with prose hive-renderer classes. Requires @tailwindcss/typography plugin.

Usage

<template>
  <div class="prose dark:prose-invert hive-renderer max-w-none">
    <HiveContentRenderer
      :body="body"
      :author="author"
      :permlink="permlink"
    />
  </div>
</template>

<script setup lang="ts">
import { HiveContentRenderer } from "@hiveio/honeycomb-vue";

defineProps<{
  body: string;
  author: string;
  permlink: string;
}>();
</script>

Styling

Import the renderer styles in your global CSS and add the @tailwindcss/typography plugin to your Tailwind config.

1. Import styles

/* globals.css */
@import "@kkocot/honeycomb-renderer/styles.css";

2. Tailwind config

// tailwind.config.ts
import typography from "@tailwindcss/typography";

export default {
  plugins: [typography],
};

3. Wrap with classes

<template>
  <!-- Wrap the renderer with prose + hive-renderer classes -->
  <div class="prose dark:prose-invert hive-renderer max-w-none">
    <HiveContentRenderer :body="body" />
  </div>
</template>

Props

Prop	Type	Default	Description
`body`	`string`	-	Markdown or HTML content to render
`author`	`string`	-	Post author (used for context during sanitization)
`permlink`	`string`	-	Post permlink (used for context during sanitization)
`options`	`Partial<RendererOptions>`	See below	Renderer configuration overrides
`plugins`	`RendererPlugin[]`	`DEFAULT_PLUGINS`	TablePlugin, TwitterResizePlugin, InstagramResizePlugin
`class`	`string`	-	Additional CSS classes on the wrapper div

Renderer Options

Pass these via the options prop to customize rendering behavior.

Option	Type	Default	Description
`baseUrl`	`string`	`"https://hive.blog/"`	Base URL for internal link detection
`breaks`	`boolean`	`true`	Convert \n to <br>
`addNofollowToLinks`	`boolean`	`true`	Add rel="nofollow noopener" to links
`addTargetBlankToLinks`	`boolean`	`true`	Open external links in new tab
`cssClassForExternalLinks`	`string`	-	CSS class for external links (e.g. `"link-external"`)
`imageProxyFn`	`(url: string) => string`	identity	Transform image URLs (e.g. proxy via images.hive.blog)
`usertagUrlFn`	`(account: string) => string`	`/@{account}`	URL generator for @mention links
`hashtagUrlFn`	`(tag: string) => string`	`/trending/{tag}`	URL generator for #hashtag links
`assetsWidth`	`number`	`640`	Default width for embedded iframes
`assetsHeight`	`number`	`480`	Default height for embedded iframes

Examples

Custom options

<template>
  <HiveContentRenderer
    :body="body"
    author="barddev"
    permlink="hello-hive"
    :options="rendererOptions"
  />
</template>

<script setup lang="ts">
import { HiveContentRenderer } from "@hiveio/honeycomb-vue";

const rendererOptions = {
  baseUrl: "https://hive.blog/",
  cssClassForExternalLinks: "link-external",
  imageProxyFn: (url: string) => `https://images.hive.blog/0x0/${url}`,
  usertagUrlFn: (account: string) => `/user/${account}`,
  hashtagUrlFn: (tag: string) => `/tag/${tag}`,
};
</script>

Programmatic rendering (SSR / Node.js)

import {
  DefaultRenderer,
  build_default_options,
} from "@kkocot/honeycomb-renderer";

const renderer = new DefaultRenderer(
  build_default_options({
    baseUrl: "https://hive.blog/",
    breaks: true,
  })
);

const html = renderer.render(markdown, {
  author: "barddev",
  permlink: "hello-hive",
});

Rendering Pipeline

1Plugin pre-processing
2Preliminary sanitization (remove HTML comments)
3Markdown to HTML (Remarkable)
4DOM parsing: linkify URLs, @mentions, #hashtags
5Tag-transforming sanitization (sanitize-html)
6Security check (script tag detection)
7Asset embedding (YouTube, Vimeo, Twitter, Instagram, etc.)
8Plugin post-processing + final sanitize pass

Security

HTML tag whitelist (no script, style, form)

Attribute whitelist per tag

iframe source whitelist (YouTube, Vimeo, etc.)

Phishing domain detection (560+ domains)

Private network URL blocking (SSRF protection)

Bad actor account list

XSS vector protection

External link classification

Supported Content

Headers (h1-h6)

Bold, Italic, Strikethrough

Ordered & Unordered Lists

Tables (GFM)

Code blocks

Inline code

Blockquotes

Images (auto-proxy)

@mentions -> profile links

#hashtags -> tag links

Subscript / Superscript

Horizontal rules

Details / Summary (spoilers)

Center / Text alignment

Pull-left / Pull-right images

YouTube / Vimeo / Twitch embeds

Twitter / Instagram embeds

3Speak / Spotify embeds

Post List Markdown Editor