Hosted onhyper.mediavia theHypermedia Protocol

Develop Seed Hypermedia

Develop Seed Hypermedia

Interface Notions

Gabo H Beaumont

20 May 2026, 15:59
2921

I have the urge to write down our common understanding on the interface. I am very excited to build functionality, but I am also very concerned about creating a mess. I would be more comfortable if I learned the fundamentals and concepts of the interface. This way, I make sure the Agent Sticks to our conventions instead of generating random code that nobody will be able to maintain in the future. Let's see if I can extract those foundations from your brains. 🤗

In a React codebase, we don’t extend components in the OOP sense. The standard pattern is composition: reuse an existing component with props, wrap it in another component, or split responsibilities into parent and child components. A component becomes its own unit when it represents a clear UI element with its own responsibility or logic.

1. Shared UI primitives

frontend/packages/ui/src/components/

  1. alert-dialog.tsx

  2. badge.tsx

  3. calendar.tsx

  4. checkbox.tsx

  5. date-picker.tsx

  6. dialog.tsx

  7. dropdown-menu.tsx

  8. input.tsx

  9. label.tsx

  10. menubar.tsx

  11. popover.tsx

  12. progress.tsx

  13. radio-group.tsx

  14. scroll-area.tsx

  15. sidebar.tsx

  16. skeleton.tsx

  17. switch.tsx

  18. tabs.tsx

  19. text.tsx

  20. textarea.tsx

2. Shared UI components

frontend/packages/ui/src/

  1. accessories.tsx

  2. account-page.tsx

  3. activity.tsx

  4. api-inspector.tsx

  5. avatar.tsx

  6. blocks-content-utils.tsx

  7. button.tsx

  8. collaborators-page.tsx

  9. comments.tsx

  10. container.tsx

  11. copy-url-field.tsx

  12. data-viewer.tsx

  13. directory-page.tsx

  14. directory-panel.tsx

  15. discussions-page.tsx

  16. document-cover.tsx

  17. document-date.tsx

  18. document-header.tsx

  19. document-list-item.tsx

  20. document-tools.tsx

  21. draft-badge.tsx

  22. edit-profile-form.tsx

  23. email-notifications.tsx

  24. embed-views.tsx

  25. embed-wrapper.tsx

  26. entity-card.tsx

  27. face-pile.tsx

  28. feed-filters.tsx

  29. feed-page-common.tsx

  30. feed.tsx

  31. floating-account-footer.tsx

  32. follow-button.tsx

  33. followers.tsx

  34. following.tsx

  35. footer.tsx

  36. form-fields.tsx

  37. form-input.tsx

  38. forms.tsx

  39. heading.tsx

  40. highlight-context.tsx

  41. hm-host-banner.tsx

  42. hm-icon.tsx

  43. hover-card.tsx

  44. icon-form.tsx

  45. icons.tsx

  46. image-form.tsx

  47. inline-descriptor.tsx

  48. inline-draft-card.tsx

  49. inline-draft-list-item.tsx

  50. inline-feedback.tsx

  51. inline-subscribe-box.tsx

  52. inspect-ipfs-page.tsx

  53. inspector-page.tsx

  54. inspector-shell.tsx

  55. join-button.tsx

  56. layout.tsx

  57. list-item.tsx

  58. list.tsx

  59. members-facepile.tsx

  60. membership.tsx

  61. merged-badge.tsx

  62. mobile-panel-sheet.tsx

  63. navigation.tsx

  64. new-document-card.tsx

  65. new-document-list-item.tsx

  66. newspaper.tsx

  67. notification-list-item.tsx

  68. open-in-panel.tsx

  69. options-dropdown.tsx

  70. options-panel.tsx

  71. page-layout.tsx

  72. page-message-states.tsx

  73. page-tabs.tsx

  74. panel-layout.tsx

  75. preview-banner.tsx

  76. private-badge.tsx

  77. push-toast.tsx

  78. query-block-content.tsx

  79. resize-handle.tsx

  80. resource-page-common.tsx

  81. resource-token.tsx

  82. search.tsx

  83. seed-logo.tsx

  84. select-dropdown.tsx

  85. separator.tsx

  86. site-header.tsx

  87. site-logo.tsx

  88. spinner.tsx

  89. table-list.tsx

  90. text.tsx

  91. titlebar.tsx

  92. toast.tsx

  93. tooltip.tsx

  94. universal-dialog.tsx

  95. unreferenced-documents.tsx

3. Web app components/routes

frontend/apps/web/app/

  1. auth.tsx

  2. client-lazy.tsx

  3. commenting.tsx

  4. config-dotenv.tsx

  5. email-notifications.tsx

  6. entry.client.tsx

  7. entry.server.tsx

  8. not-registered.tsx

  9. notifications-page-content.tsx

  10. page-footer.tsx

  11. providers.tsx

  12. root.tsx

  13. ui/container.tsx

  14. universal-client.tsx

  15. web-feed-page.tsx

  16. web-resource-page.tsx

  17. web-site-header.tsx

  18. web-utils.tsx

