开源备忘录嵌入组件

随时随地分享你的想法任何地方

将 Memos 帖子转换为精美、可移植的卡片，适用于文档、更新日志、营销页面和产品界面。

Iframe 嵌入React 组件Web Component主题预设自动调整大小

打开演练场阅读文档

集成方式

主题预设

< 5 分钟

复制粘贴即可上手

几分钟内复制一个可用的嵌入组件

从托管的演练场开始，调整输出效果，然后与团队分享精确的配置。

支持自动调整大小

Save this before it turns into a task

Capture the note now, then decide how to organize it later.

write it fast
tag it when it matters
keep the link close

#capture-first

cover.jpgimage/jpeg

为什么团队一直打开演练场

• 并排比较 Iframe、Web Component 和 React 输出。
• 通过 URL 分享完整配置，方便异步评审。
• 复制生产就绪的代码片段，无需手动编写参数。

选择适合你技术栈的集成方式

先用简单的 Iframe 开始，需要更精细控制时再升级到 Web Component 或 React 封装。

Iframe

文档、CMS 页面和无需构建的环境

一次部署嵌入路由，在任何地方插入响应式 Iframe 标签。

<iframe
  src="https://your-site.com/embed/1?..."
  title="memos-embed"
  loading="lazy"
/>

打开 Iframe 示例

Web Component

静态网站、Astro、Eleventy 和渐进增强

注册一个自定义元素，让集成像 HTML 属性一样简单。

<script type="module"
  src="https://unpkg.com/@memos-embed/wc@latest/dist/register.js"></script>
<memos-embed memo-id="1" />

打开 Web Component 示例

React

仪表盘、产品界面和应用外壳

当你需要有状态配置和回调时，使用 React 封装组件。

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

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

打开 React 示例

为什么团队选择 Memos Embed

为产品更新、个人发布和内部文档设计，提供生产就绪的展示层。

精美嵌入

为备忘录卡片提供精美的外观，包括主题、密度预设、分组反应和图片预览。

开发者友好

从 Iframe 开始，需要更紧密集成时可切换到 Web Component 或 React 封装。

性能优先

使用可共享的演练场预设、轻量级渲染辅助函数和自动调整大小的嵌入组件，无需额外的粘合代码。

快速原型，放心发布

打开演练场生成可共享的配置，然后参考文档将配置部署到生产环境。