This sample demonstrates a Template Gallery for the Block Editor; use the horizontal card rail to choose a
template, load its blocks into the editor, and customize the content with slash (/) commands, lists, and inline
formatting.
This sample implements a Template Gallery for the Block Editor. A horizontal set of cards acts as a template picker; selecting a card loads its predefined block structure into the editor without reloading the page. Interactive cards: Each card is focusable and clickable, with active styling for the selected template. Dynamic loading: Clicking a card calls renderBlocksFromJson to populate the editor with that template’s blocks. Responsive behavior: A ResizeObserver re-evaluates when to enable horizontal scrolling as the viewport changes. Templates included: Blank Page, Project Brief, Team Decisions, Project Planning, and Meeting Notes. Use this gallery to kickstart common document plan projects, record decisions, run meetings, and more then tailor the content with headings, lists, checklists, and rich inline styles.