Skip to content

feat: add docs links to examples and examples links to docs#3182

Draft
gabrielmfern wants to merge 4 commits intocanaryfrom
cursor/editor-documentation-cross-links-f15d
Draft

feat: add docs links to examples and examples links to docs#3182
gabrielmfern wants to merge 4 commits intocanaryfrom
cursor/editor-documentation-cross-links-f15d

Conversation

@gabrielmfern
Copy link
Copy Markdown
Member

@gabrielmfern gabrielmfern commented Apr 6, 2026

Summary

Adds bidirectional cross-links between packages/editor/examples and the editor documentation in apps/docs.

Changes

New file: packages/editor/examples/README.md

  • Documents all 14 examples organized by difficulty (One-Line Editor, Getting Started, Intermediate, Advanced)
  • Each example links to its live demo, source file, and corresponding documentation page
  • Includes instructions for running examples locally
  • Lists all editor documentation pages for quick reference

Updated: Examples website (packages/editor/examples/src)

Added documentation links throughout the examples website:

  • index.ts — Added docsUrl field to ExampleItem interface; populated for all 14 examples
  • app.tsx — Shows a "Docs" link (with external-link icon) in the top-right of each example, linking to the relevant docs page
  • sidebar.tsx — Added a "Documentation" link in the sidebar footer linking to the editor overview

Updated: Editor documentation pages (11 files)

Added an "Examples" section with CardGroup links to the relevant runnable examples at editor-examples.react.email:

Documentation Page Linked Examples
editor/overview.mdx Full Email Builder, All Examples
editor/getting-started.mdx Minimal, Basic Editor, Full Features, All Examples
editor/features/bubble-menu.mdx Bubble Menu, Custom Bubble Menu
editor/features/slash-commands.mdx Slash Commands
editor/features/theming.mdx Email Theming
editor/features/styling.mdx Email Theming, Full Email Builder
editor/features/buttons.mdx Buttons
editor/features/column-layouts.mdx Column Layouts
editor/features/link-editing.mdx Link Editing
editor/features/email-export.mdx Email Export, Full Email Builder
editor/advanced/custom-extensions.mdx Custom Extensions

Why

Makes it easier for developers to navigate between documentation and working code. Reading docs? Jump straight to a runnable example. Browsing examples? Find the full documentation for the feature being demonstrated.

Open in Web Open in Cursor 

Summary by cubic

Adds bidirectional links between the editor docs and the live examples site so readers can jump between guidance and runnable demos. Each example also links back to its docs for quick reference.

  • New Features

    • Added packages/editor/examples/README.md listing 14 examples with links to live demos, source, related docs, and local run steps.
    • Updated 11 docs in apps/docs with an Examples section linking to hosted demos; featured links in editor/overview and editor/getting-started.
    • Examples site: added docsUrl for all 14 examples, a top-right Docs link per example, and a sidebar Documentation link.
  • Bug Fixes

    • Formatted SVG attributes and a long assignment to satisfy Biome.

Written for commit ed155c0. Summary will update on new commits.

- Create README.md in packages/editor/examples with a table of all
  examples, linking each to its source file and corresponding docs page
- Add 'Examples' sections to editor docs pages (overview, getting-started,
  bubble-menu, slash-commands, theming, styling, buttons, column-layouts,
  link-editing, email-export, custom-extensions) linking to relevant
  runnable examples on GitHub

Co-authored-by: Gabriel Miranda <gabrielmfern@outlook.com>
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
react-email Ready Ready Preview, Comment Apr 6, 2026 3:23pm
react-email-demo Ready Ready Preview, Comment Apr 6, 2026 3:23pm
react-email-examples Ready Ready Preview, Comment Apr 6, 2026 3:23pm

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 6, 2026

⚠️ No Changeset found

Latest commit: ed155c0

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@cubic-dev-ai
Copy link
Copy Markdown
Contributor

cubic-dev-ai bot commented Apr 6, 2026

This review could not be run because your cubic account has exceeded the monthly review limit. If you need help restoring access, please contact contact@cubic.dev.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Apr 6, 2026

Open in StackBlitz

npm i https://pkg.pr.new/@react-email/editor@3182

commit: ed155c0

@cursor cursor bot changed the title Add cross-links between editor documentation and examples chore: add cross-links between editor documentation and examples Apr 6, 2026
Update all cross-links in docs and README to point to the hosted
examples website at editor-examples.react.email with hash-based
routes (e.g., #bubble-menu, #full-email-builder) instead of raw
GitHub source file URLs.

Co-authored-by: Gabriel Miranda <gabrielmfern@outlook.com>
@gabrielmfern gabrielmfern changed the title chore: add cross-links between editor documentation and examples feat: add docs links to examples and examples links to docs Apr 6, 2026
- Add docsUrl field to ExampleItem interface and populate it for all
  14 examples, pointing to the relevant docs page on react.email
- Show a 'Docs' link with external-link icon in the top-right of each
  example's main content area, linking to that example's docs page
- Add a 'Documentation' link in the sidebar footer linking to the
  editor overview page

Co-authored-by: Gabriel Miranda <gabrielmfern@outlook.com>
Break long SVG and path attributes onto separate lines to satisfy
the Biome formatter, and wrap a long assignment in app.tsx.

Co-authored-by: Gabriel Miranda <gabrielmfern@outlook.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants