Documentation

Memos Embed ships flexible entry points for memo cards: core HTML helper APIs, React components, a Web Component, and iframe helpers.

Open the playground Browse example gallery View core npm package View React npm package View Web Component npm package

Choose your entry point

Start with the lowest-complexity integration that matches your stack, then mix in the shared core APIs if you need more control.

Entry point	Install	Best for	Start here
Core HTML API	`pnpm add memos-embed`	SSR/SSG pipelines, MDX blogs, custom render flows, and iframe helpers.	Open core package docs
React	`pnpm add @memos-embed/react`	Next.js, TanStack Start, Astro islands, and React pages that want SSR-ready embeds.	Open React example
Web Component	`pnpm add @memos-embed/wc`	Static sites, CMS pages, and custom-element-friendly apps without a React runtime.	Open static example
Iframe helpers	`pnpm add memos-embed`	Copy-paste embeds, stricter style isolation, and platforms where raw HTML snippets are awkward.	Open iframe example

Tip: the React and Web Component packages both sit on top of the shared memos-embed core, so you can mix wrappers, prefetched memo data, and iframe helpers in the same project. If you import fetchMemo, fetchMemos,createMemoClient, or extendThemedirectly in a React app, add memos-embed to your dependencies too.

Quick Start

Install the package that matches your stack.

Core HTML API

pnpm add memos-embed

import { fetchMemo, renderMemoHtmlSnippet } from 'memos-embed'

const memo = await fetchMemo({
  baseUrl: 'https://demo.usememos.com/api/v1',
  memoId: '1',
})

const html = renderMemoHtmlSnippet(memo, {
  theme: 'paper',
  density: 'comfortable',
  includeStyles: true,
})

Multiple memos on one page

import { fetchMemos, renderMemoListHtmlSnippet } from 'memos-embed'

const memos = await fetchMemos({
  baseUrl: 'https://demo.usememos.com/api/v1',
  memoIds: ['1', '2', '3'],
})

const html = renderMemoListHtmlSnippet(memos, {
  layout: 'stack',
  gap: '20px',
  theme: 'paper',
})

React

pnpm add @memos-embed/react

import { MemoEmbed } from '@memos-embed/react'

<MemoEmbed
  baseUrl="https://demo.usememos.com/api/v1"
  memoId="1"
  theme="glass"
  linkTarget="_blank"
  showAttachments
  showReactions
/>

Pre-fetched React data

pnpm add @memos-embed/react memos-embed

import { fetchMemo } from 'memos-embed'
import { MemoEmbed } from '@memos-embed/react'

const memo = await fetchMemo({
  baseUrl: 'https://demo.usememos.com/api/v1',
  memoId: '1',
})

<MemoEmbed memo={memo} linkTarget="_blank" />

React memo roundup

import { MemoEmbedList } from '@memos-embed/react'

<MemoEmbedList
  baseUrl="https://demo.usememos.com/api/v1"
  memoIds={["1", "2", "3"]}
  layout="stack"
  gap="20px"
  theme="paper"
/>

Shared React memo client

pnpm add @memos-embed/react memos-embed

import { createMemoClient } from 'memos-embed'
import { MemoClientProvider, MemoEmbed, MemoEmbedList } from '@memos-embed/react'

const client = createMemoClient()

<MemoClientProvider client={client}>
  <MemoEmbed baseUrl="https://demo.usememos.com/api/v1" memoId="1" />
  <MemoEmbedList baseUrl="https://demo.usememos.com/api/v1" memoIds={["2", "3"]} />
</MemoClientProvider>

Web Component

pnpm add @memos-embed/wc

import { defineMemosEmbedElement } from '@memos-embed/wc'

defineMemosEmbedElement()

<memos-embed
  base-url="https://demo.usememos.com/api/v1"
  memo-id="1"
  link-target="_blank"
></memos-embed>

Iframe

import { renderIframeHtml } from 'memos-embed'

const iframe = renderIframeHtml({
  embedBaseUrl: 'https://your-site.com',
  baseUrl: 'https://demo.usememos.com/api/v1',
  memoId: '1',
  height: 240,
  autoResize: true,
})

What’s Improved

Recent upgrades shipped across the core library and demo site.

