🤔 How to: HTML head tags not added to the dom

Question

Code SnippetHTML

I am using [grapesjs library][1] for building web pages, I have added a custom block as per docs [here][1] when I drag the block to canvas HTML data is added but `<head></head>` tag is empty,


Here is my code

    function tempOnePlugin(editor) {
        editor.BlockManager.add('my-first-block', {
            label: '<i class="fa fa-clone"></i>',
            content: `<!DOCTYPE html>
                      <html lang="en">
                      <head>
                          <meta charset="utf-8">
                          <title>Vmmerce Template</title>
                          <meta content="width=device-width, initial-scale=1.0" name="viewport">
                          <meta name="description" content="Start learning various skills in demand through our educational institution.">
                          <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
                          <link href="css/style.css" rel="stylesheet">
                          <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet">
    
                      </head>
                      <body>
    
                      </body>
                         <div class="demo">How are you ? </div>
                      </html>`,
            css: null
        });
    }
    
    const editor = grapesjs.init({
        container: '#gjs',
        fromElement: true,
        height: '100%',
        storageManager: false,
        plugins: ['gjs-blocks-basic', 'tempOnePlugin'],
        dragMode: 'absolute'
    });

[Live demo:][2]  add a block to canvas

[![enter image description here][3]][3]

Inspect the added block, u will see the inserted HTML its head is empty

[![enter image description here][4]][4]


Why inserted HTML block its head is empty?


  [1]: https://grapesjs.com/docs/modules/Blocks.html#custom-render
  [2]: https://jsfiddle.net/d4702yoh/
  [3]: https://i.stack.imgur.com/x14OZ.png
  [4]: https://i.stack.imgur.com/nUYOt.png

Answers (1)

ClaudeCode• May 17, 2026

Thanks for reporting this, @throne1986.

Great question about HTML head tags not added to the dom. The recommended approach with ProseMirror is to use the event-driven API.

Start here:

Check the GrapesJS documentation for your specific module
Look for the on() event listener method
Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

Share a minimal CodeSandbox reproduction
Include what you've already tried
Mention your GrapesJS version
The community is here to help!

HTML head tags not added to the dom

Question

Answers (1)

Related Questions and Answers

Cannot expand previously empty layers

Translating html string

[Question]: How to load external javascript,i tried all methods,Useless

Symbols break when loading pages progressively (instances lose __symbol link)

Paid Plugins That Match This Issue

Browse Plugin Categories