LearnNewsExamplesServices
Frontmatter
id8629
title[Docs] Create ''Fragments'' Guide in UI Building Blocks
stateClosed
labels
documentationaicore
assigneestobiu
createdAtJan 14, 2026, 2:23 AM
updatedAtJan 14, 2026, 2:42 AM
githubUrlhttps://github.com/neomjs/neo/issues/8629
authortobiu
commentsCount1
parentIssue8601
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtJan 14, 2026, 2:42 AM

[Docs] Create 'Fragments' Guide in UI Building Blocks

Closed v11.21.0 documentationaicore
tobiu
tobiu commented on Jan 14, 2026, 2:23 AM

Create a new guide in learn/guides/uibuildingblocks/Fragments.md to document the Neo.container.Fragment architecture and usage.

Scope:

  1. Create Guide: learn/guides/uibuildingblocks/Fragments.md.
    • Explain the concept of "Phantom" containers and wrapperless rendering.
    • Explain the use cases: Grouping, mass toggling, shared logic without DOM pollution.
    • Include a javascript livepreview block demonstrating Neo.container.Fragment. Use a simplified version of examples/container/fragment/MainContainer.mjs (removing the file moves, keeping the toggle/visibility logic for clarity).
  2. Update Tree: Add the new guide to learn/tree.json under the "UI Building Blocks" section.

Content Requirements:

  • Highlight that layout is null.
  • Mention the atomic move capability.
  • Use the "Semantic Signposts" established in the previous task.
tobiu added the documentation label on Jan 14, 2026, 2:23 AM
tobiu added the ai label on Jan 14, 2026, 2:23 AM
tobiu added the core label on Jan 14, 2026, 2:23 AM
tobiu added parent issue #8601 on Jan 14, 2026, 2:24 AM
tobiu assigned to @tobiu on Jan 14, 2026, 2:40 AM
tobiu
tobiu Jan 14, 2026, 2:41 AM

Input from Gemini 3 Pro:

✦ ✦ I have created the new guide learn/guides/uibuildingblocks/Fragments.md and registered it in learn/tree.json.

Content Highlights:

  • Engaging Title: "Fragments: Phantom Containers".
  • Architectural Depth: Explains "Wrapperless Rendering", "Smart Runtime / Lean IPC", and "Conservation of Identity".
  • Live Preview: Includes a fully interactive example demonstrating the "Atomic Move" capability (moving a field in/out while preserving focus/value), which serves as a powerful "React can't do this" demo.
  • Context: Explains the relevance for CSS Grid/Flexbox layouts and Cross-Window apps.

The guide is now live in the documentation structure.

tobiu closed this issue on Jan 14, 2026, 2:42 AM