diff --git a/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.stories.tsx b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.stories.tsx
new file mode 100644
index 00000000..79709059
--- /dev/null
+++ b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.stories.tsx
@@ -0,0 +1,11 @@
+import type {StoryObj} from '@storybook/react';
+
+import {GridBlockTemplatesDemo as component} from './GridBlockTemplates';
+
+export const Story: StoryObj<typeof component> = {};
+Story.storyName = 'Grid block templates';
+
+export default {
+    title: 'Examples / Grid block templates',
+    component,
+};
diff --git a/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx
new file mode 100644
index 00000000..d7c59583
--- /dev/null
+++ b/demo/src/stories/examples/grid-block-templates/GridBlockTemplates.tsx
@@ -0,0 +1,73 @@
+import {memo} from 'react';
+
+import {LayoutCells} from '@gravity-ui/icons';
+import {
+    MarkdownEditorView,
+    type ToolbarsPreset,
+    useMarkdownEditor,
+} from '@gravity-ui/markdown-editor';
+import {ToolbarName as Toolbar} from '@gravity-ui/markdown-editor/_/modules/toolbars/constants.js';
+import {defaultPreset} from '@gravity-ui/markdown-editor/_/modules/toolbars/presets.js';
+import {GridBlockTemplates as GridBlockTemplatesExtension} from '@gravity-ui/markdown-editor/extensions/additional/GridBlockTemplates/index.js';
+
+import {PlaygroundLayout} from '../../../components/PlaygroundLayout';
+
+const gridBlockTemplatesItemId = 'gridBlockTemplates';
+
+const toolbarsPreset: ToolbarsPreset = {
+    items: {
+        ...defaultPreset.items,
+        [gridBlockTemplatesItemId]: {
+            view: {
+                icon: {data: LayoutCells},
+                title: 'Grid block templates',
+            },
+            wysiwyg: {
+                exec: (e) => e.actions.createGridBlockTemplates.run(),
+                isActive: (e) => e.actions.createGridBlockTemplates.isActive(),
+                isEnable: (e) => e.actions.createGridBlockTemplates.isEnable(),
+            },
+        },
+    },
+    orders: {
+        ...defaultPreset.orders,
+        [Toolbar.wysiwygMain]: [
+            [gridBlockTemplatesItemId],
+            ...defaultPreset.orders[Toolbar.wysiwygMain],
+        ],
+    },
+};
+
+export const GridBlockTemplatesDemo = memo(function GridBlockTemplatesDemo() {
+    const editor = useMarkdownEditor(
+        {
+            initial: {mode: 'wysiwyg', markup: ''},
+            wysiwygConfig: {
+                extensions: (builder) =>
+                    builder.use(GridBlockTemplatesExtension, {
+                        templates: {
+                            showButton: true,
+                            allowAdd: true,
+                        },
+                    }),
+            },
+        },
+        [],
+    );
+
+    return (
+        <PlaygroundLayout
+            editor={editor}
+            view={({className}) => (
+                <MarkdownEditorView
+                    autofocus
+                    stickyToolbar
+                    settingsVisible
+                    editor={editor}
+                    className={className}
+                    toolbarsPreset={toolbarsPreset}
+                />
+            )}
+        />
+    );
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
new file mode 100644
index 00000000..5d981c35
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplates.test.ts
@@ -0,0 +1,78 @@
+import {builders} from 'prosemirror-test-builder';
+
+import {ExtensionsManager} from '../../../core';
+import {BaseNode, BaseSchemaSpecs} from '../../specs';
+
+import {GridBlockTemplatesSpecs} from './GridBlockTemplatesSpecs';
+import {GridBlockTemplatesAttrs, gridBlockTemplatesNodeName} from './GridBlockTemplatesSpecs/const';
+
+const {schema, serializer} = new ExtensionsManager({
+    extensions: (builder) => builder.use(BaseSchemaSpecs, {}).use(GridBlockTemplatesSpecs, {}),
+}).buildDeps();
+
+const {doc, gridBlockTemplates} = builders<'doc' | 'gridBlockTemplates'>(schema, {
+    doc: {nodeType: BaseNode.Doc},
+    gridBlockTemplates: {nodeType: gridBlockTemplatesNodeName},
+});
+
+describe('GridBlockTemplates extension', () => {
+    it('should serialize blocks without inline styles', () => {
+        expect(
+            serializer.serialize(
+                doc(
+                    gridBlockTemplates({
+                        [GridBlockTemplatesAttrs.blocks]: [
+                            {id: 'block-1', css: '', content: '<strong>First</strong>'},
+                        ],
+                        [GridBlockTemplatesAttrs.EntityId]: 'grid_block_templates-1',
+                    }),
+                ),
+            ),
+        ).toBe(
+            [
+                '::: html',
+                '<div class="grid-templates-scope-grid_block_templates-1">',
+                '  <div class="grid">',
+                '    <div class="block-1"><strong>First</strong></div>',
+                '  </div>',
+                '</div>',
+                ':::',
+            ].join('\n'),
+        );
+    });
+
+    it('should emit scoped container and per-block css into a style tag', () => {
+        expect(
+            serializer.serialize(
+                doc(
+                    gridBlockTemplates({
+                        [GridBlockTemplatesAttrs.blocks]: [
+                            {
+                                id: 'block-1',
+                                css: '& { padding: 12px; }\nh3 { margin: 0; }',
+                                content: 'First',
+                            },
+                        ],
+                        [GridBlockTemplatesAttrs.customCss]: '.grid { align-items: center; }',
+                        [GridBlockTemplatesAttrs.EntityId]: 'grid_block_templates-1',
+                    }),
+                ),
+            ),
+        ).toBe(
+            [
+                '::: html',
+                '<div class="grid-templates-scope-grid_block_templates-1">',
+                '  <style>',
+                '    .grid-templates-scope-grid_block_templates-1 .grid { align-items: center; }',
+                '    .grid-templates-scope-grid_block_templates-1 .block-1 { padding: 12px; }',
+                '    .grid-templates-scope-grid_block_templates-1 .block-1 h3 { margin: 0; }',
+                '  </style>',
+                '  <div class="grid">',
+                '    <div class="block-1">First</div>',
+                '  </div>',
+                '</div>',
+                ':::',
+            ].join('\n'),
+        );
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
new file mode 100644
index 00000000..86e53796
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/BlockInsertPopup.tsx
@@ -0,0 +1,121 @@
+import {useState} from 'react';
+
+import {Code} from '@gravity-ui/icons';
+import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
+
+import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
+import {i18n} from 'src/i18n/grid-block-templates';
+
+import {parseRawBlock} from '../templates';
+import type {GridBlockBlockTemplate, GridBlockTemplateBlock} from '../types';
+
+import {GroupedTemplatesMenuItems} from './GroupedTemplatesMenuItems';
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+interface BlockInsertPopupProps {
+    anchor: HTMLElement | null;
+    open: boolean;
+    templates: GridBlockBlockTemplate[];
+    onClose: () => void;
+    onApplyTemplate: (template: GridBlockBlockTemplate) => void;
+    onApplyHtml: (block: GridBlockTemplateBlock) => void;
+}
+
+export const BlockInsertPopup: React.FC<BlockInsertPopupProps> = ({
+    anchor,
+    open,
+    templates,
+    onClose,
+    onApplyTemplate,
+    onApplyHtml,
+}) => {
+    const [addingCustomHtml, setAddingCustomHtml] = useState(false);
+    const [input, setInput] = useState('');
+    const [filter, setFilter] = useState('');
+    const showCustomHtmlEditor = addingCustomHtml || templates.length === 0;
+
+    const close = () => {
+        setAddingCustomHtml(false);
+        setInput('');
+        setFilter('');
+        onClose();
+    };
+
+    const handleApplyHtml = () => {
+        onApplyHtml(parseRawBlock(input));
+        close();
+    };
+
+    return (
+        <Popup anchorElement={anchor} open={open} onOpenChange={close} placement="bottom-start">
+            <div className={b('templates', [stop])}>
+                {showCustomHtmlEditor ? (
+                    <div className={b('templates-editor')}>
+                        <TextArea
+                            controlProps={{className: stop}}
+                            value={input}
+                            onUpdate={setInput}
+                            placeholder={i18n('block_html_input_placeholder')}
+                            minRows={8}
+                            autoFocus
+                        />
+                        <div className={b('templates-controls')}>
+                            <Button view="flat" className={stop} onClick={close}>
+                                <span className={stop}>{i18n('cancel')}</span>
+                            </Button>
+                            <Button
+                                view="action"
+                                className={stop}
+                                disabled={!input.trim()}
+                                onClick={handleApplyHtml}
+                            >
+                                <span className={stop}>{i18n('insert')}</span>
+                            </Button>
+                        </div>
+                    </div>
+                ) : (
+                    <>
+                        <div className={b('templates-search')}>
+                            <TextInput
+                                className={stop}
+                                controlProps={{className: stop}}
+                                size="s"
+                                value={filter}
+                                onUpdate={setFilter}
+                                placeholder={i18n('search_templates')}
+                                autoFocus
+                            />
+                        </div>
+                        <div className={b('templates-list', [stop])}>
+                            <Menu className={stop}>
+                                <Menu.Item
+                                    className={stop}
+                                    iconStart={<Icon data={Code} />}
+                                    onClick={() => setAddingCustomHtml(true)}
+                                >
+                                    {i18n('custom_html')}
+                                </Menu.Item>
+                                <div
+                                    role="separator"
+                                    className={b('templates-separator', [stop])}
+                                />
+                                <GroupedTemplatesMenuItems
+                                    templates={templates}
+                                    filter={filter}
+                                    emptyText={i18n('block_templates_empty')}
+                                    onApply={(template) => {
+                                        onApplyTemplate(template);
+                                        close();
+                                    }}
+                                />
+                            </Menu>
+                        </div>
+                    </>
+                )}
+            </div>
+        </Popup>
+    );
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
new file mode 100644
index 00000000..42d83a4b
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockItem.tsx
@@ -0,0 +1,400 @@
+import {useRef, useState} from 'react';
+import type {CSSProperties, MouseEvent, PointerEvent as ReactPointerEvent} from 'react';
+
+import {Ellipsis, Gear, GripHorizontal, Pencil, TrashBin} from '@gravity-ui/icons';
+import {Button, Icon, Menu, Popup} from '@gravity-ui/uikit';
+
+import {i18n} from 'src/i18n/grid-block-templates';
+
+import {blockClass} from '../css';
+import type {GridBlock} from '../types';
+
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+import type {DropTarget} from './drag';
+import {getBlockDragAttrs} from './drag';
+import {
+    getTextNodes,
+    openInlineImageSrcEditor,
+    openInlineLinkEditor,
+    openInlineTextEditor,
+} from './textEditing';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+const inlineEditButtonSelector = `.${b('inline-edit-button')}`;
+const textTargetSelector = [
+    'h1',
+    'h2',
+    'h3',
+    'h4',
+    'h5',
+    'h6',
+    'p',
+    'a',
+    'span',
+    'strong',
+    'em',
+    'b',
+    'i',
+    'li',
+    'dt',
+    'dd',
+    'blockquote',
+    'figcaption',
+    'cite',
+    'small',
+    'label',
+    'td',
+    'th',
+].join(',');
+
+interface GridBlockItemProps {
+    block: GridBlock;
+    index: number;
+    isDragged: boolean;
+    dropTarget: DropTarget | null;
+    onBeginDrag: (blockId: string, event: ReactPointerEvent<HTMLButtonElement>) => void;
+    onOpenSettings: (blockId: string, anchor: HTMLElement) => void;
+    onCommitContent: (blockId: string, content: string) => void;
+    onRemove: (blockId: string) => void;
+}
+
+type InlineEditTarget =
+    | {
+          kind: 'text';
+          element: HTMLElement;
+          buttonStyle: CSSProperties;
+          outlineStyle: CSSProperties;
+      }
+    | {
+          kind: 'link';
+          link: HTMLAnchorElement;
+          element: HTMLAnchorElement;
+          buttonStyle: CSSProperties;
+          outlineStyle: CSSProperties;
+      }
+    | {
+          kind: 'image';
+          image: HTMLImageElement;
+          element: HTMLImageElement;
+          buttonStyle: CSSProperties;
+          outlineStyle: CSSProperties;
+      };
+
+const clamp = (value: number, min: number, max: number) =>
+    Math.max(min, Math.min(value, Math.max(min, max)));
+
+const getTargetStyles = (root: HTMLElement, target: HTMLElement) => {
+    const rect = root.getBoundingClientRect();
+    const targetRect = target.getBoundingClientRect();
+    const left = targetRect.left - rect.left;
+    const top = targetRect.top - rect.top;
+
+    return {
+        buttonStyle: {
+            left: clamp(left + targetRect.width - 40, 4, rect.width - 40),
+            top: clamp(top + 4, 4, rect.height - 40),
+        },
+        outlineStyle: {
+            left: Math.max(0, left - 3),
+            top: Math.max(0, top - 3),
+            width: targetRect.width + 6,
+            height: targetRect.height + 6,
+        },
+    };
+};
+
+const getEditableTextElement = (root: HTMLElement, target: Element) => {
+    const element = target.closest<HTMLElement>(textTargetSelector);
+
+    if (!element || !root.contains(element) || !getTextNodes(element).length) return null;
+
+    return element;
+};
+
+const getEditableLinkElement = (root: HTMLElement, target: Element) => {
+    const link = target instanceof HTMLAnchorElement ? target : target.closest('a');
+
+    if (!(link instanceof HTMLAnchorElement) || !root.contains(link)) return null;
+
+    return link;
+};
+
+const getInlineEditTarget = (
+    root: HTMLElement,
+    target: EventTarget | null,
+): InlineEditTarget | null => {
+    if (!(target instanceof Element) || target.closest(inlineEditButtonSelector)) return null;
+
+    const image = target instanceof HTMLImageElement ? target : target.closest('img');
+    if (image instanceof HTMLImageElement && root.contains(image)) {
+        return {
+            kind: 'image',
+            image,
+            element: image,
+            ...getTargetStyles(root, image),
+        };
+    }
+
+    const link = getEditableLinkElement(root, target);
+    if (link) {
+        return {
+            kind: 'link',
+            link,
+            element: link,
+            ...getTargetStyles(root, link),
+        };
+    }
+
+    const element = getEditableTextElement(root, target);
+    if (!element) return null;
+
+    return {
+        kind: 'text',
+        element,
+        ...getTargetStyles(root, element),
+    };
+};
+
+export const GridBlockItem: React.FC<GridBlockItemProps> = ({
+    block,
+    index,
+    isDragged,
+    dropTarget,
+    onBeginDrag,
+    onOpenSettings,
+    onCommitContent,
+    onRemove,
+}) => {
+    const contentRef = useRef<HTMLDivElement>(null);
+    const [inlineEditTarget, setInlineEditTarget] = useState<InlineEditTarget | null>(null);
+    const [blockMenuAnchor, setBlockMenuAnchor] = useState<HTMLElement | null>(null);
+    const [blockMenuOpen, setBlockMenuOpen] = useState(false);
+
+    const number = index + 1;
+    const isDropBefore = dropTarget?.id === block.id && dropTarget.placement === 'before';
+    const isDropAfter = dropTarget?.id === block.id && dropTarget.placement === 'after';
+
+    const handleOpenSettings = (event: MouseEvent<HTMLElement>) => {
+        onOpenSettings(block.id, event.currentTarget);
+    };
+
+    const handleToggleBlockMenu = (event: MouseEvent<HTMLElement>) => {
+        setBlockMenuAnchor(event.currentTarget);
+        setBlockMenuOpen((open) => !open);
+    };
+
+    const handleRemoveBlock = () => {
+        setBlockMenuOpen(false);
+        onRemove(block.id);
+    };
+
+    const handlePointerDown = (event: ReactPointerEvent<HTMLButtonElement>) => {
+        onBeginDrag(block.id, event);
+    };
+
+    const handleContentMouseMove = (event: MouseEvent<HTMLDivElement>) => {
+        const root = contentRef.current;
+        if (!root) return;
+
+        const nextTarget = getInlineEditTarget(root, event.target);
+        if (!nextTarget) return;
+
+        setInlineEditTarget((currentTarget) => {
+            if (
+                currentTarget?.kind === nextTarget.kind &&
+                currentTarget.element === nextTarget.element
+            ) {
+                return currentTarget;
+            }
+
+            return nextTarget;
+        });
+    };
+
+    const handleContentMouseOut = (event: MouseEvent<HTMLDivElement>) => {
+        const element = inlineEditTarget?.element;
+        if (!element || !(event.target instanceof Node) || !element.contains(event.target)) return;
+
+        const nextElement = event.relatedTarget;
+        if (
+            nextElement instanceof Node &&
+            (element.contains(nextElement) ||
+                (nextElement instanceof Element && nextElement.closest(inlineEditButtonSelector)))
+        ) {
+            return;
+        }
+
+        setInlineEditTarget(null);
+    };
+
+    const openInlineEditTarget = (target: InlineEditTarget) => {
+        const root = contentRef.current;
+        if (!root) return false;
+
+        if (target.kind === 'text') {
+            const textNode = getTextNodes(target.element)[0];
+            if (!textNode) return false;
+
+            openInlineTextEditor({
+                root,
+                textNode,
+                onCommit: (html) => onCommitContent(block.id, html),
+            });
+        } else if (target.kind === 'link') {
+            openInlineLinkEditor({
+                root,
+                link: target.link,
+                onCommit: (html) => onCommitContent(block.id, html),
+            });
+        } else {
+            openInlineImageSrcEditor({
+                root,
+                image: target.image,
+                onCommit: (html) => onCommitContent(block.id, html),
+            });
+        }
+
+        setInlineEditTarget(null);
+
+        return true;
+    };
+
+    const handleOpenInlineEdit = (event: MouseEvent<HTMLButtonElement>) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!inlineEditTarget) return;
+
+        openInlineEditTarget(inlineEditTarget);
+    };
+
+    const handleContentClick = (event: MouseEvent<HTMLDivElement>) => {
+        const root = contentRef.current;
+        const target = event.target;
+        if (!root || !(target instanceof Element) || target.closest(inlineEditButtonSelector)) {
+            return;
+        }
+
+        const link = getEditableLinkElement(root, target);
+        if (!link || target.closest('img')) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        openInlineEditTarget({
+            kind: 'link',
+            link,
+            element: link,
+            ...getTargetStyles(root, link),
+        });
+    };
+
+    const handleContentDoubleClick = (event: MouseEvent<HTMLDivElement>) => {
+        const root = contentRef.current;
+        if (!root) return;
+
+        const target = getInlineEditTarget(root, event.target);
+        if (!target) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        openInlineEditTarget(target);
+    };
+
+    return (
+        <div
+            className={`${b('item', {
+                dragged: isDragged,
+                'drop-before': isDropBefore,
+                'drop-after': isDropAfter,
+            })} ${stop} ${blockClass(index)}`}
+            {...getBlockDragAttrs(block.id)}
+        >
+            <button
+                type="button"
+                className={`${b('item-drag')} ${stop}`}
+                onPointerDown={handlePointerDown}
+                aria-label={i18n('drag_block', {index: String(number)})}
+            >
+                <Icon data={GripHorizontal} size={14} />
+            </button>
+            <div className={`${b('item-controls', {open: blockMenuOpen})} ${stop}`}>
+                <Button
+                    view="flat"
+                    size="s"
+                    className={stop}
+                    onClick={handleOpenSettings}
+                    aria-label={i18n('block_css', {index: String(number)})}
+                >
+                    <Icon data={Gear} size={14} className={stop} />
+                </Button>
+                <Button
+                    view="flat"
+                    size="s"
+                    className={stop}
+                    onClick={handleToggleBlockMenu}
+                    aria-label={i18n('block_actions', {index: String(number)})}
+                >
+                    <Icon data={Ellipsis} size={14} className={stop} />
+                </Button>
+            </div>
+            <Popup
+                anchorElement={blockMenuAnchor}
+                open={blockMenuOpen}
+                onOpenChange={setBlockMenuOpen}
+                placement="bottom-end"
+            >
+                <Menu className={stop}>
+                    <Menu.Item
+                        className={stop}
+                        iconStart={<Icon data={TrashBin} />}
+                        onClick={handleRemoveBlock}
+                    >
+                        {i18n('remove_block')}
+                    </Menu.Item>
+                </Menu>
+            </Popup>
+            <div
+                className={`${b('item-content')} ${stop}`}
+                contentEditable={false}
+                suppressContentEditableWarning
+                onClick={handleContentClick}
+                onMouseMove={handleContentMouseMove}
+                onMouseOut={handleContentMouseOut}
+                onMouseLeave={() => setInlineEditTarget(null)}
+                onDoubleClick={handleContentDoubleClick}
+            >
+                <div
+                    ref={contentRef}
+                    className={b('item-content-html')}
+                    dangerouslySetInnerHTML={{__html: block.content}}
+                />
+                {inlineEditTarget && (
+                    <>
+                        <div
+                            className={b('inline-edit-outline')}
+                            style={inlineEditTarget.outlineStyle}
+                        />
+                        <button
+                            type="button"
+                            className={`${b('inline-edit-button')} ${stop}`}
+                            style={inlineEditTarget.buttonStyle}
+                            onClick={handleOpenInlineEdit}
+                            aria-label={
+                                inlineEditTarget.kind === 'image'
+                                    ? i18n('edit_image_src')
+                                    : inlineEditTarget.kind === 'link'
+                                      ? i18n('edit_link')
+                                      : i18n('edit_text')
+                            }
+                        >
+                            <Icon data={Pencil} size={18} className={stop} />
+                        </button>
+                    </>
+                )}
+            </div>
+        </div>
+    );
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
new file mode 100644
index 00000000..706520df
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplates.scss
@@ -0,0 +1,246 @@
+.g-md-grid-block-templates {
+    position: relative;
+
+    margin-bottom: 15px;
+    padding: 32px 12px 12px;
+
+    border: 1px solid var(--g-color-line-generic);
+    border-radius: var(--g-border-radius-m);
+
+    &__toolbar {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        left: 4px;
+
+        display: flex;
+        justify-content: space-between;
+        gap: 2px;
+    }
+
+    &__toolbar-group {
+        display: flex;
+        gap: 2px;
+    }
+
+    &__grid {
+        display: grid;
+        align-items: stretch;
+        gap: 8px;
+    }
+
+    &__item {
+        position: relative;
+
+        min-height: 56px;
+        padding: 12px;
+
+        border: 1px dashed var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-m);
+
+        &_dragged {
+            opacity: 0.45;
+        }
+
+        &_drop-before {
+            box-shadow: -3px 0 0 var(--g-color-line-focus);
+        }
+
+        &_drop-after {
+            box-shadow: 3px 0 0 var(--g-color-line-focus);
+        }
+    }
+
+    &__item-controls {
+        position: absolute;
+        z-index: 3;
+        top: 2px;
+        right: 2px;
+
+        display: flex;
+        gap: 2px;
+
+        opacity: 0;
+
+        transition: opacity 0.1s ease-in-out;
+
+        &_open {
+            opacity: 1;
+        }
+    }
+
+    &__item:hover &__item-controls {
+        opacity: 1;
+    }
+
+    &__item-drag {
+        position: absolute;
+        z-index: 1;
+        top: 2px;
+        left: 2px;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        width: 24px;
+        height: 24px;
+        padding: 0;
+
+        cursor: grab;
+
+        // pointer-based drag: keep the gesture on the handle instead of scrolling
+        touch-action: none;
+
+        opacity: 0;
+        color: var(--g-color-text-secondary);
+        border: 0;
+        border-radius: var(--g-border-radius-xs);
+        background: var(--g-color-base-float);
+        box-shadow: 0 0 0 1px var(--g-color-line-generic);
+
+        transition: opacity 0.1s ease-in-out;
+
+        &:active {
+            cursor: grabbing;
+        }
+
+        &:hover {
+            color: var(--g-color-text-primary);
+            background: var(--g-color-base-generic-hover);
+        }
+    }
+
+    &__item:hover &__item-drag {
+        opacity: 1;
+    }
+
+    &__item-content {
+        position: relative;
+
+        min-height: 1.2em;
+
+        outline: none;
+    }
+
+    &__item-content-html {
+        &:empty::before {
+            content: 'Text...';
+
+            color: var(--g-color-text-hint);
+        }
+    }
+
+    &__inline-edit-outline {
+        position: absolute;
+        z-index: 1;
+
+        pointer-events: none;
+
+        border: 1px solid var(--g-color-line-focus);
+        border-radius: var(--g-border-radius-xs);
+        background: rgb(82 130 255 / 5%);
+    }
+
+    &__inline-edit-button {
+        position: absolute;
+        z-index: 2;
+
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        width: 40px;
+        height: 40px;
+        padding: 10px;
+
+        cursor: pointer;
+
+        color: var(--g-color-text-primary);
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-m);
+        background: var(--g-color-base-float);
+        box-shadow: 0 8px 18px rgb(0 0 0 / 14%);
+
+        &:hover {
+            border-color: var(--g-color-line-focus);
+            background: var(--g-color-base-generic);
+        }
+    }
+
+    &__inline-link-editor {
+        display: inline-grid;
+        grid-template-columns: minmax(96px, 1fr) minmax(132px, 1.3fr);
+        gap: 4px;
+
+        width: min(100%, 520px);
+        padding: 4px;
+
+        vertical-align: middle;
+
+        border: 1px solid var(--g-color-line-focus);
+        border-radius: var(--g-border-radius-s);
+        background: var(--g-color-base-float);
+        box-shadow: 0 8px 18px rgb(0 0 0 / 12%);
+    }
+
+    &__inline-link-editor-input {
+        min-width: 0;
+        height: 28px;
+        padding: 0 8px;
+
+        font: inherit;
+
+        color: inherit;
+        border: 1px solid var(--g-color-line-generic);
+        border-radius: var(--g-border-radius-xs);
+        background: var(--g-color-base-background);
+    }
+
+    &__inline-text-editor {
+        width: 100%;
+        min-height: 32px;
+        padding: 4px 6px;
+
+        font: inherit;
+        resize: vertical;
+
+        color: inherit;
+        border: 1px solid var(--g-color-line-focus);
+        border-radius: var(--g-border-radius-xs);
+        background: var(--g-color-base-background);
+
+        &_src {
+            width: min(100%, 420px);
+
+            resize: none;
+        }
+    }
+
+    &__settings-editor {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+        gap: 10px;
+
+        width: 720px;
+        max-width: calc(100vw - 32px);
+        padding: 8px;
+
+        .g-text-area__control {
+            font-family: var(--g-font-family-monospace);
+        }
+    }
+
+    &__field {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    &__field-label {
+        font-size: var(--g-text-caption-1-font-size);
+        line-height: var(--g-text-caption-1-line-height);
+
+        color: var(--g-color-text-secondary);
+    }
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
new file mode 100644
index 00000000..0853990b
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GridBlockTemplatesView.tsx
@@ -0,0 +1,285 @@
+import {useMemo, useState} from 'react';
+
+import {Gear, LayoutHeaderColumns, Plus, TrashBin} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import type {Node} from 'prosemirror-model';
+import type {EditorView} from 'prosemirror-view';
+
+import {i18n} from 'src/i18n/grid-block-templates';
+import {useBooleanState, useElementState} from 'src/react-utils/hooks';
+import {removeNode} from 'src/utils/remove-node';
+
+import {GridBlockTemplatesConsts} from '../GridBlockTemplatesSpecs/const';
+import {mergeTemplatesById, readStoredTemplates} from '../templates';
+import type {
+    GridBlock,
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplate,
+    GridBlockTemplateBlock,
+    GridBlockTemplatesOptions,
+} from '../types';
+
+import {BlockInsertPopup} from './BlockInsertPopup';
+import {GridBlockItem} from './GridBlockItem';
+import {BlockSettingsPopup, ContainerSettingsPopup} from './SettingsPopups';
+import {TemplatesPopup} from './TemplatesPopup';
+import {
+    buildContainerHtml,
+    buildScopedCss,
+    containerTemplateToAttrs,
+    getGridScopeClass,
+    isBlockTemplate,
+    isContainerTemplate,
+    parseContainerHtml,
+    rawTemplateBlockToBlock,
+    templateToBlock,
+} from './blockUtils';
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+import {getBlockTemplatesForMenu} from './derivedBlockTemplates';
+import {useGridBlockDrag} from './drag';
+
+import './GridBlockTemplates.scss';
+
+export {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+const EMPTY_BLOCKS: GridBlock[] = [];
+
+export const GridBlockTemplatesView: React.FC<{
+    node: Node;
+    getPos: () => number | undefined;
+    view: EditorView;
+    onChange: (attrs: Partial<Node['attrs']>) => void;
+    options: {templates?: GridBlockTemplatesOptions};
+}> = ({node, getPos, view, onChange, options}) => {
+    const entityId: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.EntityId];
+    const customCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.customCss] ?? '';
+    const blocks: GridBlock[] =
+        node.attrs[GridBlockTemplatesConsts.NodeAttrs.blocks] ?? EMPTY_BLOCKS;
+    const {templates} = options;
+
+    const scopeClass = useMemo(() => getGridScopeClass(entityId), [entityId]);
+    const scopedCss = useMemo(
+        () => buildScopedCss({blocks, customCss, scopeClass}),
+        [customCss, blocks, scopeClass],
+    );
+
+    const [containerAnchor, setContainerAnchor] = useElementState();
+    const [containerCssOpen, setContainerCssOpen] = useState(false);
+
+    const [blockAnchor, setBlockAnchor] = useElementState();
+    const [editingBlockSettingsId, setEditingBlockSettingsId] = useState<string | null>(null);
+
+    const allowAdd = Boolean(templates?.allowAdd);
+    const [storedTemplates, setStoredTemplates] =
+        useState<GridBlockTemplate[]>(readStoredTemplates);
+    const effectiveTemplates = useMemo(
+        () => mergeTemplatesById(templates?.items ?? [], storedTemplates),
+        [templates?.items, storedTemplates],
+    );
+    const containerTemplates = useMemo(
+        () => effectiveTemplates.filter(isContainerTemplate),
+        [effectiveTemplates],
+    );
+    const explicitBlockTemplates = useMemo(
+        () => effectiveTemplates.filter(isBlockTemplate),
+        [effectiveTemplates],
+    );
+    const blockTemplates = useMemo(
+        () =>
+            getBlockTemplatesForMenu({
+                blockTemplates: explicitBlockTemplates,
+                containerTemplates,
+            }),
+        [explicitBlockTemplates, containerTemplates],
+    );
+
+    const showContainerTemplatesButton =
+        Boolean(templates?.showButton) && (allowAdd || containerTemplates.length > 0);
+    const [containerTemplatesOpen, , closeContainerTemplates, toggleContainerTemplatesOpen] =
+        useBooleanState(false);
+    const [containerTemplatesAnchor, setContainerTemplatesAnchor] = useElementState();
+    const [blockTemplatesOpen, openBlockTemplates, closeBlockTemplates] = useBooleanState(false);
+    const [blockTemplatesAnchor, setBlockTemplatesAnchor] = useState<HTMLElement | null>(null);
+    const containerHtml = useMemo(() => buildContainerHtml(blocks), [blocks]);
+
+    const setBlocks = (next: GridBlock[]) =>
+        onChange({[GridBlockTemplatesConsts.NodeAttrs.blocks]: next});
+
+    const {beginBlockDrag, draggedBlockId, dropTarget} = useGridBlockDrag({
+        blocks,
+        onMove: setBlocks,
+    });
+
+    const applyContainerTemplate = (template: GridBlockContainerTemplate) => {
+        const {customCss: nextCustomCss, blocks: nextBlocks} = containerTemplateToAttrs(
+            template,
+            blocks,
+        );
+
+        onChange({
+            [GridBlockTemplatesConsts.NodeAttrs.customCss]: nextCustomCss,
+            [GridBlockTemplatesConsts.NodeAttrs.blocks]: nextBlocks,
+        });
+        closeContainerTemplates();
+    };
+
+    const applyBlockTemplate = (template: GridBlockBlockTemplate) => {
+        setBlocks([...blocks, templateToBlock(template)]);
+        closeBlockTemplates();
+    };
+
+    const applyRawBlock = (block: GridBlockTemplateBlock) => {
+        setBlocks([...blocks, rawTemplateBlockToBlock(block)]);
+        closeBlockTemplates();
+    };
+
+    const patchBlock = (id: string, patch: Partial<GridBlock>) =>
+        setBlocks(blocks.map((block) => (block.id === id ? {...block, ...patch} : block)));
+
+    const openBlockSettings = (id: string, anchor: HTMLElement) => {
+        setBlockAnchor(anchor);
+        setEditingBlockSettingsId(id);
+    };
+
+    const commitBlockContent = (id: string, content: string) => {
+        patchBlock(id, {content});
+    };
+
+    const removeBlock = (id: string) => {
+        setBlocks(blocks.filter((block) => block.id !== id));
+        if (editingBlockSettingsId === id) setEditingBlockSettingsId(null);
+    };
+
+    const commitContainerHtml = (html: string) => {
+        const nextBlocks = parseContainerHtml(html, blocks);
+        if (nextBlocks) setBlocks(nextBlocks);
+    };
+
+    const editingBlockSettings =
+        blocks.find((block) => block.id === editingBlockSettingsId) ?? null;
+
+    return (
+        <div className={`${b()} ${scopeClass}`}>
+            {/* PROTOTYPE scoping: selectors in user CSS are prefixed with the instance scope. */}
+            <style>{`.${scopeClass} .grid{display:grid;gap:8px}\n${scopedCss}`}</style>
+
+            <div className={b('toolbar', [stop])}>
+                <div className={b('toolbar-group', {side: 'left'})}>
+                    <Button
+                        view="flat"
+                        size="s"
+                        ref={setBlockTemplatesAnchor}
+                        className={stop}
+                        onClick={openBlockTemplates}
+                        aria-label={i18n('add_block')}
+                    >
+                        <Icon data={Plus} className={stop} />
+                    </Button>
+                </div>
+                <div className={b('toolbar-group', {side: 'right'})}>
+                    <Button
+                        view="flat"
+                        size="s"
+                        ref={setContainerAnchor}
+                        className={stop}
+                        onClick={() => setContainerCssOpen((v) => !v)}
+                        aria-label={i18n('grid_css')}
+                    >
+                        <Icon data={Gear} className={stop} />
+                    </Button>
+                    {showContainerTemplatesButton && (
+                        <Button
+                            view="flat"
+                            size="s"
+                            ref={setContainerTemplatesAnchor}
+                            className={stop}
+                            onClick={toggleContainerTemplatesOpen}
+                            aria-label={i18n('container_templates')}
+                        >
+                            <Icon data={LayoutHeaderColumns} className={stop} />
+                        </Button>
+                    )}
+                    <Button
+                        view="flat"
+                        size="s"
+                        className={stop}
+                        onClick={() => {
+                            const pos = getPos();
+                            if (pos === undefined) return;
+                            removeNode({node, pos, tr: view.state.tr, dispatch: view.dispatch});
+                        }}
+                        aria-label={i18n('remove_grid')}
+                    >
+                        <Icon data={TrashBin} className={stop} />
+                    </Button>
+                </div>
+                {showContainerTemplatesButton && (
+                    <TemplatesPopup
+                        anchor={containerTemplatesAnchor}
+                        open={containerTemplatesOpen}
+                        templates={containerTemplates}
+                        allowAdd={allowAdd}
+                        emptyText={i18n('container_templates_empty')}
+                        hasStoredTemplates={storedTemplates.length > 0}
+                        onClose={closeContainerTemplates}
+                        onApply={applyContainerTemplate}
+                        onAdded={setStoredTemplates}
+                        onCleared={setStoredTemplates}
+                    />
+                )}
+            </div>
+
+            <div className={`${b('grid')} grid`}>
+                {blocks.map((block, i) => (
+                    <GridBlockItem
+                        key={block.id}
+                        block={block}
+                        index={i}
+                        isDragged={draggedBlockId === block.id}
+                        dropTarget={dropTarget}
+                        onBeginDrag={beginBlockDrag}
+                        onOpenSettings={openBlockSettings}
+                        onCommitContent={commitBlockContent}
+                        onRemove={removeBlock}
+                    />
+                ))}
+            </div>
+
+            <BlockInsertPopup
+                anchor={blockTemplatesAnchor}
+                open={blockTemplatesOpen}
+                templates={blockTemplates}
+                onClose={closeBlockTemplates}
+                onApplyTemplate={applyBlockTemplate}
+                onApplyHtml={applyRawBlock}
+            />
+
+            <ContainerSettingsPopup
+                anchor={containerAnchor}
+                open={containerCssOpen}
+                onClose={() => setContainerCssOpen(false)}
+                html={containerHtml}
+                css={customCss}
+                onHtmlCommit={commitContainerHtml}
+                onCssChange={(value) =>
+                    onChange({[GridBlockTemplatesConsts.NodeAttrs.customCss]: value})
+                }
+            />
+
+            {editingBlockSettings && (
+                <BlockSettingsPopup
+                    anchor={blockAnchor}
+                    open
+                    onClose={() => setEditingBlockSettingsId(null)}
+                    html={editingBlockSettings.content}
+                    css={editingBlockSettings.css}
+                    onHtmlCommit={(value) => patchBlock(editingBlockSettings.id, {content: value})}
+                    onCssChange={(value) => patchBlock(editingBlockSettings.id, {css: value})}
+                />
+            )}
+        </div>
+    );
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx
new file mode 100644
index 00000000..d7f7e62e
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/GroupedTemplatesMenuItems.tsx
@@ -0,0 +1,110 @@
+import {useState} from 'react';
+
+import {ChevronDown, ChevronRight} from '@gravity-ui/icons';
+import {Icon, Menu} from '@gravity-ui/uikit';
+
+import type {GridBlockTemplate} from '../types';
+
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+import {groupTemplatesForMenu} from './groupTemplates';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+interface GroupedTemplatesMenuItemsProps<TTemplate extends GridBlockTemplate> {
+    templates: TTemplate[];
+    filter: string;
+    emptyText: string;
+    onApply: (template: TTemplate) => void;
+}
+
+interface TemplateGroupMenuItemProps<TTemplate extends GridBlockTemplate> {
+    title: string;
+    templates: TTemplate[];
+    open: boolean;
+    onApply: (template: TTemplate) => void;
+    onToggle: (title: string) => void;
+}
+
+function TemplateGroupMenuItem<TTemplate extends GridBlockTemplate>({
+    title,
+    templates,
+    open,
+    onApply,
+    onToggle,
+}: TemplateGroupMenuItemProps<TTemplate>) {
+    return (
+        <>
+            <Menu.Item
+                className={b('templates-group-header', [stop])}
+                iconEnd={<Icon data={open ? ChevronDown : ChevronRight} />}
+                onClick={() => onToggle(title)}
+                extraProps={{'aria-expanded': open}}
+            >
+                {title}
+            </Menu.Item>
+            {open &&
+                templates.map((template) => (
+                    <Menu.Item
+                        key={template.id}
+                        className={b('templates-group-template', [stop])}
+                        onClick={() => onApply(template)}
+                    >
+                        {template.title}
+                    </Menu.Item>
+                ))}
+        </>
+    );
+}
+
+export function GroupedTemplatesMenuItems<TTemplate extends GridBlockTemplate>({
+    templates,
+    filter,
+    emptyText,
+    onApply,
+}: GroupedTemplatesMenuItemsProps<TTemplate>) {
+    const [openGroups, setOpenGroups] = useState<string[]>([]);
+    const entries = groupTemplatesForMenu(templates, filter);
+    const hasFilter = Boolean(filter.trim());
+
+    const toggleGroup = (title: string) => {
+        setOpenGroups((current) =>
+            current.includes(title)
+                ? current.filter((openTitle) => openTitle !== title)
+                : [...current, title],
+        );
+    };
+
+    if (entries.length === 0) {
+        return (
+            <Menu.Item disabled className={stop}>
+                {emptyText}
+            </Menu.Item>
+        );
+    }
+
+    return (
+        <>
+            {entries.map((entry) =>
+                entry.type === 'group' ? (
+                    <TemplateGroupMenuItem
+                        key={`group:${entry.title}`}
+                        title={entry.title}
+                        templates={entry.templates}
+                        open={hasFilter || openGroups.includes(entry.title)}
+                        onApply={onApply}
+                        onToggle={toggleGroup}
+                    />
+                ) : (
+                    <Menu.Item
+                        key={entry.template.id}
+                        className={stop}
+                        onClick={() => onApply(entry.template)}
+                    >
+                        {entry.template.title}
+                    </Menu.Item>
+                ),
+            )}
+        </>
+    );
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/NodeView.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/NodeView.tsx
new file mode 100644
index 00000000..5c904d87
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/NodeView.tsx
@@ -0,0 +1,113 @@
+import {Portal} from '@gravity-ui/uikit';
+import type {Node} from 'prosemirror-model';
+import type {EditorView, NodeView} from 'prosemirror-view';
+
+import {getReactRendererFromState} from 'src/extensions/behavior/ReactRenderer';
+import {generateEntityId, isInvalidEntityId} from 'src/utils/entity-id';
+
+import {
+    GridBlockTemplatesConsts,
+    defaultGridBlockTemplatesEntityId,
+} from '../GridBlockTemplatesSpecs/const';
+import type {GridBlockTemplatesOptions} from '../types';
+
+import {GridBlockTemplatesView} from './GridBlockTemplatesView';
+import {STOP_EVENT_CLASSNAME} from './const';
+
+export class WGridBlockTemplatesNodeView implements NodeView {
+    readonly dom: HTMLElement;
+    private node: Node;
+    private readonly view: EditorView;
+    private readonly getPos: () => number | undefined;
+    private readonly options: {templates?: GridBlockTemplatesOptions};
+    private readonly renderItem;
+
+    constructor({
+        node,
+        view,
+        getPos,
+        options,
+    }: {
+        node: Node;
+        view: EditorView;
+        getPos: () => number | undefined;
+        options: {templates?: GridBlockTemplatesOptions};
+    }) {
+        this.node = node;
+        this.dom = document.createElement('div');
+        this.dom.classList.add('grid-block-templates-container');
+        this.dom.contentEditable = 'false';
+        this.view = view;
+        this.getPos = getPos;
+        this.options = options;
+
+        this.renderItem = getReactRendererFromState(view.state).createItem(
+            'gridBlockTemplates-view',
+            this.renderGridBlockTemplates.bind(this),
+        );
+
+        this.validateEntityId();
+    }
+
+    update(node: Node) {
+        if (node.type !== this.node.type) return false;
+        this.node = node;
+        this.renderItem.rerender();
+        return true;
+    }
+
+    destroy() {
+        this.renderItem.remove();
+    }
+
+    ignoreMutation() {
+        return true;
+    }
+
+    stopEvent(e: Event) {
+        const target = e.target as Element;
+        return Boolean(target.closest?.(`.${STOP_EVENT_CLASSNAME}`));
+    }
+
+    private validateEntityId() {
+        if (
+            isInvalidEntityId({
+                node: this.node,
+                doc: this.view.state.doc,
+                defaultId: defaultGridBlockTemplatesEntityId,
+            })
+        ) {
+            const newId = generateEntityId(GridBlockTemplatesConsts.NodeName);
+            this.view.dispatch(
+                this.view.state.tr.setNodeAttribute(
+                    this.getPos()!,
+                    GridBlockTemplatesConsts.NodeAttrs.EntityId,
+                    newId,
+                ),
+            );
+        }
+    }
+
+    private onChange(attrs: Partial<Node['attrs']>) {
+        const pos = this.getPos();
+        if (pos === undefined) return;
+
+        this.view.dispatch(
+            this.view.state.tr.setNodeMarkup(pos, undefined, {...this.node.attrs, ...attrs}, []),
+        );
+    }
+
+    private renderGridBlockTemplates() {
+        return (
+            <Portal container={this.dom}>
+                <GridBlockTemplatesView
+                    node={this.node}
+                    getPos={this.getPos}
+                    view={this.view}
+                    onChange={this.onChange.bind(this)}
+                    options={this.options}
+                />
+            </Portal>
+        );
+    }
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
new file mode 100644
index 00000000..161dfa35
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/SettingsPopups.tsx
@@ -0,0 +1,123 @@
+import {useEffect, useState} from 'react';
+
+import {Popup} from '@gravity-ui/uikit';
+
+import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
+import {i18n} from 'src/i18n/grid-block-templates';
+
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+interface HtmlCssSettingsPopupProps {
+    anchor: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    html: string;
+    css: string;
+    onHtmlCommit: (value: string) => void;
+    onCssChange: (value: string) => void;
+    htmlPlaceholder: string;
+    cssPlaceholder: string;
+}
+
+const HtmlCssSettingsPopup: React.FC<HtmlCssSettingsPopupProps> = ({
+    anchor,
+    open,
+    onClose,
+    html,
+    css,
+    onHtmlCommit,
+    onCssChange,
+    htmlPlaceholder,
+    cssPlaceholder,
+}) => {
+    const [draftHtml, setDraftHtml] = useState(html);
+    const [draftCss, setDraftCss] = useState(css);
+
+    useEffect(() => {
+        setDraftHtml(html);
+        setDraftCss(css);
+    }, [css, html, open]);
+
+    const handleHtmlUpdate = (value: string) => {
+        setDraftHtml(value);
+        onHtmlCommit(value);
+    };
+
+    const commitHtml = () => {
+        onHtmlCommit(draftHtml);
+    };
+
+    const handleCssUpdate = (value: string) => {
+        setDraftCss(value);
+        onCssChange(value);
+    };
+
+    const commitCss = () => {
+        onCssChange(draftCss);
+    };
+
+    return (
+        <Popup anchorElement={anchor} open={open} onOpenChange={onClose} placement="bottom-end">
+            <div className={b('settings-editor', [stop])}>
+                <div className={b('field')}>
+                    <div className={b('field-label')}>{i18n('html')}</div>
+                    <TextArea
+                        controlProps={{className: stop, onBlur: commitHtml}}
+                        value={draftHtml}
+                        onUpdate={handleHtmlUpdate}
+                        placeholder={htmlPlaceholder}
+                        minRows={8}
+                        autoFocus
+                    />
+                </div>
+                <div className={b('field')}>
+                    <div className={b('field-label')}>{i18n('css')}</div>
+                    <TextArea
+                        controlProps={{className: stop, onBlur: commitCss}}
+                        value={draftCss}
+                        onUpdate={handleCssUpdate}
+                        placeholder={cssPlaceholder}
+                        minRows={8}
+                    />
+                </div>
+            </div>
+        </Popup>
+    );
+};
+
+export const BlockSettingsPopup: React.FC<{
+    anchor: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    html: string;
+    css: string;
+    onHtmlCommit: (value: string) => void;
+    onCssChange: (value: string) => void;
+}> = (props) => (
+    <HtmlCssSettingsPopup
+        {...props}
+        htmlPlaceholder={i18n('block_html_placeholder')}
+        cssPlaceholder={'& {\n  padding: 16px;\n  border-radius: 8px;\n}\nh3 {\n  margin: 0;\n}'}
+    />
+);
+
+export const ContainerSettingsPopup: React.FC<{
+    anchor: HTMLElement | null;
+    open: boolean;
+    onClose: () => void;
+    html: string;
+    css: string;
+    onHtmlCommit: (value: string) => void;
+    onCssChange: (value: string) => void;
+}> = (props) => (
+    <HtmlCssSettingsPopup
+        {...props}
+        htmlPlaceholder={'<div class="grid">\n  <div>Block HTML</div>\n</div>'}
+        cssPlaceholder={
+            '.grid {\n  grid-template-columns: 1fr 1fr;\n  gap: 12px;\n}\n.block-1 {\n  background: #eee;\n}'
+        }
+    />
+);
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
new file mode 100644
index 00000000..ce256940
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.scss
@@ -0,0 +1,53 @@
+.g-md-grid-block-templates {
+    &__templates {
+        width: 320px;
+        max-width: calc(100vw - 32px);
+        padding: 8px;
+    }
+
+    &__templates-editor {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+
+        .g-text-area__control {
+            font-family: var(--g-font-family-monospace);
+        }
+    }
+
+    &__templates-controls {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+    }
+
+    &__templates-search {
+        margin-bottom: 6px;
+    }
+
+    &__templates-list {
+        overflow-y: auto;
+
+        max-height: 280px;
+    }
+
+    &__templates-group-header {
+        margin: 2px 0;
+
+        font-weight: 600;
+
+        border-radius: var(--g-border-radius-xs);
+        background: var(--g-color-base-generic);
+    }
+
+    &__templates-group-template {
+        padding-inline-start: 44px;
+    }
+
+    &__templates-separator {
+        height: 1px;
+        margin: 4px 0;
+
+        background: var(--g-color-line-generic);
+    }
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
new file mode 100644
index 00000000..edb41bc4
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/TemplatesPopup.tsx
@@ -0,0 +1,151 @@
+import {useState} from 'react';
+
+import {FilePlus, TrashBin} from '@gravity-ui/icons';
+import {Button, Icon, Menu, Popup, TextInput} from '@gravity-ui/uikit';
+
+import {TextAreaFixed as TextArea} from 'src/forms/TextInput';
+import {i18n} from 'src/i18n/grid-block-templates';
+
+import {clearStoredTemplates, parseTemplates, saveTemplates} from '../templates';
+import type {GridBlockTemplate} from '../types';
+
+import {GroupedTemplatesMenuItems} from './GroupedTemplatesMenuItems';
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+
+import './TemplatesPopup.scss';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+interface TemplatesPopupProps<TTemplate extends GridBlockTemplate> {
+    anchor: HTMLElement | null;
+    open: boolean;
+    templates: TTemplate[];
+    allowAdd: boolean;
+    emptyText: string;
+    hasStoredTemplates: boolean;
+    onClose: () => void;
+    onApply: (template: TTemplate) => void;
+    onAdded: (templates: GridBlockTemplate[]) => void;
+    onCleared: (templates: GridBlockTemplate[]) => void;
+}
+
+export function TemplatesPopup<TTemplate extends GridBlockTemplate>({
+    anchor,
+    open,
+    templates,
+    allowAdd,
+    emptyText,
+    hasStoredTemplates,
+    onClose,
+    onApply,
+    onAdded,
+    onCleared,
+}: TemplatesPopupProps<TTemplate>) {
+    const [adding, setAdding] = useState(false);
+    const [input, setInput] = useState('');
+    const [filter, setFilter] = useState('');
+
+    const close = () => {
+        setAdding(false);
+        setInput('');
+        setFilter('');
+        onClose();
+    };
+
+    const handleSave = () => {
+        const parsed = parseTemplates(input);
+        if (parsed.length) onAdded(saveTemplates(parsed));
+        setInput('');
+        setAdding(false);
+    };
+
+    const handleClear = () => {
+        onCleared(clearStoredTemplates());
+        close();
+    };
+
+    return (
+        <Popup anchorElement={anchor} open={open} onOpenChange={close} placement="bottom-end">
+            <div className={b('templates', [stop])}>
+                {adding ? (
+                    <div className={b('templates-editor')}>
+                        <TextArea
+                            controlProps={{className: stop}}
+                            value={input}
+                            onUpdate={setInput}
+                            placeholder={i18n('templates_input_placeholder')}
+                            minRows={8}
+                            autoFocus
+                        />
+                        <div className={b('templates-controls')}>
+                            <Button view="flat" className={stop} onClick={() => setAdding(false)}>
+                                <span className={stop}>{i18n('cancel')}</span>
+                            </Button>
+                            <Button
+                                view="action"
+                                className={stop}
+                                disabled={!input.trim()}
+                                onClick={handleSave}
+                            >
+                                <span className={stop}>{i18n('save')}</span>
+                            </Button>
+                        </div>
+                    </div>
+                ) : (
+                    <>
+                        {templates.length > 0 && (
+                            <div className={b('templates-search')}>
+                                <TextInput
+                                    className={stop}
+                                    controlProps={{className: stop}}
+                                    size="s"
+                                    value={filter}
+                                    onUpdate={setFilter}
+                                    placeholder={i18n('search_templates')}
+                                    autoFocus
+                                />
+                            </div>
+                        )}
+                        <div className={b('templates-list', [stop])}>
+                            <Menu className={stop}>
+                                {allowAdd && (
+                                    <>
+                                        <Menu.Item
+                                            className={stop}
+                                            iconStart={<Icon data={FilePlus} />}
+                                            onClick={() => setAdding(true)}
+                                        >
+                                            {i18n('add_template')}
+                                        </Menu.Item>
+                                        <Menu.Item
+                                            className={stop}
+                                            disabled={!hasStoredTemplates}
+                                            iconStart={<Icon data={TrashBin} />}
+                                            onClick={handleClear}
+                                        >
+                                            {i18n('clear_templates')}
+                                        </Menu.Item>
+                                        <div
+                                            role="separator"
+                                            className={b('templates-separator', [stop])}
+                                        />
+                                    </>
+                                )}
+                                <GroupedTemplatesMenuItems
+                                    templates={templates}
+                                    filter={filter}
+                                    emptyText={emptyText}
+                                    onApply={(template) => {
+                                        onApply(template);
+                                        close();
+                                    }}
+                                />
+                            </Menu>
+                        </div>
+                    </>
+                )}
+            </div>
+        </Popup>
+    );
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.test.ts
new file mode 100644
index 00000000..89111411
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.test.ts
@@ -0,0 +1,71 @@
+import type {GridBlock} from '../types';
+
+import {buildContainerHtml, containerTemplateToAttrs, parseContainerHtml} from './blockUtils';
+
+const blocks: GridBlock[] = [
+    {id: 'block-a', css: '& { color: red; }', content: '<strong>First</strong>'},
+    {id: 'block-b', css: '& { color: blue; }', content: 'Second'},
+];
+
+describe('GridBlockTemplates block utils', () => {
+    describe('buildContainerHtml', () => {
+        it('builds a grid html draft from blocks', () => {
+            expect(buildContainerHtml(blocks)).toBe(
+                [
+                    '<div class="grid">',
+                    '  <div class="block-1"><strong>First</strong></div>',
+                    '  <div class="block-2">Second</div>',
+                    '</div>',
+                ].join('\n'),
+            );
+        });
+    });
+
+    describe('parseContainerHtml', () => {
+        it('rebuilds blocks and preserves existing ids and css by index', () => {
+            expect(
+                parseContainerHtml(
+                    [
+                        '<div class="grid">',
+                        '  <div style="padding:8px"><em>First</em></div>',
+                        '  <div>Second updated</div>',
+                        '</div>',
+                    ].join('\n'),
+                    blocks,
+                ),
+            ).toEqual([
+                {id: 'block-a', css: '& {\n  padding:8px;\n}', content: '<em>First</em>'},
+                {id: 'block-b', css: '& { color: blue; }', content: 'Second updated'},
+            ]);
+        });
+
+        it('clears blocks for blank html', () => {
+            expect(parseContainerHtml('   ', blocks)).toEqual([]);
+        });
+
+        it('ignores html without a grid root', () => {
+            expect(parseContainerHtml('<section><div>First</div></section>', blocks)).toBeNull();
+        });
+    });
+
+    describe('containerTemplateToAttrs', () => {
+        it('keeps existing blocks when applying a css-only container template', () => {
+            expect(
+                containerTemplateToAttrs(
+                    {
+                        id: 'theme',
+                        title: 'Theme',
+                        type: 'container',
+                        content: '<style>.grid { gap: 16px; }</style>',
+                        containerCss: '.grid { gap: 16px; }',
+                        blocks: [],
+                    },
+                    blocks,
+                ),
+            ).toEqual({
+                customCss: '.grid { gap: 16px; }',
+                blocks,
+            });
+        });
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
new file mode 100644
index 00000000..11091c94
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/blockUtils.ts
@@ -0,0 +1,105 @@
+import {blockClass, gridScopeClass, inlineToRule, scopeCss, templateCssToRules} from '../css';
+import type {
+    GridBlock,
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplate,
+    GridBlockTemplateBlock,
+} from '../types';
+
+export const createGridBlockId = () => Math.random().toString(36).slice(2, 10);
+
+export const templateToBlock = (template: GridBlockBlockTemplate): GridBlock => ({
+    id: createGridBlockId(),
+    css: templateCssToRules(template.block.css),
+    content: template.block.content,
+});
+
+export const rawTemplateBlockToBlock = (block: GridBlockTemplateBlock): GridBlock => ({
+    id: createGridBlockId(),
+    css: block.css,
+    content: block.content,
+});
+
+export const containerTemplateToAttrs = (
+    template: GridBlockContainerTemplate,
+    previousBlocks?: GridBlock[],
+) => ({
+    customCss: templateCssToRules(template.containerCss, '.grid'),
+    blocks: template.blocks.length
+        ? template.blocks.map((block) => ({
+              id: createGridBlockId(),
+              css: templateCssToRules(block.css),
+              content: block.content,
+          }))
+        : (previousBlocks ?? []),
+});
+
+export const buildScopedCss = ({
+    blocks,
+    customCss,
+    scopeClass,
+}: {
+    blocks: GridBlock[];
+    customCss: string;
+    scopeClass: string;
+}) => {
+    const rules = [
+        customCss.trim() && scopeCss(customCss, `.${scopeClass}`).trim(),
+        ...blocks.map(
+            (block, i) =>
+                block.css.trim() && scopeCss(block.css, `.${scopeClass} .${blockClass(i)}`).trim(),
+        ),
+    ].filter(Boolean);
+
+    return rules.join('\n');
+};
+
+export const getGridScopeClass = (entityId: string) => gridScopeClass(entityId);
+
+export const buildContainerHtml = (blocks: GridBlock[]) => {
+    const children = blocks
+        .map((block, index) => `  <div class="${blockClass(index)}">${block.content ?? ''}</div>`)
+        .join('\n');
+
+    return children ? `<div class="grid">\n${children}\n</div>` : '<div class="grid">\n</div>';
+};
+
+const parseHtml = (value: string): Document | null => {
+    if (typeof window === 'undefined' || typeof window.DOMParser === 'undefined') return null;
+
+    return new DOMParser().parseFromString(value, 'text/html');
+};
+
+const getInlineCss = (element: Element) =>
+    element instanceof HTMLElement ? (element.getAttribute('style')?.trim() ?? '') : '';
+
+export const parseContainerHtml = (
+    value: string,
+    previousBlocks: GridBlock[],
+): GridBlock[] | null => {
+    const html = value.trim();
+    if (!html) return [];
+
+    const doc = parseHtml(html);
+    const root = doc?.body.firstElementChild;
+    if (!root?.classList.contains('grid')) return null;
+
+    return Array.from(root.children).map((child, index) => {
+        const previousBlock = previousBlocks[index];
+        const inlineCss = getInlineCss(child);
+
+        return {
+            id: previousBlock?.id ?? createGridBlockId(),
+            css: inlineCss ? inlineToRule(inlineCss) : (previousBlock?.css ?? ''),
+            content: child.innerHTML.trim(),
+        };
+    });
+};
+
+export const isContainerTemplate = (
+    template: GridBlockTemplate,
+): template is GridBlockContainerTemplate => template.type === 'container';
+
+export const isBlockTemplate = (template: GridBlockTemplate): template is GridBlockBlockTemplate =>
+    template.type === 'block';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/const.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/const.ts
new file mode 100644
index 00000000..15843f72
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/const.ts
@@ -0,0 +1,4 @@
+import {cn} from 'src/classname';
+
+export const STOP_EVENT_CLASSNAME = 'prosemirror-stop-event';
+export const cnGridBlockTemplates = cn('grid-block-templates');
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.test.ts
new file mode 100644
index 00000000..9ab2064f
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.test.ts
@@ -0,0 +1,113 @@
+import type {GridBlockBlockTemplate, GridBlockContainerTemplate} from '../types';
+
+import {deriveBlockCss, getBlockTemplatesForMenu} from './derivedBlockTemplates';
+
+const blockTemplate = (content: string): GridBlockBlockTemplate => ({
+    id: 'explicit',
+    title: 'Explicit',
+    type: 'block',
+    content,
+    block: {css: '', content},
+});
+
+const containerTemplate = (
+    blocks: GridBlockContainerTemplate['blocks'],
+    containerCss = '',
+): GridBlockContainerTemplate => ({
+    id: 'container',
+    title: 'Container',
+    group: 'Group',
+    type: 'container',
+    content: '',
+    containerCss,
+    blocks,
+});
+
+describe('GridBlockTemplates derived block templates', () => {
+    it('keeps explicit templates and derives missing blocks from containers', () => {
+        expect(
+            getBlockTemplatesForMenu({
+                blockTemplates: [blockTemplate('<h2>Existing</h2>')],
+                containerTemplates: [
+                    containerTemplate([
+                        {css: '', content: '<h2>Existing</h2>'},
+                        {css: '', content: '<strong>New block</strong>'},
+                    ]),
+                ],
+            }),
+        ).toMatchObject([
+            {id: 'explicit', title: 'Explicit'},
+            {
+                id: 'container__block-2',
+                title: 'New block',
+                group: 'Group',
+                block: {content: '<strong>New block</strong>'},
+            },
+        ]);
+    });
+
+    it('uses aria-label and image alt as derived titles', () => {
+        const result = getBlockTemplatesForMenu({
+            blockTemplates: [],
+            containerTemplates: [
+                containerTemplate([
+                    {css: '', content: '<a aria-label="CTA"></a>'},
+                    {css: '', content: '<img src="x.png" alt="Preview">'},
+                    {css: '', content: '<div></div>'},
+                ]),
+            ],
+        });
+
+        expect(result.map((template) => template.title)).toEqual(['CTA', 'Preview', 'Block 3']);
+    });
+
+    it('rewrites block and shared grid selectors for standalone blocks', () => {
+        expect(
+            deriveBlockCss(
+                [
+                    '.grid { color: #111; }',
+                    '.grid * { box-sizing: border-box; }',
+                    '.block-1, .block-2 { min-width: 0; }',
+                    '.block-1 .title, .block-2 .title { margin: 0; }',
+                    '.shared { font: inherit; }',
+                ].join('\n'),
+                1,
+            ),
+        ).toBe(
+            [
+                '& {\n  color: #111;\n}',
+                '& * {\n  box-sizing: border-box;\n}',
+                '& {\n  min-width: 0;\n}',
+                '& .title {\n  margin: 0;\n}',
+                '.shared {\n  font: inherit;\n}',
+            ].join('\n\n'),
+        );
+    });
+
+    it('rewrites nested media rules recursively', () => {
+        expect(
+            deriveBlockCss(
+                [
+                    '@media (max-width: 900px) {',
+                    '  .block-2 { grid-template-columns: 1fr; }',
+                    '  .block-1 { display: none; }',
+                    '  .grid a { color: inherit; }',
+                    '}',
+                ].join('\n'),
+                2,
+            ),
+        ).toBe(
+            [
+                '@media (max-width: 900px) {',
+                '  & {',
+                '    grid-template-columns: 1fr;',
+                '  }',
+                '',
+                '  & a {',
+                '    color: inherit;',
+                '  }',
+                '}',
+            ].join('\n'),
+        );
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.ts
new file mode 100644
index 00000000..ee8221e1
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/derivedBlockTemplates.ts
@@ -0,0 +1,171 @@
+import type {
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplateBlock,
+} from '../types';
+
+const BLOCK_CLASS_RE = /\.block-\d+(?![\w-])/;
+
+const normalizeHtml = (html: string) => html.trim().replace(/>\s+</g, '><').replace(/\s+/g, ' ');
+
+const createDocument = (html: string): Document | null => {
+    if (typeof window === 'undefined' || typeof window.DOMParser === 'undefined') return null;
+
+    return new DOMParser().parseFromString(html, 'text/html');
+};
+
+const getText = (element: Element | null) => element?.textContent?.trim().replace(/\s+/g, ' ');
+
+const getDerivedTitle = (html: string, index: number) => {
+    const doc = createDocument(`<div>${html}</div>`);
+
+    if (doc) {
+        const textElement = doc.querySelector('h1, h2, h3, strong');
+        const text = getText(textElement);
+        if (text) return text;
+
+        const labelled = doc.querySelector('[aria-label]');
+        const label = labelled?.getAttribute('aria-label')?.trim();
+        if (label) return label;
+
+        const image = doc.querySelector('img[alt]');
+        const alt = image?.getAttribute('alt')?.trim();
+        if (alt) return alt;
+    }
+
+    return `Block ${index + 1}`;
+};
+
+const splitSelectorList = (selectorList: string) => {
+    const selectors: string[] = [];
+    let current = '';
+    let depth = 0;
+
+    for (const char of selectorList) {
+        if (char === '(' || char === '[') depth += 1;
+        if (char === ')' || char === ']') depth = Math.max(0, depth - 1);
+
+        if (char === ',' && depth === 0) {
+            selectors.push(current.trim());
+            current = '';
+        } else {
+            current += char;
+        }
+    }
+
+    if (current.trim()) selectors.push(current.trim());
+
+    return selectors;
+};
+
+const hasNestedRules = (body: string) => body.includes('{') && body.includes('}');
+
+const splitTopLevelRules = (css: string) => {
+    const rules: Array<{prelude: string; body: string}> = [];
+    let index = 0;
+
+    while (index < css.length) {
+        const start = css.indexOf('{', index);
+        if (start === -1) break;
+
+        const prelude = css.slice(index, start).trim();
+        let depth = 1;
+        let end = start + 1;
+
+        while (end < css.length && depth > 0) {
+            const char = css[end];
+            if (char === '{') depth += 1;
+            if (char === '}') depth -= 1;
+            end += 1;
+        }
+
+        const body = css.slice(start + 1, end - 1).trim();
+        if (prelude && body) rules.push({prelude, body});
+
+        index = end;
+    }
+
+    return rules;
+};
+
+const rewriteSelector = (selector: string, blockNumber: number) => {
+    const currentBlockRe = new RegExp(`\\.block-${blockNumber}(?![\\w-])`, 'g');
+
+    if (currentBlockRe.test(selector)) return selector.replace(currentBlockRe, '&').trim();
+    if (BLOCK_CLASS_RE.test(selector)) return null;
+
+    return selector.replace(/\.grid(?![\w-])/g, '&').trim();
+};
+
+const rewriteSelectorList = (selectorList: string, blockNumber: number) => {
+    const selectors = splitSelectorList(selectorList)
+        .map((selector) => rewriteSelector(selector, blockNumber))
+        .filter(Boolean);
+
+    return selectors.join(', ');
+};
+
+const indentCss = (css: string) =>
+    css
+        .split('\n')
+        .map((line) => (line.trim() ? `  ${line}` : line))
+        .join('\n');
+
+export const deriveBlockCss = (css: string, blockNumber: number): string => {
+    const rules = splitTopLevelRules(css);
+
+    return rules
+        .map(({prelude, body}) => {
+            if (prelude.startsWith('@')) {
+                if (/^@(?:media|supports|container)\b/.test(prelude) && hasNestedRules(body)) {
+                    const nested = deriveBlockCss(body, blockNumber);
+                    return nested ? `${prelude} {\n${indentCss(nested)}\n}` : '';
+                }
+
+                return `${prelude} {\n${indentCss(body)}\n}`;
+            }
+
+            const selectorList = rewriteSelectorList(prelude, blockNumber);
+            return selectorList ? `${selectorList} {\n${indentCss(body)}\n}` : '';
+        })
+        .filter(Boolean)
+        .join('\n\n');
+};
+
+const mergeBlockCss = (containerCss: string, block: GridBlockTemplateBlock, blockNumber: number) =>
+    [deriveBlockCss(containerCss, blockNumber), block.css.trim()].filter(Boolean).join('\n\n');
+
+export const getBlockTemplatesForMenu = ({
+    blockTemplates,
+    containerTemplates,
+}: {
+    blockTemplates: GridBlockBlockTemplate[];
+    containerTemplates: GridBlockContainerTemplate[];
+}): GridBlockBlockTemplate[] => {
+    const seenHtml = new Set(
+        blockTemplates.map((template) => normalizeHtml(template.block.content)),
+    );
+    const derivedTemplates: GridBlockBlockTemplate[] = [];
+
+    for (const template of containerTemplates) {
+        template.blocks.forEach((block, index) => {
+            const normalized = normalizeHtml(block.content);
+            if (!normalized || seenHtml.has(normalized)) return;
+
+            seenHtml.add(normalized);
+            derivedTemplates.push({
+                id: `${template.id}__block-${index + 1}`,
+                title: getDerivedTitle(block.content, index),
+                group: template.group,
+                type: 'block',
+                content: block.content,
+                block: {
+                    css: mergeBlockCss(template.containerCss, block, index + 1),
+                    content: block.content,
+                },
+            });
+        });
+    }
+
+    return [...blockTemplates, ...derivedTemplates];
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts
new file mode 100644
index 00000000..1faf88c4
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/drag.ts
@@ -0,0 +1,146 @@
+import {useEffect, useRef, useState} from 'react';
+import type {PointerEvent as ReactPointerEvent} from 'react';
+
+import type {GridBlock} from '../types';
+
+export const BLOCK_ID_ATTR = 'data-grid-block-id';
+
+export const getBlockDragAttrs = (id: string) => ({[BLOCK_ID_ATTR]: id});
+
+export type DropPlacement = 'before' | 'after';
+
+export interface DropTarget {
+    id: string;
+    placement: DropPlacement;
+}
+
+const getDropPlacement = (rect: DOMRect, clientX: number, clientY: number): DropPlacement => {
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const useHorizontalAxis = Math.abs(clientX - centerX) > Math.abs(clientY - centerY);
+
+    if (useHorizontalAxis) {
+        return clientX < centerX ? 'before' : 'after';
+    }
+
+    return clientY < centerY ? 'before' : 'after';
+};
+
+const getPointerDropTarget = (
+    {clientX, clientY}: PointerEvent,
+    draggedId: string,
+): DropTarget | null => {
+    const target = document
+        .elementFromPoint(clientX, clientY)
+        ?.closest<HTMLElement>(`[${BLOCK_ID_ATTR}]`);
+    const targetId = target?.getAttribute(BLOCK_ID_ATTR) ?? null;
+
+    if (!target || !targetId || targetId === draggedId) return null;
+
+    return {
+        id: targetId,
+        placement: getDropPlacement(target.getBoundingClientRect(), clientX, clientY),
+    };
+};
+
+const moveBlock = (
+    blocks: GridBlock[],
+    draggedId: string,
+    targetId: string,
+    placement: DropPlacement,
+) => {
+    if (draggedId === targetId) return blocks;
+
+    const dragged = blocks.find((block) => block.id === draggedId);
+    if (!dragged) return blocks;
+
+    const withoutDragged = blocks.filter((block) => block.id !== draggedId);
+    const targetIndex = withoutDragged.findIndex((block) => block.id === targetId);
+    if (targetIndex === -1) return blocks;
+
+    const insertIndex = placement === 'before' ? targetIndex : targetIndex + 1;
+    return [...withoutDragged.slice(0, insertIndex), dragged, ...withoutDragged.slice(insertIndex)];
+};
+
+export const useGridBlockDrag = ({
+    blocks,
+    onMove,
+}: {
+    blocks: GridBlock[];
+    onMove: (blocks: GridBlock[]) => void;
+}) => {
+    const [draggedBlockId, setDraggedBlockId] = useState<string | null>(null);
+    const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
+    const dragStateRef = useRef<{
+        draggedId: string;
+        target: DropTarget | null;
+    } | null>(null);
+    const cleanupDragListenersRef = useRef<(() => void) | null>(null);
+
+    const clearDragging = () => {
+        setDraggedBlockId(null);
+        setDropTarget(null);
+        dragStateRef.current = null;
+    };
+
+    const stopListening = () => {
+        cleanupDragListenersRef.current?.();
+        cleanupDragListenersRef.current = null;
+    };
+
+    const beginBlockDrag = (blockId: string, event: ReactPointerEvent<HTMLButtonElement>) => {
+        if (event.button !== 0) return;
+
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+
+        stopListening();
+
+        dragStateRef.current = {draggedId: blockId, target: null};
+        setDraggedBlockId(blockId);
+        setDropTarget(null);
+
+        const handlePointerMove = (pointerEvent: PointerEvent) => {
+            const nextTarget = getPointerDropTarget(pointerEvent, blockId);
+
+            if (dragStateRef.current) dragStateRef.current.target = nextTarget;
+            setDropTarget(nextTarget);
+        };
+
+        const handlePointerUp = () => {
+            const dragState = dragStateRef.current;
+            if (dragState?.target) {
+                onMove(
+                    moveBlock(
+                        blocks,
+                        dragState.draggedId,
+                        dragState.target.id,
+                        dragState.target.placement,
+                    ),
+                );
+            }
+            stopListening();
+            clearDragging();
+        };
+
+        const handlePointerCancel = () => {
+            stopListening();
+            clearDragging();
+        };
+
+        cleanupDragListenersRef.current = () => {
+            window.removeEventListener('pointermove', handlePointerMove);
+            window.removeEventListener('pointerup', handlePointerUp);
+            window.removeEventListener('pointercancel', handlePointerCancel);
+        };
+
+        window.addEventListener('pointermove', handlePointerMove);
+        window.addEventListener('pointerup', handlePointerUp);
+        window.addEventListener('pointercancel', handlePointerCancel);
+    };
+
+    useEffect(() => () => stopListening(), []);
+
+    return {beginBlockDrag, draggedBlockId, dropTarget};
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.test.ts
new file mode 100644
index 00000000..66d6119f
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.test.ts
@@ -0,0 +1,101 @@
+import type {GridBlockTemplate} from '../types';
+
+import {groupTemplatesForMenu} from './groupTemplates';
+
+const tpl = (id: string, title: string, group?: string): GridBlockTemplate => {
+    const template: GridBlockTemplate = {
+        id,
+        title,
+        type: 'block',
+        content: title,
+        block: {css: '', content: title},
+    };
+
+    return group ? {...template, group} : template;
+};
+
+const containerTpl = (id: string, title: string, group?: string): GridBlockTemplate => {
+    const template: GridBlockTemplate = {
+        id,
+        title,
+        type: 'container',
+        content: title,
+        containerCss: '',
+        blocks: [],
+    };
+
+    return group ? {...template, group} : template;
+};
+
+describe('groupTemplatesForMenu', () => {
+    it('keeps ungrouped templates and groups in first-seen order', () => {
+        expect(
+            groupTemplatesForMenu(
+                [
+                    tpl('a', 'A'),
+                    tpl('b', 'B1', 'Group B'),
+                    tpl('c', 'C'),
+                    tpl('d', 'B2', 'Group B'),
+                    tpl('e', 'E1', 'Group E'),
+                ],
+                '',
+            ),
+        ).toEqual([
+            {type: 'template', template: tpl('a', 'A')},
+            {
+                type: 'group',
+                title: 'Group B',
+                templates: [tpl('b', 'B1', 'Group B'), tpl('d', 'B2', 'Group B')],
+            },
+            {type: 'template', template: tpl('c', 'C')},
+            {type: 'group', title: 'Group E', templates: [tpl('e', 'E1', 'Group E')]},
+        ]);
+    });
+
+    it('returns a whole group when the group title matches search', () => {
+        expect(
+            groupTemplatesForMenu(
+                [tpl('a', 'Hero', 'Marketing'), tpl('b', 'Cards', 'Marketing')],
+                'market',
+            ),
+        ).toEqual([
+            {
+                type: 'group',
+                title: 'Marketing',
+                templates: [tpl('a', 'Hero', 'Marketing'), tpl('b', 'Cards', 'Marketing')],
+            },
+        ]);
+    });
+
+    it('returns only matching templates inside a group when template titles match search', () => {
+        expect(
+            groupTemplatesForMenu(
+                [tpl('a', 'Hero', 'Marketing'), tpl('b', 'Cards', 'Marketing')],
+                'hero',
+            ),
+        ).toEqual([
+            {type: 'group', title: 'Marketing', templates: [tpl('a', 'Hero', 'Marketing')]},
+        ]);
+    });
+
+    it('groups container templates by group', () => {
+        expect(
+            groupTemplatesForMenu(
+                [
+                    containerTpl('a', 'Theme A', 'Shared styles'),
+                    containerTpl('b', 'Theme B', 'Shared styles'),
+                ],
+                '',
+            ),
+        ).toEqual([
+            {
+                type: 'group',
+                title: 'Shared styles',
+                templates: [
+                    containerTpl('a', 'Theme A', 'Shared styles'),
+                    containerTpl('b', 'Theme B', 'Shared styles'),
+                ],
+            },
+        ]);
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.ts
new file mode 100644
index 00000000..b8854666
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/groupTemplates.ts
@@ -0,0 +1,60 @@
+import type {GridBlockTemplate} from '../types';
+
+export type TemplateMenuEntry<TTemplate extends GridBlockTemplate> =
+    | {type: 'template'; template: TTemplate}
+    | {type: 'group'; title: string; templates: TTemplate[]};
+
+const getGroup = (template: GridBlockTemplate) => template.group?.trim() || null;
+
+const matches = (value: string, query: string) => value.toLowerCase().includes(query);
+
+export const groupTemplatesForMenu = <TTemplate extends GridBlockTemplate>(
+    templates: TTemplate[],
+    filter: string,
+): TemplateMenuEntry<TTemplate>[] => {
+    const grouped = new Map<string, Extract<TemplateMenuEntry<TTemplate>, {type: 'group'}>>();
+    const entries: TemplateMenuEntry<TTemplate>[] = [];
+
+    for (const template of templates) {
+        const group = getGroup(template);
+
+        if (!group) {
+            entries.push({type: 'template', template});
+            continue;
+        }
+
+        let entry = grouped.get(group);
+        if (!entry) {
+            entry = {type: 'group', title: group, templates: []};
+            grouped.set(group, entry);
+            entries.push(entry);
+        }
+        entry.templates.push(template);
+    }
+
+    const query = filter.trim().toLowerCase();
+    if (!query) return entries;
+
+    const filteredEntries: TemplateMenuEntry<TTemplate>[] = [];
+
+    for (const entry of entries) {
+        if (entry.type === 'template') {
+            if (matches(entry.template.title, query)) filteredEntries.push(entry);
+            continue;
+        }
+
+        if (matches(entry.title, query)) {
+            filteredEntries.push(entry);
+            continue;
+        }
+
+        const templatesByTitle = entry.templates.filter((template) =>
+            matches(template.title, query),
+        );
+        if (templatesByTitle.length) {
+            filteredEntries.push({type: 'group', title: entry.title, templates: templatesByTitle});
+        }
+    }
+
+    return filteredEntries;
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/index.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/index.ts
new file mode 100644
index 00000000..6aa6b9d0
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/index.ts
@@ -0,0 +1 @@
+export {WGridBlockTemplatesNodeView} from './NodeView';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.test.ts
new file mode 100644
index 00000000..93636ca0
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.test.ts
@@ -0,0 +1,121 @@
+import {openInlineImageSrcEditor, openInlineLinkEditor, openInlineTextEditor} from './textEditing';
+
+const keydown = (target: HTMLElement, key: string) => {
+    target.dispatchEvent(new KeyboardEvent('keydown', {key, bubbles: true}));
+};
+
+describe('GridBlockTemplates inline editing', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '';
+    });
+
+    it('commits text changes on Enter', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<p>Hello</p>';
+        document.body.append(root);
+
+        const textNode = root.querySelector('p')?.firstChild as Text;
+        const onCommit = jest.fn();
+
+        expect(openInlineTextEditor({root, textNode, onCommit})).toBe(true);
+
+        const editor = root.querySelector('textarea') as HTMLTextAreaElement;
+        editor.value = 'Updated';
+        keydown(editor, 'Enter');
+
+        expect(root.innerHTML).toBe('<p>Updated</p>');
+        expect(onCommit).toHaveBeenCalledWith('<p>Updated</p>');
+    });
+
+    it('cancels text changes on Escape', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<p>Hello</p>';
+        document.body.append(root);
+
+        const textNode = root.querySelector('p')?.firstChild as Text;
+        const onCommit = jest.fn();
+
+        openInlineTextEditor({root, textNode, onCommit});
+
+        const editor = root.querySelector('textarea') as HTMLTextAreaElement;
+        editor.value = 'Updated';
+        keydown(editor, 'Escape');
+
+        expect(root.innerHTML).toBe('<p>Hello</p>');
+        expect(onCommit).not.toHaveBeenCalled();
+    });
+
+    it('commits image src changes and preserves other attributes', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<img src="before.png" alt="Preview" class="hero">';
+        document.body.append(root);
+
+        const image = root.querySelector('img') as HTMLImageElement;
+        const onCommit = jest.fn();
+
+        expect(openInlineImageSrcEditor({root, image, onCommit})).toBe(true);
+
+        const editor = root.querySelector('input') as HTMLInputElement;
+        editor.value = 'after.png';
+        keydown(editor, 'Enter');
+
+        expect(root.innerHTML).toBe('<img src="after.png" alt="Preview" class="hero">');
+        expect(onCommit).toHaveBeenCalledWith('<img src="after.png" alt="Preview" class="hero">');
+    });
+
+    it('cancels image src changes on Escape', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<img src="before.png" alt="Preview">';
+        document.body.append(root);
+
+        const image = root.querySelector('img') as HTMLImageElement;
+        const onCommit = jest.fn();
+
+        openInlineImageSrcEditor({root, image, onCommit});
+
+        const editor = root.querySelector('input') as HTMLInputElement;
+        editor.value = 'after.png';
+        keydown(editor, 'Escape');
+
+        expect(root.innerHTML).toBe('<img src="before.png" alt="Preview">');
+        expect(onCommit).not.toHaveBeenCalled();
+    });
+
+    it('commits link text and href changes and preserves other attributes', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<a href="before.html" class="action">Before</a>';
+        document.body.append(root);
+
+        const link = root.querySelector('a') as HTMLAnchorElement;
+        const onCommit = jest.fn();
+
+        expect(openInlineLinkEditor({root, link, onCommit})).toBe(true);
+
+        const [textInput, hrefInput] = Array.from(root.querySelectorAll('input'));
+        textInput.value = 'After';
+        hrefInput.value = 'after.html';
+        keydown(hrefInput, 'Enter');
+
+        expect(root.innerHTML).toBe('<a href="after.html" class="action">After</a>');
+        expect(onCommit).toHaveBeenCalledWith('<a href="after.html" class="action">After</a>');
+    });
+
+    it('cancels link changes on Escape', () => {
+        const root = document.createElement('div');
+        root.innerHTML = '<a href="before.html">Before</a>';
+        document.body.append(root);
+
+        const link = root.querySelector('a') as HTMLAnchorElement;
+        const onCommit = jest.fn();
+
+        openInlineLinkEditor({root, link, onCommit});
+
+        const [textInput, hrefInput] = Array.from(root.querySelectorAll('input'));
+        textInput.value = 'After';
+        hrefInput.value = 'after.html';
+        keydown(textInput, 'Escape');
+
+        expect(root.innerHTML).toBe('<a href="before.html">Before</a>');
+        expect(onCommit).not.toHaveBeenCalled();
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
new file mode 100644
index 00000000..4f76ff64
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesNodeView/textEditing.ts
@@ -0,0 +1,292 @@
+import {i18n} from 'src/i18n/grid-block-templates';
+
+import {STOP_EVENT_CLASSNAME, cnGridBlockTemplates} from './const';
+
+const b = cnGridBlockTemplates;
+const stop = STOP_EVENT_CLASSNAME;
+
+const INLINE_TEXT_EDITOR_ATTR = 'data-grid-block-inline-text-editor';
+const INLINE_TEXT_EDITOR_SELECTOR = `[${INLINE_TEXT_EDITOR_ATTR}="true"]`;
+
+interface InlineTextEditorOptions {
+    root: HTMLElement;
+    event?: Pick<MouseEvent, 'clientX' | 'clientY'>;
+    textNodeIndex?: number;
+    textNode?: Text;
+    onCommit: (html: string) => void;
+}
+
+export const getTextNodes = (root: HTMLElement) => {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+        acceptNode(node) {
+            return node.nodeValue?.trim() ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;
+        },
+    });
+    const textNodes: Text[] = [];
+
+    while (walker.nextNode()) {
+        textNodes.push(walker.currentNode as Text);
+    }
+
+    return textNodes;
+};
+
+export const getRangeFromPoint = (clientX: number, clientY: number) => {
+    const doc = document as Document & {
+        caretRangeFromPoint?: (x: number, y: number) => Range | null;
+        caretPositionFromPoint?: (
+            x: number,
+            y: number,
+        ) => {offsetNode: Node; offset: number} | null;
+    };
+
+    const range = doc.caretRangeFromPoint?.(clientX, clientY);
+    if (range) return range;
+
+    const position = doc.caretPositionFromPoint?.(clientX, clientY);
+    if (!position) return null;
+
+    const nextRange = document.createRange();
+    nextRange.setStart(position.offsetNode, position.offset);
+    return nextRange;
+};
+
+export const getTextNodeFromEvent = (
+    root: HTMLElement,
+    event: Pick<MouseEvent, 'clientX' | 'clientY'>,
+) => {
+    const range = getRangeFromPoint(event.clientX, event.clientY);
+    const node = range?.startContainer;
+
+    if (node?.nodeType === Node.TEXT_NODE && root.contains(node)) return node as Text;
+
+    return null;
+};
+
+function openTextNodeEditor({
+    root,
+    textNode,
+    textNodeIndex,
+    onCommit,
+}: InlineTextEditorOptions & {textNode: Text; textNodeIndex: number}) {
+    root.querySelector(INLINE_TEXT_EDITOR_SELECTOR)?.remove();
+
+    const originalValue = textNode.nodeValue ?? '';
+    const textarea = document.createElement('textarea');
+    textarea.setAttribute(INLINE_TEXT_EDITOR_ATTR, 'true');
+    textarea.className = `${b('inline-text-editor')} ${stop}`;
+    textarea.value = originalValue;
+    textarea.rows = 1;
+
+    let finished = false;
+
+    const commit = () => {
+        if (finished) return;
+        finished = true;
+        textarea.replaceWith(document.createTextNode(textarea.value));
+        onCommit(root.innerHTML);
+    };
+
+    const cancel = () => {
+        if (finished) return;
+        finished = true;
+        textarea.replaceWith(document.createTextNode(originalValue));
+    };
+
+    const navigate = (direction: 1 | -1) => {
+        const nextIndex = textNodeIndex + direction;
+
+        commit();
+
+        const hasNextTextNode = nextIndex >= 0 && nextIndex < getTextNodes(root).length;
+
+        if (hasNextTextNode) {
+            setTimeout(() => {
+                openInlineTextEditor({root, textNodeIndex: nextIndex, onCommit});
+            });
+        }
+    };
+
+    textarea.addEventListener('keydown', (event) => {
+        if (event.key === 'Tab') {
+            event.preventDefault();
+            navigate(event.shiftKey ? -1 : 1);
+            return;
+        }
+
+        if (event.key === 'Enter' && !event.shiftKey) {
+            event.preventDefault();
+            commit();
+            return;
+        }
+
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            cancel();
+        }
+    });
+    textarea.addEventListener('blur', commit);
+
+    textNode.replaceWith(textarea);
+
+    textarea.focus();
+    textarea.select();
+}
+
+export function openInlineTextEditor({
+    root,
+    event,
+    textNodeIndex,
+    textNode: directTextNode,
+    onCommit,
+}: InlineTextEditorOptions) {
+    const textNodes = getTextNodes(root);
+    const textNode =
+        directTextNode ??
+        (textNodeIndex === undefined
+            ? event && getTextNodeFromEvent(root, event)
+            : textNodes[textNodeIndex]);
+
+    if (!textNode) return false;
+
+    const index = textNodeIndex ?? textNodes.indexOf(textNode);
+    if (index === -1) return false;
+
+    openTextNodeEditor({root, event, textNodeIndex: index, textNode, onCommit});
+
+    return true;
+}
+
+export function openInlineImageSrcEditor({
+    root,
+    image,
+    onCommit,
+}: {
+    root: HTMLElement;
+    image: HTMLImageElement;
+    onCommit: (html: string) => void;
+}) {
+    root.querySelector(INLINE_TEXT_EDITOR_SELECTOR)?.remove();
+
+    const originalImage = image.cloneNode(false) as HTMLImageElement;
+    const input = document.createElement('input');
+    input.setAttribute(INLINE_TEXT_EDITOR_ATTR, 'true');
+    input.className = `${b('inline-text-editor', {src: true})} ${stop}`;
+    input.value = image.getAttribute('src') ?? '';
+
+    let finished = false;
+
+    const commit = () => {
+        if (finished) return;
+        finished = true;
+        const nextImage = originalImage.cloneNode(false) as HTMLImageElement;
+        nextImage.setAttribute('src', input.value);
+        input.replaceWith(nextImage);
+        onCommit(root.innerHTML);
+    };
+
+    const cancel = () => {
+        if (finished) return;
+        finished = true;
+        input.replaceWith(originalImage);
+    };
+
+    input.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            commit();
+            return;
+        }
+
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            cancel();
+        }
+    });
+    input.addEventListener('blur', commit);
+
+    image.replaceWith(input);
+
+    input.focus();
+    input.select();
+
+    return true;
+}
+
+export function openInlineLinkEditor({
+    root,
+    link,
+    onCommit,
+}: {
+    root: HTMLElement;
+    link: HTMLAnchorElement;
+    onCommit: (html: string) => void;
+}) {
+    root.querySelector(INLINE_TEXT_EDITOR_SELECTOR)?.remove();
+
+    const originalLink = link.cloneNode(true) as HTMLAnchorElement;
+    const wrapper = document.createElement('span');
+    wrapper.setAttribute(INLINE_TEXT_EDITOR_ATTR, 'true');
+    wrapper.className = `${b('inline-link-editor')} ${stop}`;
+
+    const textInput = document.createElement('input');
+    textInput.className = `${b('inline-link-editor-input')} ${stop}`;
+    textInput.value = link.textContent ?? '';
+    textInput.setAttribute('aria-label', i18n('edit_link_text'));
+    textInput.setAttribute('placeholder', i18n('edit_link_text'));
+
+    const hrefInput = document.createElement('input');
+    hrefInput.className = `${b('inline-link-editor-input')} ${stop}`;
+    hrefInput.value = link.getAttribute('href') ?? '';
+    hrefInput.setAttribute('aria-label', i18n('edit_link_href'));
+    hrefInput.setAttribute('placeholder', i18n('edit_link_href'));
+
+    wrapper.append(textInput, hrefInput);
+
+    let finished = false;
+
+    const commit = () => {
+        if (finished) return;
+        finished = true;
+
+        const nextLink = originalLink.cloneNode(false) as HTMLAnchorElement;
+        nextLink.textContent = textInput.value;
+        nextLink.setAttribute('href', hrefInput.value);
+
+        wrapper.replaceWith(nextLink);
+        onCommit(root.innerHTML);
+    };
+
+    const cancel = () => {
+        if (finished) return;
+        finished = true;
+        wrapper.replaceWith(originalLink);
+    };
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            commit();
+            return;
+        }
+
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            cancel();
+        }
+    };
+
+    wrapper.addEventListener('keydown', handleKeyDown);
+    wrapper.addEventListener('focusout', (event) => {
+        if (event.relatedTarget instanceof Node && wrapper.contains(event.relatedTarget)) return;
+
+        commit();
+    });
+
+    link.replaceWith(wrapper);
+
+    textInput.focus();
+    textInput.select();
+
+    return true;
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts
new file mode 100644
index 00000000..9500ab17
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/const.ts
@@ -0,0 +1,24 @@
+import {entityIdAttr} from 'src/utils/entity-id';
+import {nodeTypeFactory} from 'src/utils/schema';
+
+export enum GridBlockTemplatesAttrs {
+    // @ts-expect-error error TS18055
+    EntityId = entityIdAttr,
+    /** Array of grid blocks. */
+    blocks = 'blocks',
+    /** CSS rules with selectors, scoped to this grid instance. */
+    customCss = 'customCss',
+}
+
+export const gridBlockTemplatesNodeName = 'grid_block_templates';
+export const gridBlockTemplatesNodeType = nodeTypeFactory(gridBlockTemplatesNodeName);
+
+export const GridBlockTemplatesAction = 'createGridBlockTemplates';
+
+export const GridBlockTemplatesConsts = {
+    NodeName: gridBlockTemplatesNodeName,
+    NodeAttrs: GridBlockTemplatesAttrs,
+    nodeType: gridBlockTemplatesNodeType,
+} as const;
+
+export const defaultGridBlockTemplatesEntityId = gridBlockTemplatesNodeName + '#0';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts
new file mode 100644
index 00000000..e9d3312b
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/GridBlockTemplatesSpecs/index.ts
@@ -0,0 +1,106 @@
+import type {Node} from 'prosemirror-model';
+
+import type {ExtensionAuto, ExtensionNodeSpec} from '#core';
+
+import {blockClass, gridScopeClass, scopeCss} from '../css';
+import type {GridBlock} from '../types';
+
+import {
+    GridBlockTemplatesConsts,
+    defaultGridBlockTemplatesEntityId,
+    gridBlockTemplatesNodeName,
+} from './const';
+
+export {gridBlockTemplatesNodeName, GridBlockTemplatesConsts} from './const';
+
+export type GridBlockTemplatesSpecsOptions = {
+    nodeView?: ExtensionNodeSpec['view'];
+};
+
+const readBlocks = (node: Node): GridBlock[] => {
+    const value = node.attrs[GridBlockTemplatesConsts.NodeAttrs.blocks];
+    return Array.isArray(value) ? value : [];
+};
+
+const indent = (text: string, by = '  ') =>
+    text
+        .split('\n')
+        .map((line) => (line ? by + line : line))
+        .join('\n');
+
+/** Assembles the static HTML written into a YFM HTML block. */
+export const buildGridHtml = (node: Node): string => {
+    const customCss: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.customCss] || '';
+    const entityId: string = node.attrs[GridBlockTemplatesConsts.NodeAttrs.EntityId];
+    const scopeClass = gridScopeClass(entityId);
+    const gridBlocks = readBlocks(node);
+
+    const blocks = gridBlocks
+        .map((block, i) => indent(`<div class="${blockClass(i)}">${block.content ?? ''}</div>`))
+        .join('\n');
+
+    const rules = [
+        customCss.trim() && scopeCss(customCss, `.${scopeClass}`).trim(),
+        ...gridBlocks.map(
+            (block, i) =>
+                block.css.trim() && scopeCss(block.css, `.${scopeClass} .${blockClass(i)}`).trim(),
+        ),
+    ]
+        .filter(Boolean)
+        .join('\n');
+
+    const styleTag = rules ? `<style>\n${indent(rules.trim())}\n</style>\n` : '';
+    const grid = `<div class="grid">\n${blocks}\n</div>`;
+
+    return `<div class="${scopeClass}">\n${styleTag ? indent(styleTag.trimEnd()) + '\n' : ''}${indent(grid)}\n</div>`;
+};
+
+const GridBlockTemplatesSpecsExtension: ExtensionAuto<GridBlockTemplatesSpecsOptions> = (
+    builder,
+    {nodeView},
+) => {
+    builder.addNode(gridBlockTemplatesNodeName, () => ({
+        // The node is created via the toolbar action; no markdown token is emitted for it.
+        fromMd: {
+            tokenSpec: {name: gridBlockTemplatesNodeName, type: 'node', noCloseToken: true},
+        },
+        spec: {
+            atom: true,
+            selectable: true,
+            group: 'block',
+            attrs: {
+                [GridBlockTemplatesConsts.NodeAttrs.blocks]: {default: []},
+                [GridBlockTemplatesConsts.NodeAttrs.customCss]: {default: ''},
+                [GridBlockTemplatesConsts.NodeAttrs.EntityId]: {
+                    default: defaultGridBlockTemplatesEntityId,
+                },
+            },
+            parseDOM: [],
+            toDOM(node) {
+                return [
+                    'div',
+                    {
+                        class: 'grid-block-templates',
+                        [GridBlockTemplatesConsts.NodeAttrs.EntityId]:
+                            node.attrs[GridBlockTemplatesConsts.NodeAttrs.EntityId],
+                    },
+                ];
+            },
+            dnd: {props: {offset: [8, 1]}},
+        },
+        toMd: (state, node) => {
+            state.write('::: html');
+            state.write('\n');
+            state.write(buildGridHtml(node));
+            state.ensureNewLine();
+            state.write(':::');
+            state.closeBlock(node);
+        },
+        view: nodeView,
+    }));
+};
+
+export const GridBlockTemplatesSpecs = Object.assign(
+    GridBlockTemplatesSpecsExtension,
+    GridBlockTemplatesConsts,
+);
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/actions.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/actions.ts
new file mode 100644
index 00000000..5132843b
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/actions.ts
@@ -0,0 +1,27 @@
+import type {ActionSpec} from '#core';
+import {generateEntityId} from 'src/utils/entity-id';
+
+import {
+    GridBlockTemplatesConsts,
+    gridBlockTemplatesNodeType,
+} from './GridBlockTemplatesSpecs/const';
+
+export const addGridBlockTemplates: ActionSpec = {
+    isEnable(state) {
+        return state.selection.empty;
+    },
+    run(state, dispatch) {
+        const entityId = generateEntityId(GridBlockTemplatesConsts.NodeName);
+
+        const tr = state.tr.insert(
+            state.selection.from,
+            gridBlockTemplatesNodeType(state.schema).create({
+                [GridBlockTemplatesConsts.NodeAttrs.blocks]: [],
+                [GridBlockTemplatesConsts.NodeAttrs.customCss]: '',
+                [GridBlockTemplatesConsts.NodeAttrs.EntityId]: entityId,
+            }),
+        );
+
+        dispatch(tr);
+    },
+};
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/const.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/const.ts
new file mode 100644
index 00000000..c3cf3be8
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/const.ts
@@ -0,0 +1 @@
+export * from './GridBlockTemplatesSpecs/const';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
new file mode 100644
index 00000000..5e0719cd
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/css.ts
@@ -0,0 +1,36 @@
+export const gridScopeClass = (entityId: string) =>
+    'grid-templates-scope-' + entityId.replace(/[^a-z0-9_-]/gi, '');
+
+export const blockClass = (index: number) => `block-${index + 1}`;
+
+/** Wraps inline declarations (from a template's `style`) into a `selector { ... }` rule. */
+export const inlineToRule = (declarations: string, selector = '&'): string => {
+    const decls = declarations.trim().replace(/;?$/, ';');
+    return decls === ';' ? '' : `${selector} {\n  ${decls}\n}`;
+};
+
+export const templateCssToRules = (css: string, selector = '&'): string => {
+    const value = css.trim();
+    if (!value) return '';
+
+    return value.includes('{') ? value : inlineToRule(value, selector);
+};
+
+const scopeSelector = (selector: string, base: string) =>
+    selector.includes('&') ? selector.replace(/&/g, base) : `${base} ${selector}`;
+
+/**
+ * Prefixes every top-level selector with `base` so rules stay local. `&` in a selector
+ * is replaced with `base` itself (to target the scoped root), otherwise the selector
+ * becomes a descendant of `base`.
+ */
+export const scopeCss = (css: string, base: string): string =>
+    css.replace(/(^|\})\s*([^{}]+)\{/g, (_match, brace, selectorList) => {
+        const scoped = selectorList
+            .split(',')
+            .map((selector: string) => selector.trim())
+            .filter(Boolean)
+            .map((selector: string) => scopeSelector(selector, base))
+            .join(', ');
+        return `${brace}\n${scoped} {`;
+    });
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/index.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/index.ts
new file mode 100644
index 00000000..c3f3c71d
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/index.ts
@@ -0,0 +1,29 @@
+import type {Action, ExtensionAuto, ExtensionDeps, NodeViewConstructor} from '../../../core';
+
+import {WGridBlockTemplatesNodeView} from './GridBlockTemplatesNodeView';
+import {GridBlockTemplatesSpecs} from './GridBlockTemplatesSpecs';
+import {GridBlockTemplatesAction} from './GridBlockTemplatesSpecs/const';
+import {addGridBlockTemplates} from './actions';
+import type {GridBlockTemplatesOptions} from './types';
+
+export const GridBlockTemplates: ExtensionAuto<{
+    templates?: GridBlockTemplatesOptions;
+}> = (builder, options = {}) => {
+    builder.use(GridBlockTemplatesSpecs, {
+        nodeView: gridBlockTemplatesNodeViewFactory(options),
+    });
+    builder.addAction(GridBlockTemplatesAction, () => addGridBlockTemplates);
+};
+
+const gridBlockTemplatesNodeViewFactory: (options: {
+    templates?: GridBlockTemplatesOptions;
+}) => (deps: ExtensionDeps) => NodeViewConstructor = (options) => () => (node, view, getPos) =>
+    new WGridBlockTemplatesNodeView({node, view, getPos, options});
+
+declare global {
+    namespace WysiwygEditor {
+        interface Actions {
+            [GridBlockTemplatesAction]: Action;
+        }
+    }
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/index.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/index.ts
new file mode 100644
index 00000000..c462fdc9
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/index.ts
@@ -0,0 +1,17 @@
+export type {
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplate,
+    GridBlockTemplateBlock,
+    GridBlockTemplateType,
+    GridBlockTemplatesOptions,
+} from '../types';
+
+export {parseRawBlock, parseTemplateBlock, parseTemplates} from './parse';
+export {
+    GRID_BLOCK_TEMPLATES_STORAGE_KEY,
+    clearStoredTemplates,
+    mergeTemplatesById,
+    readStoredTemplates,
+    saveTemplates,
+} from './storage';
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
new file mode 100644
index 00000000..3f10bf1e
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.test.ts
@@ -0,0 +1,201 @@
+import {parseRawBlock, parseTemplateBlock, parseTemplates} from './parse';
+
+describe('parseRawBlock', () => {
+    it('keeps the root element verbatim instead of unwrapping it', () => {
+        expect(parseRawBlock('<div>какой-то текст</div>')).toEqual({
+            css: '',
+            content: '<div>какой-то текст</div>',
+        });
+    });
+
+    it('trims and keeps plain text', () => {
+        expect(parseRawBlock('  Plain text  ')).toEqual({
+            css: '',
+            content: 'Plain text',
+        });
+    });
+});
+
+describe('parseTemplateBlock', () => {
+    it('keeps inline style attributes in html instead of extracting them into css', () => {
+        expect(parseTemplateBlock('<div style="padding:12px"><strong>Text</strong></div>')).toEqual(
+            {
+                css: '',
+                content: '<div style="padding:12px"><strong>Text</strong></div>',
+            },
+        );
+    });
+
+    it('uses the raw value when input has no root element', () => {
+        expect(parseTemplateBlock('Plain text')).toEqual({
+            css: '',
+            content: 'Plain text',
+        });
+    });
+
+    it('extracts all style tags into css and keeps the remaining html', () => {
+        expect(
+            parseTemplateBlock(
+                '<h1>Title</h1><style>& { padding: 12px; }</style><div><strong>Text</strong></div><style>strong { color: red; }</style>',
+            ),
+        ).toEqual({
+            css: '& { padding: 12px; }\n\nstrong { color: red; }',
+            content: '<h1>Title</h1><div><strong>Text</strong></div>',
+        });
+    });
+});
+
+describe('parseTemplates', () => {
+    it('parses multiple typed templates at once', () => {
+        const result = parseTemplates(`
+            <template id="layout" title="Layout" type="container">
+                <div class="grid" style="display:grid;grid-template-columns:1fr 1fr">
+                    <div style="padding:8px"><strong>Left</strong></div>
+                    <div style="padding:10px">Right</div>
+                </div>
+            </template>
+            <template id="card" title="Card" type="block">
+                <div style="padding:12px">Card text</div>
+            </template>
+        `);
+
+        expect(result).toHaveLength(2);
+        expect(result[0]).toMatchObject({
+            id: 'layout',
+            title: 'Layout',
+            type: 'container',
+            containerCss: '',
+            blocks: [
+                {css: '', content: '<strong>Left</strong>'},
+                {css: '', content: 'Right'},
+            ],
+        });
+        expect(result[1]).toMatchObject({
+            id: 'card',
+            title: 'Card',
+            type: 'block',
+            block: {css: '', content: '<div style="padding:12px">Card text</div>'},
+        });
+    });
+
+    it('parses a container template from serialized grid html', () => {
+        const [template] = parseTemplates(`
+            <template id="grid" title="Grid" type="container">
+                <div class="grid" style="display:grid;gap:12px">
+                    <div class="block-1" style="padding:12px">First</div>
+                    <div class="block-2" style="padding:14px"><em>Second</em></div>
+                </div>
+            </template>
+        `);
+
+        expect(template).toMatchObject({
+            type: 'container',
+            containerCss: '',
+            blocks: [
+                {css: '', content: 'First'},
+                {css: '', content: '<em>Second</em>'},
+            ],
+        });
+    });
+
+    it('parses group, style tags and remaining html for a container template', () => {
+        const [template] = parseTemplates(`
+            <template id="styled-grid" title="Styled grid" type="container" group="Theme A">
+                <style>
+                    .grid { display: grid; gap: 12px; }
+                    a { color: inherit; }
+                </style>
+                <div class="grid">
+                    <div>
+                        <style>
+                            .block-1 { padding: 12px; }
+                            .block-1 strong { color: red; }
+                        </style>
+                        <strong>First</strong>
+                    </div>
+                    <div style="padding:14px">Second</div>
+                </div>
+            </template>
+        `);
+
+        expect(template).toMatchObject({
+            id: 'styled-grid',
+            title: 'Styled grid',
+            group: 'Theme A',
+            type: 'container',
+            containerCss:
+                '.grid { display: grid; gap: 12px; }\na { color: inherit; }\n\n.block-1 { padding: 12px; }\n.block-1 strong { color: red; }',
+            blocks: [
+                {
+                    css: '',
+                    content: '<strong>First</strong>',
+                },
+                {css: '', content: 'Second'},
+            ],
+        });
+    });
+
+    it('parses a css-only container template without blocks', () => {
+        const [template] = parseTemplates(`
+            <template id="theme" title="Theme" type="container">
+                <style>
+                    .grid { gap: 16px; }
+                </style>
+            </template>
+        `);
+
+        expect(template).toMatchObject({
+            id: 'theme',
+            title: 'Theme',
+            type: 'container',
+            containerCss: '.grid { gap: 16px; }',
+            blocks: [],
+        });
+    });
+
+    it('parses group, style tags and remaining html for a block template', () => {
+        const [template] = parseTemplates(`
+            <template id="card" title="Card" type="block" group="Theme A">
+                <style>
+                    & { padding: 12px; }
+                </style>
+                <strong>Card text</strong>
+            </template>
+        `);
+
+        expect(template).toMatchObject({
+            id: 'card',
+            title: 'Card',
+            group: 'Theme A',
+            type: 'block',
+            block: {css: '& { padding: 12px; }', content: '<strong>Card text</strong>'},
+        });
+    });
+
+    it('falls back to raw content for a plain block template', () => {
+        const [template] = parseTemplates(
+            '<template id="plain" title="Plain" type="block">Plain text</template>',
+        );
+
+        expect(template).toMatchObject({
+            id: 'plain',
+            title: 'Plain',
+            type: 'block',
+            block: {css: '', content: 'Plain text'},
+        });
+    });
+
+    it('ignores templates without a valid type', () => {
+        expect(
+            parseTemplates(`
+                <template id="missing"><div>Missing type</div></template>
+                <template id="unknown" type="section"><div>Unknown type</div></template>
+            `),
+        ).toEqual([]);
+    });
+
+    it('returns an empty array for blank input', () => {
+        expect(parseTemplates('   ')).toEqual([]);
+        expect(parseTemplates('')).toEqual([]);
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
new file mode 100644
index 00000000..6e92d5e7
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/parse.ts
@@ -0,0 +1,151 @@
+import {v4 as uuidv4} from 'uuid';
+
+import type {
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplate,
+    GridBlockTemplateBlock,
+    GridBlockTemplateType,
+} from '../types';
+
+const genId = () => 'grid-block-template-' + uuidv4();
+
+const isTemplateType = (value: string | null): value is GridBlockTemplateType =>
+    value === 'block' || value === 'container';
+
+const parseHtml = (value: string): Document | null => {
+    if (typeof window === 'undefined' || typeof window.DOMParser === 'undefined') return null;
+    return new DOMParser().parseFromString(value, 'text/html');
+};
+
+const joinCss = (...parts: string[]) =>
+    parts
+        .map((part) => part.trim())
+        .filter(Boolean)
+        .join('\n\n');
+
+const normalizeStyleCss = (css: string) =>
+    css
+        .split('\n')
+        .map((line) => line.trim())
+        .filter(Boolean)
+        .join('\n');
+
+const consumeElements = (elements: Element[]) => {
+    elements.forEach((element) => element.remove());
+
+    return elements;
+};
+
+const consumeStyleCss = (node: ParentNode) =>
+    joinCss(
+        ...consumeElements(Array.from(node.querySelectorAll('style'))).map((style) =>
+            normalizeStyleCss(style.textContent ?? ''),
+        ),
+    );
+
+const createTemplateFragment = (content: string): DocumentFragment | null => {
+    const doc = parseHtml(`<template>${content}</template>`);
+    const template = doc?.querySelector('template');
+
+    return typeof HTMLTemplateElement !== 'undefined' && template instanceof HTMLTemplateElement
+        ? (template.content.cloneNode(true) as DocumentFragment)
+        : null;
+};
+
+const getFragmentHtml = (fragment: DocumentFragment) => {
+    const host = document.createElement('div');
+    host.append(...Array.from(fragment.childNodes).map((node) => node.cloneNode(true)));
+
+    return host.innerHTML.trim();
+};
+
+const getTemplateParts = (content: string) => {
+    const fragment = createTemplateFragment(content);
+    if (!fragment) return {css: '', html: content};
+
+    const css = consumeStyleCss(fragment);
+    const html = getFragmentHtml(fragment);
+
+    return {css, html};
+};
+
+export const parseTemplateBlock = (content: string): GridBlockTemplateBlock => {
+    const {css, html} = getTemplateParts(content);
+
+    return {
+        css,
+        content: html,
+    };
+};
+
+/** Keeps user HTML verbatim inside the block; the block div only carries grid CSS. */
+export const parseRawBlock = (content: string): GridBlockTemplateBlock => ({
+    css: '',
+    content: content.trim(),
+});
+
+const parseContainerTemplate = (
+    id: string,
+    title: string,
+    group: string | undefined,
+    content: string,
+): GridBlockContainerTemplate => {
+    const {css, html} = getTemplateParts(content);
+    const doc = parseHtml(html);
+    const root = doc?.body.firstElementChild ?? null;
+    const children = root ? Array.from(root.children) : [];
+
+    return {
+        id,
+        title,
+        group,
+        type: 'container',
+        content,
+        containerCss: css,
+        blocks: children.map((child) => ({
+            css: '',
+            content: child.innerHTML.trim(),
+        })),
+    };
+};
+
+const parseBlockTemplate = (
+    id: string,
+    title: string,
+    group: string | undefined,
+    content: string,
+): GridBlockBlockTemplate => ({
+    id,
+    title,
+    group,
+    type: 'block',
+    content,
+    block: parseTemplateBlock(content),
+});
+
+/**
+ * Parses one or more `<template id="..." title="..." type="block|container" group="...">...</template>`
+ * blocks. Templates without a valid type are ignored.
+ */
+export function parseTemplates(input: string): GridBlockTemplate[] {
+    const value = input.trim();
+    if (!value) return [];
+
+    const doc = parseHtml(value);
+    if (!doc) return [];
+
+    return Array.from(doc.querySelectorAll('template')).flatMap((el) => {
+        const type = el.getAttribute('type')?.trim() ?? null;
+        if (!isTemplateType(type)) return [];
+
+        const id = el.getAttribute('id')?.trim() || genId();
+        const title = el.getAttribute('title')?.trim() || id;
+        const group = el.getAttribute('group')?.trim() || undefined;
+        const content = el.innerHTML.trim();
+
+        return type === 'container'
+            ? parseContainerTemplate(id, title, group, content)
+            : parseBlockTemplate(id, title, group, content);
+    });
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.test.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.test.ts
new file mode 100644
index 00000000..4f2c1dc0
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.test.ts
@@ -0,0 +1,107 @@
+import type {GridBlockTemplate} from '../types';
+
+import {
+    GRID_BLOCK_TEMPLATES_STORAGE_KEY,
+    clearStoredTemplates,
+    mergeTemplatesById,
+    readStoredTemplates,
+    saveTemplates,
+} from './storage';
+
+const blockTpl = (id: string, title = id, group?: string): GridBlockTemplate => {
+    const template: GridBlockTemplate = {
+        id,
+        title,
+        type: 'block',
+        content: `<div>${id}</div>`,
+        block: {css: 'padding:1px', content: id},
+    };
+
+    return group ? {...template, group} : template;
+};
+
+const containerTpl = (id: string, title = id, group?: string): GridBlockTemplate => {
+    const template: GridBlockTemplate = {
+        id,
+        title,
+        type: 'container',
+        content: `<div><div>${id}</div></div>`,
+        containerCss: 'display:grid',
+        blocks: [{css: 'padding:1px', content: id}],
+    };
+
+    return group ? {...template, group} : template;
+};
+
+beforeEach(() => {
+    window.localStorage.clear();
+});
+
+describe('mergeTemplatesById', () => {
+    it('keeps order and overrides duplicates with the later source', () => {
+        const result = mergeTemplatesById(
+            [blockTpl('a', 'option a'), containerTpl('b')],
+            [blockTpl('a', 'stored a')],
+        );
+
+        expect(result).toEqual([blockTpl('a', 'stored a'), containerTpl('b')]);
+    });
+});
+
+describe('readStoredTemplates', () => {
+    it('returns an empty array when nothing is stored', () => {
+        expect(readStoredTemplates()).toEqual([]);
+    });
+
+    it('ignores malformed json', () => {
+        window.localStorage.setItem(GRID_BLOCK_TEMPLATES_STORAGE_KEY, '{not json');
+        expect(readStoredTemplates()).toEqual([]);
+    });
+
+    it('filters out entries with the wrong shape', () => {
+        window.localStorage.setItem(
+            GRID_BLOCK_TEMPLATES_STORAGE_KEY,
+            JSON.stringify([
+                blockTpl('a', 'a', 'Group A'),
+                containerTpl('b', 'b', 'Group B'),
+                {id: 'missing-type', title: 'Missing type', content: '<div />'},
+                {id: 'wrong-type', title: 'Wrong type', type: 'section', content: '<div />'},
+                {id: 'bad-block', title: 'Bad block', type: 'block', content: '<div />'},
+                {
+                    id: 'bad-container',
+                    title: 'Bad container',
+                    type: 'container',
+                    content: '<div />',
+                    containerCss: '',
+                    blocks: [{css: 1, content: 'x'}],
+                },
+                {...blockTpl('bad-group'), group: 1},
+            ]),
+        );
+
+        expect(readStoredTemplates()).toEqual([
+            blockTpl('a', 'a', 'Group A'),
+            containerTpl('b', 'b', 'Group B'),
+        ]);
+    });
+});
+
+describe('saveTemplates', () => {
+    it('persists templates and merges by id across calls', () => {
+        saveTemplates([blockTpl('a', 'first')]);
+        const result = saveTemplates([blockTpl('a', 'second'), containerTpl('b')]);
+
+        expect(result).toEqual([blockTpl('a', 'second'), containerTpl('b')]);
+        expect(readStoredTemplates()).toEqual([blockTpl('a', 'second'), containerTpl('b')]);
+    });
+});
+
+describe('clearStoredTemplates', () => {
+    it('removes saved templates from localStorage', () => {
+        saveTemplates([blockTpl('a'), containerTpl('b')]);
+
+        expect(clearStoredTemplates()).toEqual([]);
+        expect(readStoredTemplates()).toEqual([]);
+        expect(window.localStorage.getItem(GRID_BLOCK_TEMPLATES_STORAGE_KEY)).toBeNull();
+    });
+});
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.ts
new file mode 100644
index 00000000..5c337bab
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/templates/storage.ts
@@ -0,0 +1,96 @@
+import type {
+    GridBlockBlockTemplate,
+    GridBlockContainerTemplate,
+    GridBlockTemplate,
+    GridBlockTemplateBlock,
+} from '../types';
+
+export const GRID_BLOCK_TEMPLATES_STORAGE_KEY = 'gravity-md-editor:grid-block-templates';
+
+const isObject = (value: unknown): value is Record<string, unknown> =>
+    typeof value === 'object' && value !== null;
+
+const isTemplateBlock = (value: unknown): value is GridBlockTemplateBlock =>
+    isObject(value) && typeof value.css === 'string' && typeof value.content === 'string';
+
+const isTemplateBase = (value: unknown): value is GridBlockTemplate =>
+    isObject(value) &&
+    typeof value.id === 'string' &&
+    typeof value.title === 'string' &&
+    typeof value.content === 'string' &&
+    (value.group === undefined || typeof value.group === 'string') &&
+    (value.type === 'block' || value.type === 'container');
+
+const isBlockTemplate = (value: unknown): value is GridBlockBlockTemplate =>
+    isTemplateBase(value) && value.type === 'block' && isTemplateBlock(value.block);
+
+const isContainerTemplate = (value: unknown): value is GridBlockContainerTemplate =>
+    isTemplateBase(value) &&
+    value.type === 'container' &&
+    typeof value.containerCss === 'string' &&
+    Array.isArray(value.blocks) &&
+    value.blocks.every(isTemplateBlock);
+
+const isGridBlockTemplate = (value: unknown): value is GridBlockTemplate =>
+    isBlockTemplate(value) || isContainerTemplate(value);
+
+const getStorage = (): Storage | null => {
+    if (typeof window === 'undefined') return null;
+    try {
+        return window.localStorage;
+    } catch {
+        return null;
+    }
+};
+
+export function readStoredTemplates(): GridBlockTemplate[] {
+    const storage = getStorage();
+    if (!storage) return [];
+
+    try {
+        const raw = storage.getItem(GRID_BLOCK_TEMPLATES_STORAGE_KEY);
+        if (!raw) return [];
+        const parsed = JSON.parse(raw);
+        return Array.isArray(parsed) ? parsed.filter(isGridBlockTemplate) : [];
+    } catch {
+        return [];
+    }
+}
+
+/** Merges `next` into already stored templates by id and persists the result. */
+export function saveTemplates(next: GridBlockTemplate[]): GridBlockTemplate[] {
+    const merged = mergeTemplatesById(readStoredTemplates(), next);
+
+    const storage = getStorage();
+    if (storage) {
+        try {
+            storage.setItem(GRID_BLOCK_TEMPLATES_STORAGE_KEY, JSON.stringify(merged));
+        } catch {
+            // Storage may be full or unavailable; keep the in-memory result.
+        }
+    }
+
+    return merged;
+}
+
+export function clearStoredTemplates(): GridBlockTemplate[] {
+    const storage = getStorage();
+    if (storage) {
+        try {
+            storage.removeItem(GRID_BLOCK_TEMPLATES_STORAGE_KEY);
+        } catch {
+            // Storage may be unavailable; keep the in-memory result empty.
+        }
+    }
+
+    return [];
+}
+
+/** Later templates override earlier ones with the same id; order is preserved. */
+export function mergeTemplatesById(...sources: GridBlockTemplate[][]): GridBlockTemplate[] {
+    const byId = new Map<string, GridBlockTemplate>();
+    for (const template of sources.flat()) {
+        byId.set(template.id, template);
+    }
+    return [...byId.values()];
+}
diff --git a/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts b/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts
new file mode 100644
index 00000000..9249c9bb
--- /dev/null
+++ b/packages/editor/src/extensions/additional/GridBlockTemplates/types.ts
@@ -0,0 +1,42 @@
+export type GridBlock = {
+    id: string;
+    /** CSS rules with selectors, scoped to this block. `&` targets the block root. */
+    css: string;
+    /** Raw HTML content rendered inside the block. */
+    content: string;
+};
+
+export type GridBlockTemplateType = 'block' | 'container';
+
+export type GridBlockTemplateBlock = Omit<GridBlock, 'id'>;
+
+interface GridBlockTemplateBase {
+    id: string;
+    title: string;
+    group?: string;
+    type: GridBlockTemplateType;
+    /** Original template inner HTML. */
+    content: string;
+}
+
+export interface GridBlockBlockTemplate extends GridBlockTemplateBase {
+    type: 'block';
+    block: GridBlockTemplateBlock;
+}
+
+export interface GridBlockContainerTemplate extends GridBlockTemplateBase {
+    type: 'container';
+    containerCss: string;
+    blocks: GridBlockTemplateBlock[];
+}
+
+export type GridBlockTemplate = GridBlockBlockTemplate | GridBlockContainerTemplate;
+
+export interface GridBlockTemplatesOptions {
+    /** Templates provided via extension options; read-only source. */
+    items?: GridBlockTemplate[];
+    /** Show the container templates button in the block toolbar. */
+    showButton?: boolean;
+    /** Show the "add template" button (writes to localStorage). */
+    allowAdd?: boolean;
+}
diff --git a/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss
index 3bb299ca..a0369b51 100644
--- a/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss
+++ b/packages/editor/src/extensions/additional/YfmHtmlBlock/YfmHtmlBlockNodeView/TemplatesPopup.scss
@@ -12,15 +12,14 @@
     &__editor {
         display: flex;
         flex-direction: column;
-
         gap: 8px;
+
         padding: 8px;
     }
 
     &__controls {
         display: flex;
         justify-content: end;
-
         gap: 8px;
     }
 }
diff --git a/packages/editor/src/i18n/grid-block-templates/en.json b/packages/editor/src/i18n/grid-block-templates/en.json
new file mode 100644
index 00000000..5a21d969
--- /dev/null
+++ b/packages/editor/src/i18n/grid-block-templates/en.json
@@ -0,0 +1,29 @@
+{
+  "add_block": "Add block",
+  "add_template": "Import",
+  "block_css": "Block {{index}} CSS",
+  "block_actions": "Block {{index}} actions",
+  "block_html_input_placeholder": "<div style=\"padding:16px;border-radius:8px;background:#f8fafc\">Block HTML</div>",
+  "block_templates_empty": "No block templates",
+  "cancel": "Cancel",
+  "clear_templates": "Clear all templates",
+  "container_templates": "Container templates",
+  "container_templates_empty": "No container templates",
+  "custom_html": "Custom HTML",
+  "css": "CSS",
+  "drag_block": "Drag block {{index}}",
+  "edit_image_src": "Edit image source",
+  "edit_link": "Edit link",
+  "edit_link_href": "URL",
+  "edit_link_text": "Text",
+  "edit_text": "Edit text",
+  "grid_css": "Grid CSS",
+  "html": "HTML",
+  "block_html_placeholder": "<button type=\"button\">Button text</button>",
+  "insert": "Insert",
+  "remove_grid": "Remove grid",
+  "remove_block": "Delete block",
+  "save": "Save",
+  "search_templates": "Search by name",
+  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\" group=\"Marketing\">\n  <style>\n    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n  </style>\n  <div class=\"grid\">\n    <div>Left</div>\n    <div>Right</div>\n  </div>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\" group=\"Marketing\">\n  <style>\n    & { padding: 16px; border-radius: 8px; background: #f8fafc; }\n  </style>\n  <div>Card text</div>\n</template>"
+}
diff --git a/packages/editor/src/i18n/grid-block-templates/index.ts b/packages/editor/src/i18n/grid-block-templates/index.ts
new file mode 100644
index 00000000..f6f82374
--- /dev/null
+++ b/packages/editor/src/i18n/grid-block-templates/index.ts
@@ -0,0 +1,8 @@
+import {registerKeyset} from '../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const KEYSET = 'grid-block-templates';
+
+export const i18n = registerKeyset(KEYSET, {en, ru});
diff --git a/packages/editor/src/i18n/grid-block-templates/ru.json b/packages/editor/src/i18n/grid-block-templates/ru.json
new file mode 100644
index 00000000..d4b25801
--- /dev/null
+++ b/packages/editor/src/i18n/grid-block-templates/ru.json
@@ -0,0 +1,29 @@
+{
+  "add_block": "Добавить блок",
+  "add_template": "Импорт",
+  "block_css": "CSS блока {{index}}",
+  "block_actions": "Действия блока {{index}}",
+  "block_html_input_placeholder": "<div style=\"padding:16px;border-radius:8px;background:#f8fafc\">HTML блока</div>",
+  "block_templates_empty": "Нет шаблонов блоков",
+  "cancel": "Отмена",
+  "clear_templates": "Очистить все шаблоны",
+  "container_templates": "Шаблоны контейнеров",
+  "container_templates_empty": "Нет шаблонов контейнеров",
+  "custom_html": "Свой HTML",
+  "css": "CSS",
+  "drag_block": "Перетащить блок {{index}}",
+  "edit_image_src": "Изменить ссылку картинки",
+  "edit_link": "Изменить ссылку",
+  "edit_link_href": "URL",
+  "edit_link_text": "Текст",
+  "edit_text": "Изменить текст",
+  "grid_css": "CSS сетки",
+  "html": "HTML",
+  "block_html_placeholder": "<button type=\"button\">Текст кнопки</button>",
+  "insert": "Вставить",
+  "remove_grid": "Удалить сетку",
+  "remove_block": "Удалить блок",
+  "save": "Сохранить",
+  "search_templates": "Поиск по названию",
+  "templates_input_placeholder": "<template id=\"hero\" title=\"Hero\" type=\"container\" group=\"Marketing\">\n  <style>\n    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }\n  </style>\n  <div class=\"grid\">\n    <div>Left</div>\n    <div>Right</div>\n  </div>\n</template>\n\n<template id=\"card\" title=\"Card\" type=\"block\" group=\"Marketing\">\n  <style>\n    & { padding: 16px; border-radius: 8px; background: #f8fafc; }\n  </style>\n  <div>Card text</div>\n</template>"
+}