{"record":{"id":"9a53a304632e658e","repo":"GrapesJS/grapesjs","slug":"container-is-required","errorCode":null,"errorMessage":"'container' is required","messagePattern":"'container' is required","errorType":"exception","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/core/src/index.ts","lineNumber":49,"sourceCode":"   * Initialize the editor with passed options\n   * @param {Object} config Configuration object\n   * @param {string|HTMLElement} config.container Selector which indicates where render the editor\n   * @param {Boolean} [config.autorender=true] If true, auto-render the content\n   * @param {Array} [config.plugins=[]] Array of plugins to execute on start\n   * @param {Object} [config.pluginsOpts={}] Custom options for plugins\n   * @param {Boolean} [config.headless=false] Init headless editor\n   * @return {Editor} Editor instance\n   * @example\n   * var editor = grapesjs.init({\n   *   container: '#myeditor',\n   *   components: '<article class=\"hello\">Hello world</article>',\n   *   style: '.hello{color: red}',\n   * })\n   */\n  init(config: EditorConfig = {}) {\n    const { headless } = config;\n    const els = config.container;\n    if (!els && !headless) throw new Error(\"'container' is required\");\n    const initConfig: InitEditorConfig = {\n      autorender: true,\n      plugins: [],\n      pluginsOpts: {},\n      ...config,\n      grapesjs: this,\n      el: headless ? undefined : isElement(els) ? els : (document.querySelector(els!) as HTMLElement),\n    };\n    const editor = new Editor(initConfig, { $ });\n    const em = editor.getModel();\n    em.initModules();\n\n    // Load plugins\n    initConfig.plugins?.forEach((pluginInput) => editor.Plugins.add(pluginInput as PluginInput));\n\n    // Execute `onLoad` on modules once all plugins are initialized.\n    // A plugin might have extended/added some custom type so this\n    // is a good point to load stuff like components, css rules, etc.","sourceCodeStart":31,"sourceCodeEnd":67,"githubUrl":"https://github.com/GrapesJS/grapesjs/blob/2bdeda85b82b8b9ceae42fd6558cbbcae5ec2d21/packages/core/src/index.ts#L31-L67","documentation":"`grapesjs.init()` requires a `container` option identifying the DOM element(s) where the editor will render, unless the editor runs in `headless` mode. Without a container and headless off, there is nowhere to mount the canvas, so init throws immediately.","triggerScenarios":"Calling `grapesjs.init({})` or `grapesjs.init(config)` without `container` and without `headless: true`; passing a selector string that resolves at init time is fine, but omitting the key entirely throws.","commonSituations":"Typos like `containers` or `el` instead of `container`; calling init before the DOM element exists; SPA rendering where the mount node isn't in the document yet; copying headless examples into regular mode.","solutions":["Pass `container: '#editor'` (selector or HTMLElement) in the config.","Set `headless: true` if you only need the editor's data model without rendering.","Ensure the mount element exists in the DOM before calling init."],"exampleFix":"// before\nconst editor = grapesjs.init({});\n// after\nconst editor = grapesjs.init({ container: '#gjs' });","handlingStrategy":"validation","validationCode":"const mountEl = document.querySelector('#gjs');\nif (!mountEl) throw new Error('Mount element #gjs not found');\nconst editor = grapesjs.init({ container: mountEl });","typeGuard":"function canInit(config) {\n  return Boolean(config && (config.headless || config.container));\n}","tryCatchPattern":"try {\n  const editor = grapesjs.init(config);\n} catch (err) {\n  if (err.message === \"'container' is required\") {\n    console.error('Pass container: \"#id\" or set headless: true');\n  } else throw err;\n}","preventionTips":["Always pass container (selector or HTMLElement) in init config","Ensure the mount node exists in the DOM before init","Use headless:true only when you intentionally skip rendering","Watch for typos: the option key is exactly `container`"],"tags":["grapesjs","missing-option","editor-init","dom"],"backgroundTag":"missing-required-option","analyzedSha":"2bdeda85b82b8b9ceae42fd6558cbbcae5ec2d21","analyzedAt":"2026-08-30T11:47:52.267Z","schemaVersion":2},"datasetVersion":"2026-08-30T13:17:10.514Z"}