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

Introducing GJS.Market Services: ship your GrapesJS editor without the integration risk

It's everything that usually eats weeks of engineering time, scoped and priced up front. No open-ended hourly surprises.

Tutorial

GrapesJS custom components guide (2026)

Define custom GrapesJS components with DomComponents.addType: detection with isComponent, a model with traits and defaults, and a view for canvas behavior.

Tutorial

Building an AI-Assisted Document Engine with Next.js, GrapesJS, and the AI SDK

Transform your static template editor into an intelligent, generative design workspace with Vercel AI SDK, AI Elements and Next.js.

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

PresetsPluginsComponentsBlocksAssetsCommandsI18nLayersStylesStoragesRTENewslettersWeb pagesSite builders