Web routes

frontend/apps/web/app/routes/

  1. $.tsx

  2. _index.tsx

  3. api.$.tsx

  4. hm.api.admin.tsx

  5. hm.api.config.tsx

  6. hm.api.content-image.tsx

  7. hm.api.delegate-device.tsx

  8. hm.api.discover.tsx

  9. hm.api.document-update.tsx

  10. hm.api.file.$.tsx

  11. hm.api.image.$.tsx

  12. hm.api.register.tsx

  13. hm.api.resource.$.tsx

  14. hm.api.site-image.tsx

  15. hm.api.version.tsx

  16. hm.auth.callback.tsx

  17. hm.connect.tsx

  18. hm.device-link.$.tsx

  19. hm.download.tsx

  20. hm.notifications.tsx

  21. hm.register.tsx

4. Desktop app components

frontend/apps/desktop/src/components/

  1. add-block-at-end-button.tsx

  2. app-error.tsx

  3. assistant-panel.tsx

  4. auto-updater.tsx

  5. bookmarking.tsx

  6. branch-dialog.tsx

  7. commenting.tsx

  8. contacts-prompt.tsx

  9. copy-reference-button.tsx

  10. copy-reference-url.tsx

  11. cover-image.tsx

  12. create-doc-button.tsx

  13. debug-dialogs.tsx

  14. delete-dialog.tsx

  15. delete-draft-dialog.tsx

  16. desktop-query-block-draft-slot.tsx

  17. discussions-panel.tsx

  18. doc-navigation.tsx

  19. document-actions-provider.tsx

  20. edit-nav-header-pane.tsx

  21. edit-navigation-popover.tsx

  22. edit-profile-dialog.tsx

  23. editing-toolbar.tsx

  24. editor.tsx

  25. error-bar-macos.tsx

  26. error-bar-windows-linux.tsx

  27. error-bar.tsx

  28. footer.tsx

  29. hypermedia-highlight.tsx

  30. icon-form.tsx

  31. import-doc-button.tsx

  32. import-doc-dialog.tsx

  33. indicator.tsx

  34. inline-new-document-card.tsx

  35. join-button.tsx

  36. link-device-dialog.tsx

  37. location-picker.tsx

  38. main-wrapper.tsx

  39. markdown.tsx

  40. move-dialog.tsx

  41. network-dialog.tsx

  42. onboarding-icons.tsx

  43. onboarding.tsx

  44. options-panel.tsx

  45. parent-update-toast.tsx

  46. payment-settings.tsx

  47. placeholder-box.tsx

  48. publish-draft-button.tsx

  49. publish-graphics.tsx

  50. publish-site.tsx

  51. remote-vault-reminder.tsx

  52. search-input.tsx

  53. sidebar-base.tsx

  54. sidebar-footer.tsx

  55. sidebar.tsx

  56. titlebar-common.tsx

  57. titlebar-macos.tsx

  58. titlebar-windows-linux.tsx

  59. titlebar.tsx

  60. window-controls.tsx

  61. windows-linux-titlebar.tsx

  62. wxr-import-dialog.tsx

5. Desktop pages

frontend/apps/desktop/src/pages/

  1. api-inspector.tsx

  2. base.tsx

  3. contact-page.tsx

  4. contacts-page.tsx

  5. deleted-content.tsx

  6. desktop-feed.tsx

  7. desktop-resource.tsx

  8. document-placeholder.tsx

  9. drafts.tsx

  10. image-form.tsx

  11. inspect-ipfs.tsx

  12. inspect-resource.tsx

  13. library.tsx

  14. main.tsx

  15. notifications.tsx

  16. preview.tsx

  17. profile.tsx

  18. settings.tsx

6. Editor extensions

  1. BackgroundColor

  2. BlockHighlight

  3. BlockHoverActions

  4. BlockManipulation

  5. Blocks

  6. DragMedia

  7. FormattingToolbar

    frontend/packages/editor/src/hm-formatting-toolbar.tsx

  8. FullBlockSelection

  9. HyperlinkToolbar

  10. ImageGallery

  11. KeyboardShortcuts

  12. Latex

  13. LinkMenu

  14. Markdown

  15. Placeholder

  16. RangeSelection

  17. SideMenu

  18. SlashMenu

  19. Supernumbers

  20. TextAlignment

  21. TextColor

  22. TrailingNode

  23. UniqueID

Do you like what you are reading? Subscribe to receive updates.

Unsubscribe anytime

Powered by Seed Hypermedia