• Richer markdown rendering with headings, task lists, quotes, and fenced code blocks.
• Image attachments render previews instead of plain file links.
• Reactions are grouped into compact count badges.
• The playground now supports shareable URLs, link-target tuning, copy-to-clipboard snippets, and auto-resizing iframe code.
• React and Web Component wrappers cancel stale fetches for safer updates, React can render pre-fetched memo data without a client-side waterfall, `MemoEmbedList` helps roundup pages share one style block, and shared clients can dedupe fetches across a whole page.
• `extendTheme()` and bring-your-own-style controls make it easier to match personal blogs and docs sites.
• `fetchMemos()` and `renderMemoListHtmlSnippet()` help note roundups and weekly digests render multiple memos with shared styles.
• Iframe embeds can now resize automatically through a postMessage handshake.

Rendering Options

Most options are shared across HTML, React, and Web Component entry points.

Option	Type	Description
theme	minimal \| glass \| paper \| midnight \| terminal \| custom	Switch card tone or extend a preset with blog-specific design tokens.
density	comfortable \| compact	Adjust padding, spacing, and avatar size.
includeStyles	boolean	Disable the built-in style block for bring-your-own CSS setups in core, React, and Web Component flows.
layout / gap	stack \| grid / string	Arrange multiple memos with shared list styles for roundups and archive pages.
showMeta	boolean	Toggle author, avatar, and time metadata.
showTags	boolean	Hide or show memo hashtags.
showAttachments	boolean	Show file links and image previews.
showReactions	boolean	Render grouped emoji reaction chips.
linkTarget	_blank \| _self	Control how markdown links and attachment links open.

Theme Presets

The same presets work in the playground, iframe route, and npm APIs.

minimal

Accent #2563eb · Radius 16px

Background

Accent

Code

glass

Accent #06b6d4 · Radius 18px

Background

Accent

Code

paper

Accent #7c3aed · Radius 14px

Background

Accent

Code

midnight

Accent #38bdf8 · Radius 18px

Background

Accent

Code

terminal

Accent #22d3ee · Radius 12px

Background

Accent

Code

Match your blog theme

Use CSS variables or design tokens from your site to keep embeds visually consistent.

import { extendTheme } from 'memos-embed'

const blogTheme = extendTheme('minimal', {
  fontFamily: 'inherit',
  radius: 'var(--radius)',
  tokens: {
    background: 'var(--card)',
    foreground: 'var(--card-foreground)',
    mutedForeground: 'var(--muted-foreground)',
    border: 'var(--border)',
    accent: 'var(--primary)',
    accentForeground: 'var(--primary-foreground)',
    codeBackground: 'var(--muted)',
  },
})

• Use `extendTheme()` when you want blog colors, radius, and font choices without rewriting the renderer.
• Pass `includeStyles=` in React when you want to own the entire CSS layer yourself.
• Pre-fetched `memo` props are ideal for server-rendered blogs, MDX pages, and content collections.

Style the Web Component from your site

Lean on shadow DOM isolation by default, then opt into `::part(...)` when you want finer control.

<memos-embed
  base-url="https://demo.usememos.com/api/v1"
  memo-id="1"
  include-styles="false"
></memos-embed>

<style>
  memos-embed::part(container) {
    border: 1px solid var(--border);
    border-radius: 24px;
    background: var(--card);
  }

  memos-embed::part(user-name) {
    color: var(--card-foreground);
  }
</style>

• Keep built-in styles when you just need a few targeted tweaks.
• Set `include-styles="false"` for fully custom component shells.
• Use `link-target` when blog links should stay in-page or open in a new tab.

Blog Integration Guides

Start from a copy-paste example that matches your publishing stack, then adapt the theme and rendering options to your blog.

Next.js App Router

Fetch memo data on the server, pass serialized memo props into the React wrapper, and avoid client-side waterfalls.

Open Next.js example

MDX component pattern

Create a reusable MemoCard component for long-form posts so authors can embed notes with a single tag.

Open MDX example

Astro blog

Render memo cards inside Astro pages and MDX content while keeping styling aligned with your site tokens.

Open Astro example

Static HTML / CMS

Drop in an iframe or Web Component when you do not control a React build pipeline.

Open static example