Skip to content

Memos Embed

Open-source memo embeds

Share your thoughts anywhere

Turn Memos posts into polished, portable cards for docs, changelogs, marketing pages, and product surfaces.

Iframe embedsReact componentWeb ComponentTheme presetsAuto-resize support
Open PlaygroundRead Docs

3

Integration modes

5

Theme presets

< 5 min

Copy-paste setup

Copy a working embed in minutes
Start from the hosted playground, tune the output, and share the exact configuration with your team.
Iframe snippetAuto-resize ready
<iframe
  src="https://your-site.com/embed/1?theme=midnight"
  title="memos-embed"
  loading="lazy"
></iframe>

Why teams keep the playground open

  • • Compare iframe, Web Component, and React output side-by-side.
  • • Share the full configuration in the URL for async reviews.
  • • Copy production-ready snippets instead of hand-writing params.

Choose the integration that fits your stack

Start simple with an iframe, then graduate to a Web Component or React wrapper when you need tighter control.

Iframe
Docs, CMS pages, and no-build environments

Host the embed route once and drop in responsive iframe markup anywhere.

<iframe
  src="https://your-site.com/embed/1?..."
  title="memos-embed"
  loading="lazy"
/>
Web Component
Static sites, Astro, Eleventy, and progressive enhancement

Register a custom element and keep integration as simple as HTML attributes.

<script type="module"
  src="https://unpkg.com/@memos-embed/wc@latest/dist/register.js"></script>
<memos-embed memo-id="1" />
React
Dashboards, product surfaces, and app shells

Reach for the React wrapper when you want stateful configuration and callbacks.

import { MemoEmbed } from "@memos-embed/react";

<MemoEmbed
  baseUrl="https://demo.usememos.com/api/v1"
  memoId="1"
/>

Why teams pick Memos Embed

Designed for product updates, personal publishing, and internal docs that still need a production-ready presentation layer.

Beautiful Embeds

Give memo cards a polished surface with themes, density presets, grouped reactions, and image previews.

Developer Friendly

Start with an iframe, then move to a Web Component or React wrapper when you need tighter integration.

Performance First

Use shareable playground presets, lightweight rendering helpers, and auto-resizing embeds without custom glue code.

Prototype fast, then ship with confidence

Open the playground to generate a shareable configuration, then use the docs to move that setup into production.

Open PlaygroundRead Docs