{"id":551736,"date":"2026-07-31T06:47:08","date_gmt":"2026-07-31T06:47:08","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=551736"},"modified":"2026-07-31T06:52:41","modified_gmt":"2026-07-31T06:52:41","slug":"pimcore-studio-plugin","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/","title":{"rendered":"Build a Pimcore Studio Plugin: React Nav + Screen"},"content":{"rendered":"

Pimcore 12 (Platform 2026.1) ships Studio, a React single-page app. A Pimcore Studio Plugin<\/strong> is now a React micro-frontend, not an ExtJS panel.<\/p>\n

This guide walks you through building a Pimcore Studio Plugin end to end.<\/p>\n

Our goal is simple. Add a nav item and a screen to Studio by shipping a federated React remote the host loads at runtime.<\/p>\n

The old admin panel is retired. So if you searched pimcore extjs replacement<\/em> or pimcore studio ui extend<\/em>, this post is your map.<\/p>\n

We will cover the PHP entry-point provider, the rsbuild toolchain, and the React registration. Every command, class, and config key here is real.<\/p>\n

If you are new to Pimcore setup, start with our guide to the Pimcore development environment<\/a>. It covers the base install this plugin sits on.<\/p>\n

\"pimcore-studio-plugin-studio-navitem-1\"<\/figure>\n

Why Studio Plugins Replaced ExtJS, and the Three-Part Architecture<\/h2>\n

Pimcore’s classic admin ran on ExtJS. In Platform 2026.1, that admin is removed. Studio, a React SPA, takes its place.<\/p>\n

The whole shell is built on Module Federation<\/strong>. Studio is the host. Your plugin is a federated remote container it loads and bootstraps.<\/p>\n

You no longer register ExtJS classes. You ship a React remote instead \u2014 that remote is your Pimcore Studio Plugin.<\/p>\n

A plugin has three moving parts. Learn these once and the rest is mechanical.<\/p>\n

First, a PHP seam. A WebpackEntryPointProvider<\/code> service, tagged for Studio, tells the host where your built JS manifest lives on disk.<\/p>\n

Second, the build output. rsbuild writes a federated bundle to public\/studio\/build\/<PLUGIN_NAME>\/<\/code> inside your bundle root.<\/p>\n

Third, the runtime. The host injects an exposeRemote.js<\/code> bootstrap, registers your remote, then calls your plugin object’s onInit<\/code> hook.<\/p>\n

That hook registers your nav items and widgets into the host’s dependency-injection container. Nothing lands in a database.<\/p>\n

\"pimcore-studio-plugin-architecture-1\"<\/figure>\n

Scaffold the Pimcore Studio Plugin Directory<\/h2>\n

Your frontend lives in an assets\/<\/code> directory inside the bundle. This is the source root for your Pimcore Studio Plugin.<\/p>\n

The layout is small and predictable:<\/p>\n

assets\/\n\u251c\u2500\u2500 js\/src\/\n\u2502   \u251c\u2500\u2500 main.ts        # rsbuild entry (intentionally empty)\n\u2502   \u251c\u2500\u2500 plugins.ts     # federation root export\n\u2502   \u251c\u2500\u2500 index.ts       # plugin object definition\n\u2502   \u251c\u2500\u2500 screens\/       # React screen components\n\u2502   \u2514\u2500\u2500 api\/           # fetch clients to your \/api backend\n\u251c\u2500\u2500 rsbuild.config.ts\n\u251c\u2500\u2500 tsconfig.json\n\u2514\u2500\u2500 package.json<\/pre>\n
Note that main.ts<\/code> stays empty on purpose. The real surface is the federation exposes<\/code>, not the entry file.<\/p>\n
\"pimcore-studio-plugin-bundle-tree-1\"<\/figure>\n
Pin the Studio SDK in package.json<\/h2>\n
The SDK version is the single most important line in your package.json<\/code>. Pin it to the exact host version.<\/p>\n
{\n  "dependencies": {\n    "@pimcore\/studio-ui-bundle": "2026.1.3",\n    "antd": "^5.22.0",\n    "i18next": "^23.16.8",\n    "react": "18.3.1",\n    "react-dom": "18.3.1",\n    "react-i18next": "^14.1.3",\n    "react-redux": "^9.1.2"\n  },\n  "scripts": {\n    "build": "rsbuild build",\n    "dev": "NODE_ENV=development rsbuild build --watch",\n    "type-check": "tsc --noEmit",\n    "test": "vitest run"\n  }\n}<\/pre>\n
Never use ^<\/code>, canary<\/code>, or latest<\/code> on the SDK. Version drift causes “remotes not resolved” errors or type-check failures.<\/p>\n
Verify the host version with a quick composer check. Run composer show pimcore\/studio-ui-bundle<\/code> and match the npm pin to it.<\/p>\n
The npm package is types-only. It ships .d.ts<\/code> files for TypeScript, but no runtime .js<\/code>. The real code comes from the running host.<\/p>\n
Configure rsbuild and Module Federation<\/h2>\n
The rsbuild.config.ts<\/code> file wires up Module Federation and the output path. Two constants act as the single source of truth.<\/p>\n
const PLUGIN_NAME = 'product_enrichment'\nconst BUNDLE_ASSET_NAME = 'productenrichmentagent'\n\nexport default defineConfig({\n    plugins: [\n        pluginReact(),\n        pluginModuleFederation({\n            name: PLUGIN_NAME,\n            filename: 'remoteEntry.js',\n            exposes: { '.': '.\/js\/src\/plugins.ts' },\n            remotes: {\n                '@pimcore\/studio-ui-bundle': createDynamicRemote('pimcore_studio_ui_bundle'),\n            },\n            shared: {\n                react: { singleton: true, requiredVersion: false },\n                'react-dom': { singleton: true, requiredVersion: false },\n                antd: { singleton: true, requiredVersion: false },\n                i18next: { singleton: true, requiredVersion: false },\n                'react-i18next': { singleton: true, requiredVersion: false },\n                'react-redux': { singleton: true, requiredVersion: false },\n            },\n        }),\n        pluginGenerateEntrypoints(),\n    ],\n    source: { entry: { main: '.\/js\/src\/main.ts' } },\n    output: {\n        distPath: { root: '..\/public\/studio\/build\/' + PLUGIN_NAME },\n        assetPrefix: '\/bundles\/' + BUNDLE_ASSET_NAME + '\/studio\/build\/' + PLUGIN_NAME + '\/',\n        cleanDistPath: true,\n        manifest: true,\n        filename: { js: '[name].js' },\n    },\n})<\/pre>\n
The remotes<\/code> mapping externalizes the SDK. Without it, the build fails with Package subpath '.\/app' is not defined by \"exports\"<\/code>.<\/p>\n
That distPath<\/code> escapes assets\/<\/code> into the bundle’s public\/<\/code> folder. This placement is what lets assets:install<\/code> publish it later.<\/p>\n
Your tsconfig.json<\/code> needs skipLibCheck: true<\/code>. The SDK’s type tree references many packages, and checking all of them drowns you in false positives.<\/p>\n
Register the Bundle Before You Wire Studio<\/h2>\n
None of the PHP seam matters until Symfony knows the bundle exists. Register and install it first.<\/p>\n
Add the bundle to config\/bundles.php<\/code> so the kernel loads it:<\/p>\n
Webkul\\ProductEnrichmentAgentBundle\\ProductEnrichmentAgentBundle::class => ['all' => true],<\/pre>\n
Then install it and warm the cache:<\/p>\n
bin\/console cache:clear\nbin\/console pimcore:bundle:install ProductEnrichmentAgentBundle<\/pre>\n
Skip this and the provider, services.yaml<\/code>, and controllers never load. Your nav will never appear, no matter how clean the frontend build is.<\/p>\n
Register the Entry Point in PHP<\/h2>\n
Now the PHP seam. This class tells Studio where your Pimcore Studio Plugin manifest sits on disk.<\/p>\n
namespace Webkul\\ProductEnrichmentAgentBundle\\Webpack;\n\nuse Pimcore\\Bundle\\StudioUiBundle\\Webpack\\WebpackEntryPointProviderInterface;\n\nclass WebpackEntryPointProvider implements WebpackEntryPointProviderInterface\n{\n    public function getEntryPointsJsonLocations(): array\n    {\n        return glob(__DIR__ . '\/..\/..\/public\/studio\/build\/*\/entrypoints.json') ?: [];\n    }\n\n    public function getEntryPoints(): array\n    {\n        return $this->getEntryPointsJsonLocations() === [] ? [] : ['exposeRemote'];\n    }\n\n    public function getOptionalEntryPoints(): array\n    {\n        return [];\n    }\n}<\/pre>\n
The glob()<\/code> uses a wildcard directory, so renaming the plugin never breaks the lookup. That ?: []<\/code> guard returns an empty array before your first build.<\/p>\n
Note getEntryPoints()<\/code> returns ['exposeRemote']<\/code>, not main<\/code>. That named entry is the Module Federation bootstrap the host injects.<\/p>\n
Wrap the whole class in if (interface_exists(WebpackEntryPointProviderInterface::class)) { \u2026 }<\/code>. This lets the bundle boot headless for CLI and jobs when Studio is absent.<\/p>\n
Then tag the service so the host discovers it. Add these three lines to your services.yaml<\/code>:<\/p>\n
Webkul\\ProductEnrichmentAgentBundle\\Webpack\\WebpackEntryPointProvider:\n    tags:\n        - { name: 'pimcore_studio_ui.webpack_entry_point_provider' }<\/pre>\n
The tag string is exactly pimcore_studio_ui.webpack_entry_point_provider<\/code>. No alias, no id.<\/p>\n
Write the JS Entry and the Plugin Object<\/h2>\n
The federation root is plugins.ts<\/code>. It re-exports the plugin object the host imports from '.'<\/code>.<\/p>\n
import { productEnrichmentAgentPlugin } from '.\/index'\nexport { productEnrichmentAgentPlugin }<\/pre>\n
The plugin object itself lives in index.ts<\/code>. Its onInit<\/code> hook receives the host’s container and registers everything. Start with the imports and the local types, so the snippet compiles as shown:<\/p>\n
import type { ComponentType } from 'react'\nimport type { Container } from 'inversify'\nimport { serviceIds } from '@pimcore\/studio-ui-bundle\/app'\nimport { CredentialConfig } from '.\/screens\/CredentialConfig'\nimport { ProductEnrichmentIcon, PRODUCT_ENRICHMENT_ICON } from '.\/components\/ProductEnrichmentIcon'\nimport { PE_NAV_PERMISSION } from '.\/nav\/permissions'\nimport { WIDGET_CREDENTIALS } from '.\/components\/widgetIds'\n\ninterface MainNavRegistryLike {\n    registerMainNavItem: (item: Record<string, unknown>) => void\n}\ninterface WidgetRegistryLike {\n    registerWidget: (widget: { name: string; component: ComponentType }) => void\n}<\/pre>\n
With the types in place, the plugin object is a small, declarative shape:<\/p>\n
export const productEnrichmentAgentPlugin = {\n    name: 'product-enrichment-agent',\n    priority: 70,\n\n    onInit: ({ container }: { container: Container }): void => {\n        try {\n            const mainNav = container.get<MainNavRegistryLike>(serviceIds.mainNavRegistry)\n            const widgets = container.get<WidgetRegistryLike>(serviceIds.widgetManager)\n\n            widgets.registerWidget({ name: WIDGET_CREDENTIALS, component: CredentialConfig })\n\n            mainNav.registerMainNavItem({\n                path: 'Product Enrichment',\n                label: 'Product Enrichment',\n                icon: PRODUCT_ENRICHMENT_ICON,\n                order: 9999,\n            })\n\n            mainNav.registerMainNavItem({\n                path: 'Product Enrichment\/Provider & Credential Config',\n                label: 'Provider & Credential Config',\n                icon: 'key',\n                order: 10,\n                permission: PE_NAV_PERMISSION.credentialsView,\n                id: WIDGET_CREDENTIALS,\n                widgetConfig: {\n                    type: 'tab',\n                    name: 'Provider & Credential Config',\n                    component: WIDGET_CREDENTIALS,\n                    id: WIDGET_CREDENTIALS,\n                    config: { translationKey: 'Provider & Credential Config' },\n                },\n            })\n        } catch (err) {\n            console.error('[ProductEnrichment] failed to register plugin:', err)\n        }\n    },\n\n    onStartup: (): void => {},\n}<\/pre>\n
The host hands you the container<\/code>. You resolve services with container.get(serviceIds.mainNavRegistry)<\/code> and friends.<\/p>\n
Always import IDs from serviceIds<\/code>. Never invent a string like 'MainNavRegistry'<\/code>.<\/p>\n
Register parent folders first, then leaves. A folder has no widgetConfig<\/code>; a leaf does. The leaf’s component<\/code> is a string widget name, bound separately by registerWidget<\/code>.<\/p>\n
A leaf icon:<\/code> must be an existing host icon name, or it renders blank. Built-in names like 'key'<\/code> resolve; an unknown string silently produces an empty glyph.<\/p>\n
Keep the whole body in a try\/catch<\/code> with a prefixed log. If onInit<\/code> throws, the host silently drops your entire nav, and this log is your only breadcrumb.<\/p>\n
\"pimcore-studio-plugin-studio-navitem-2\"<\/figure>\n
Build a React Screen and Mount It<\/h2>\n
A screen is a plain React component. It uses SDK components and talks to your bundle’s own \/api<\/code> backend.<\/p>\n
import React, { useCallback, useEffect, useState } from 'react'\nimport { useTranslation } from '@pimcore\/studio-ui-bundle\/app'\nimport { Content, Flex, Text, Title } from '@pimcore\/studio-ui-bundle\/components'\nimport { listProfiles, type ProfileRow } from '..\/api\/profiles'\n\nexport const Profiles = (): React.ReactElement => {\n    const { t } = useTranslation()\n    const [rows, setRows] = useState<ProfileRow[]>([])\n    const [loading, setLoading] = useState<boolean>(true)\n    const [error, setError] = useState<string | null>(null)\n\n    const reload = useCallback(async (): Promise<void> => {\n        setLoading(true); setError(null)\n        try {\n            setRows(await listProfiles())\n        } catch (e) {\n            setError(e instanceof Error ? e.message : String(e))\n        } finally {\n            setLoading(false)\n        }\n    }, [])\n\n    useEffect(() => { void reload() }, [reload])\n\n    return (\n        <Content padded loading={loading}>\n            <Flex align="center" justify="space-between">\n                <Title level={4}>{t('Enrichment Profiles')}<\/Title>\n            <\/Flex>\n            {error !== null && <Text type="danger">{error}<\/Text>}\n            {!loading && rows.length === 0 && <Text type="secondary">{t('No profiles yet.')}<\/Text>}\n        <\/Content>\n    )\n}<\/pre>\n
Import UI parts from @pimcore\/studio-ui-bundle\/components<\/code>. Never import raw antd<\/code>. The SDK wraps antd with the host’s theme and i18n.<\/p>\n
Your fetch client lives in api\/<\/code>. It carries the Studio session cookie and throws on failure.<\/p>\n
The bundle ships the matching ProfileController<\/code>, mounted at \/api\/product-enrichment-agent\/profiles<\/code>, so this endpoint is real, not assumed:<\/p>\n
export const PROFILE_BASE = '\/api\/product-enrichment-agent'\n\nasync function getJson<T>(path: string, fallback: string): Promise<T> {\n    const res = await fetch(PROFILE_BASE + path, {\n        method: 'GET',\n        credentials: 'include',\n        headers: { Accept: 'application\/json' },\n    })\n    const result = await res.json()\n    if (!result.success || result.data === undefined) {\n        throw new Error(result.error ?? fallback)\n    }\n    return result.data\n}\n\nexport async function listProfiles(): Promise<ProfileRow[]> {\n    const data = await getJson<{ profiles?: ProfileRow[] }>('\/profiles', 'Failed to load profiles.')\n    return data.profiles ?? []\n}<\/pre>\n
That credentials: 'include'<\/code> line is critical. It carries the session cookie so backend auth works. Let the screen’s try\/catch<\/code> render the error state.<\/p>\n
\"pimcore-studio-plugin-plugin-screen-1\"<\/figure>\n
The Rules-of-Hooks Trap That Hides Your Menu<\/h2>\n
This gotcha deserves its own section. It is the single most common Studio plugin killer.<\/p>\n
A hook placed after a conditional return<\/code> compiles fine under SWC. On the second render it throws Rendered more hooks than during the previous render<\/code>.<\/p>\n
The host catches that error and swallows it. Your entire menu then vanishes with no error on first paint.<\/p>\n
The fix is a rule, not a workaround. Every useState<\/code>, useEffect<\/code>, useRef<\/code>, and useMemo<\/code> must sit above any conditional return.<\/p>\n
So never write if (loading) return <Spinner\/><\/code> before your hooks. Instead, render async states as JSX and gate them with <Content loading={loading}><\/code>.<\/p>\n
Watch for identifier shadowing too. A useState<\/code> setter shadowed by a later const<\/code> binding fails silently, and state updates stop working.<\/p>\n
Build and Load Your Pimcore Studio Plugin<\/h2>\n
The build loop is a short, ordered sequence. Do the steps in order.<\/p>\n
cd assets\nnpm install\nnpm run type-check\nnpm run build\nbin\/console cache:clear\nbin\/console assets:install public --symlink --relative<\/pre>\n
The type-check<\/code> step matters because rsbuild’s SWC is more permissive than tsc<\/code>. Real type errors slip through the build otherwise.<\/p>\n
npm run build<\/code> writes to ..\/public\/studio\/build\/product_enrichment\/<\/code>. It produces entrypoints.json<\/code>, remoteEntry.js<\/code>, and the hashed JS chunks.<\/p>\n
Then assets:install<\/code> symlinks that output under public\/bundles\/productenrichmentagent\/<\/code>. Do not run it without building first; it only symlinks, it does not compile.<\/p>\n
For live work, run the watch loop with npm run dev<\/code>. It rebuilds on every source change into the same output directory.<\/p>\n
Studio must actually be served and running for the remote to load. Open the Studio URL for your install, then do a hard browser refresh.<\/p>\n
cache:clear<\/code> never touches static JS, and the browser caches remoteEntry.js<\/code> aggressively.<\/p>\n
\"pimcore-studio-plugin-build-terminal-1\"<\/figure>\n
Gotchas Every Pimcore Studio Plugin Developer Hits<\/h2>\n
A few traps recur across every Pimcore Studio Plugin<\/strong>. Learn them before they cost you an afternoon.<\/p>\n
Version pin.<\/strong> The npm SDK must equal the composer host version. Drift breaks federation at runtime or types at build.<\/p>\n
Shared singletons.<\/strong> react, react-dom, antd, i18next, react-i18next, and react-redux are all singleton: true<\/code>. That unifies hooks, theme, and the Redux store with the host.<\/p>\n
Container ownership.<\/strong> When building in Docker, pass -u \"$(id -u):$(id -g)\"<\/code> and -e HOME=\/tmp<\/code>. Otherwise root owns your node_modules<\/code> and build output.<\/p>\n
Mount the bundle root.<\/strong> The output path escapes assets\/<\/code>, so mount the whole bundle, not just assets\/<\/code>. Otherwise the host never sees the build.<\/p>\n
ACL is backend-owned.<\/strong> A frontend can(permission)<\/code> check is cosmetic. It disables a button but never blocks the API. The controller’s #[IsGranted(...)]<\/code> is the real authority.<\/p>\n
Translations are automatic.<\/strong> Use useTranslation()<\/code> and English string keys. The shared i18n singleton auto-registers new keys in the host translation admin.<\/p>\n
Icons need currentColor.<\/strong> Register a custom SVG via iconLibrary.register<\/code>. Use stroke=\"currentColor\"<\/code> so it inherits the nav’s active and inactive theme.<\/p>\n
The classic bundle is gone.<\/strong> Do not look for ExtJS hooks. In 2026.1 there is only the Studio remote path described here.<\/p>\n
Verify the Pimcore Studio Plugin Registration<\/h2>\n
Two console commands confirm your Pimcore Studio Plugin wiring before you touch the browser. Run them after cache:clear<\/code>.<\/p>\n
bin\/console debug:container --tag pimcore_studio_ui.webpack_entry_point_provider\nbin\/console lint:container<\/pre>\n
The first lists your provider under the Studio tag. If it is missing, recheck the services.yaml<\/code> tag string.<\/p>\n
The second validates the container compiles cleanly. A green result here means the PHP seam is sound.<\/p>\n
\"pimcore-studio-plugin-verify-container-1\"<\/figure>\n
Wrap-Up and Next Steps<\/h2>\n
You now have a full Pimcore Studio Plugin<\/strong> path: PHP points at the manifest, rsbuild builds the remote, and React registers a nav item and screen.<\/p>\n
The pattern scales \u2014 add more widgets, screens, and \/api<\/code> routes on the same foundation.<\/p>\n
Studio plugins also pair well with connectors. See how we ship UI for the Pimcore Magento 2 connector<\/a>, the Pimcore Shopify connector<\/a><\/p>\n
Need a custom Studio plugin or a full PIM integration built for you? Talk to the Webkul Pimcore development team<\/a> and we will help you ship it.<\/p>\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Pimcore 12 (Platform 2026.1) ships Studio, a React single-page app. A Pimcore Studio Plugin is now a React micro-frontend, not an ExtJS panel. This guide walks you through building a Pimcore Studio Plugin end to end. Our goal is simple. Add a nav item and a screen to Studio by shipping a federated React remote […]<\/a><\/p>\n","protected":false},"author":399,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[8189,1],"tags":[8201,8486,8202,7703],"class_list":["post-551736","post","type-post","status-publish","format-standard","hentry","category-pimcore","category-uncategorized","tag-pimcore","tag-pimcore-connector","tag-pimcore-pim","tag-product-information-management"],"yoast_head":"\nBuild a Pimcore Studio Plugin: React Nav + Screen<\/title>\n<meta name=\"description\" content=\"Build a Pimcore Studio Plugin for Pimcore 12 (2026.1): a React micro-frontend adding a nav item and screen, with the PHP provider and rsbuild toolchain\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Pimcore Studio Plugin: React Nav + Screen\" \/>\n<meta property=\"og:description\" content=\"Build a Pimcore Studio Plugin for Pimcore 12 (2026.1): a React micro-frontend adding a nav item and screen, with the PHP provider and rsbuild toolchain\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-31T06:47:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-31T06:52:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/07\/pimcore-studio-plugin-studio-navitem-1.webp\" \/>\n<meta name=\"author\" content=\"Nitesh Arora\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nitesh Arora\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/\"},\"author\":{\"name\":\"Nitesh Arora\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3b0c0c713bd646e411ad5b4563364bb0\"},\"headline\":\"Build a Pimcore Studio Plugin: React Nav + Screen\",\"datePublished\":\"2026-07-31T06:47:08+00:00\",\"dateModified\":\"2026-07-31T06:52:41+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/\"},\"wordCount\":1461,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/07\/pimcore-studio-plugin-studio-navitem-1.webp\",\"keywords\":[\"Pimcore\",\"Pimcore connector\",\"Pimcore PIM\",\"Product Information Management\"],\"articleSection\":[\"PimCore\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/\",\"url\":\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/\",\"name\":\"Build a Pimcore Studio Plugin: React Nav + Screen\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/07\/pimcore-studio-plugin-studio-navitem-1.webp\",\"datePublished\":\"2026-07-31T06:47:08+00:00\",\"dateModified\":\"2026-07-31T06:52:41+00:00\",\"description\":\"Build a Pimcore Studio Plugin for Pimcore 12 (2026.1): a React micro-frontend adding a nav item and screen, with the PHP provider and rsbuild toolchain\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/07\/pimcore-studio-plugin-studio-navitem-1.webp\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/07\/pimcore-studio-plugin-studio-navitem-1.webp\",\"width\":1529,\"height\":757,\"caption\":\"pimcore-studio-plugin-studio-navitem-1\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build a Pimcore Studio Plugin: React Nav + Screen\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3b0c0c713bd646e411ad5b4563364bb0\",\"name\":\"Nitesh Arora\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2628caeef979fc167146e3d99675895a39d9ca9c9105fef4b733893fd28a25f5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2628caeef979fc167146e3d99675895a39d9ca9c9105fef4b733893fd28a25f5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Nitesh Arora\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/nitesh-arora945\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Build a Pimcore Studio Plugin: React Nav + Screen","description":"Build a Pimcore Studio Plugin for Pimcore 12 (2026.1): a React micro-frontend adding a nav item and screen, with the PHP provider and rsbuild toolchain","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/","og_locale":"en_US","og_type":"article","og_title":"Build a Pimcore Studio Plugin: React Nav + Screen","og_description":"Build a Pimcore Studio Plugin for Pimcore 12 (2026.1): a React micro-frontend adding a nav item and screen, with the PHP provider and rsbuild toolchain","og_url":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2026-07-31T06:47:08+00:00","article_modified_time":"2026-07-31T06:52:41+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/07\/pimcore-studio-plugin-studio-navitem-1.webp","type":"","width":"","height":""}],"author":"Nitesh Arora","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Nitesh Arora","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/"},"author":{"name":"Nitesh Arora","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3b0c0c713bd646e411ad5b4563364bb0"},"headline":"Build a Pimcore Studio Plugin: React Nav + Screen","datePublished":"2026-07-31T06:47:08+00:00","dateModified":"2026-07-31T06:52:41+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/"},"wordCount":1461,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/07\/pimcore-studio-plugin-studio-navitem-1.webp","keywords":["Pimcore","Pimcore connector","Pimcore PIM","Product Information Management"],"articleSection":["PimCore"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/","url":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/","name":"Build a Pimcore Studio Plugin: React Nav + Screen","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2026\/07\/pimcore-studio-plugin-studio-navitem-1.webp","datePublished":"2026-07-31T06:47:08+00:00","dateModified":"2026-07-31T06:52:41+00:00","description":"Build a Pimcore Studio Plugin for Pimcore 12 (2026.1): a React micro-frontend adding a nav item and screen, with the PHP provider and rsbuild toolchain","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/07\/pimcore-studio-plugin-studio-navitem-1.webp","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2026\/07\/pimcore-studio-plugin-studio-navitem-1.webp","width":1529,"height":757,"caption":"pimcore-studio-plugin-studio-navitem-1"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/pimcore-studio-plugin\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build a Pimcore Studio Plugin: React Nav + Screen"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3b0c0c713bd646e411ad5b4563364bb0","name":"Nitesh Arora","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2628caeef979fc167146e3d99675895a39d9ca9c9105fef4b733893fd28a25f5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2628caeef979fc167146e3d99675895a39d9ca9c9105fef4b733893fd28a25f5?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Nitesh Arora"},"url":"https:\/\/webkul.com\/blog\/author\/nitesh-arora945\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/551736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/399"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=551736"}],"version-history":[{"count":14,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/551736\/revisions"}],"predecessor-version":[{"id":551769,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/551736\/revisions\/551769"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=551736"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=551736"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=551736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}