Issue #6081πŸ’¬ AnsweredOpened Aug 23, 2024by MdShadabAhamad0 reactions
componentsbugquestiontypescript

Custom Component not able to visible in grapsJs/studio at first rendering

Quick answerby artf

Use the plugins when you want to extend something at the GrapesJS API level

Read full answer below ↓

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

chrome

Reproducible demo link

https://stackblitz.com/edit/vitejs-vite-4noagg?file=src%2FApp.tsx

Describe the bug

I am not able to see my custom component at the first time of my react application rendering , when i try to search it on the block section then its appeared and after searching it can be visible in block section.

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (3)

artfβ€’ Aug 25, 2024

Use the plugins when you want to extend something at the GrapesJS API level

<StudioEditor
        ref={editorRef}
        options={{
          plugins: [
            editor => addCustomComponent(editor)
          ],
          // ...
GJS Helperβ€’ May 17, 2026

The issue you're experiencing, where your custom component block isn't visible on the first render but appears after searching, is a common timing problem related to how GrapesJS initializes its UI components, specifically the Block Manager, and when your custom blocks are registered. Root Cause In...

View full discussion on GitHub β†’

Related Questions and Answers

Continue research with similar issue discussions.

Issue #4042

Icons are not loading when loading within an angular application

GrapesJS version[x] I confirm to use the latest version of GrapesJSWhat browser are you using? ChromeReproducible demo link https://stackbl...

3 answersUpdated Jan 4, 2022

Issue #4654

Custom component for text node including special characters

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v105 Reproducible demo link https:/...

3 answersUpdated Nov 3, 2022

Issue #5141

Component resets attribute values on updating traits ( first time only )

GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome Version 113.0.5672.63 Reproducible...

3 answersUpdated May 29, 2023

Issue #3939

Disabled drag and drop in preview

GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? v95Reproducible demo link https://codesandbo...

4 answersUpdated Aug 10, 2023

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins β†’
Premium option

Premium plugins ship with support, regular updates, and production-ready features β€” save days of integration work.

Browse premium plugins β†’

Related tutorials

In-depth guides on the same topic.

All tutorials β†’

Tutorial

UnStudio for GrapesJS: 4 Plugins to Build Better Visual Editors

Meet UnStudio, a new GrapesJS plugin studio with four tools, safer and better editor: Command Palette, Responsive Pack, Autosave & Restore, and Autofill

Tutorial

Claude Skill for GrapesJS: How AI Is Changing the Way We Build Visual Editors

We've released the Claude Skill for GrapesJS Development β€” a free, open-source skill that turns Claude into a developer who actually knows GrapesJS

Tutorial

Vanilla GrapesJS vs GrapesJS With Plugins: What You Actually Get Out of the Box (2026)

New to GrapesJS? See exactly what the stock editor gives you, where it falls short, and which plugins close the gaps β€” a beginner-friendly 2026 comparison

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite buildersAIDeveloper Tools