Use multiple Frameworks on Storybook

[fabianmieller]

Hello, are any updates to the Issue: #1704 ?

I would like to use the React and Vue Framework on the Storybook.

Thanks. Fabian

[tmeasday]

I think this is basically the same ask as using the one manager for multiple preview iframes also (even if they are all using the same framework), which is useful for users using a monorepo too.

@ndelangen and I spoke briefly about this; I suspect it might come out in the wash with the changes made to support documentation mode, but I am not sure.

[ndelangen]

More likely after, but I might do it in between too if an easy implementation comes to me in the shower.

Splitting Manager from Preview webpack would be step 1 Splitting previews from each other is step 2

[ndelangen]

Added to roadmap: https://storybook.canny.io/roadmap/p/add-ability-to-run-multiple-frameworks-in-1-storybook

[Hypnosphi]

What if we implement frameworks support as decorators for @storybook/html? For example, here's how @storybook/addon-react could look like: https://github.com/JetBrains/ring-ui/blob/develop-storybook/.storybook/react-decorator.js

[ndelangen]

That's a really good insight @Hypnosphi

[Downchuck]

@Hypnosphi I ended up in the same spot -- I've just got a wrapper returning React elements as DOM to the HTML DOM framework. The react plugin spits some warnings to console but it's otherwise working. I've mixed angular1 and react, and used angular2react to show components working across a single storybook.

[btecu]

Is this part of 5.2.0? I couldn't find anything about it in the release notes.

[shilman]

@btecu Nope, the issue is still work in progress

[TheEvilDev]

Same, this would be very useful, we have a design system where we vend out support for React and basic HTML via CSS, and having source code and preview widgets support that would be awesome.

Any suggestions where a change like this would need to take place? I may be able to take a stab at it.

[jrbryner]

I agree. Multi-framework support would be a great addition to this. Especially for building out enterprise design systems where multiple tech-stacks are in use.

[coderitual]

Before we get 6.0 with multi-framework support. My use case is to produce css artifacts next to the react components. Wondering if I can have only one storybook for that.

Can you guys recommend something to present react component in compiled html form in storybook?

[shilman]

@coderitual maybe this? https://github.com/UX-and-I/storybook-design-token

[dantman]

I'm eagerly awaiting Multi-Framework support.

I'm building a theme for Vega/Vega-Lite. It's a monorepo with vegaEmbed (html), react-vega (React), and Material UI (React) integrations. So I definitely await the time when I can have a single docs Storybook for the theme instead of 2-3.

[coderitual]

Thanks @shilman. It is a nice addition but it only shows variables grabbed from css/scss files.

I am trying to find a way to create components in react and the present them as a compiled html. That way people could use my css classes without react. I know I can create separate storybook just to show html but I don’t like that idea.

[shilman]

@coderitual I think people have hacked React and HTML into the same @storybook/react Storybook. Unfortunately I couldn't find the issue. @Hypnosphi @ndelangen do either of you remember?

[ndelangen]

I explored this a while ago and so did @Hypnosphi.

It's very do-able it all frameworks share loaders & plugin setting (webpack). However if they don't it's virtually impossible for us maintainers to deal with that and ensure storybook doesn't often break.

The sad truth is it's very likely for loaders to vary between frameworks.

So I personally abandoned the concept of a single storybook instance running multiple frameworks. As much as it's in our goal to build a bridge between different framework users & authors.

So I've veered into a different technical direction.

Instead of trying to load STORIES from other frameworks into 1 storybook. I'm adding a feature to storybook that it can load an entire STORYBOOK into itself.

This sub-storybook can be of any framework. This it will be possible to have 1 storybook, many frameworks.

[coderitual]

That sounds really good @ndelangen . Exactly what I need. Can I somehow track this feature?

[ndelangen]

Sure can! https://github.com/storybookjs/storybook/pull/9210

[petermikitsh]

It's possible to add Angular stories into a React storybook. Here's how.

// Button.stories.tsx
import { getAngularStory } from '../utils/AngularComponent';
import { NgButton } from '../angular/Button';

export const Button = getAngularStory({
  component: NgButton,
});

../utils/AngularComponent.tsx

```tsx import 'reflect-metadata'; import 'zone.js/dist/zone'; import 'zone.js/dist/zone-error'; import { NgModule, NgModuleRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import React, { useRef, useEffect } from 'react'; export const SELECTOR = 'app-root'; const bootstrapAngularApp = ( node: HTMLElement, AppComponentInstance, ): Promise> => { node.appendChild(document.createElement(SELECTOR)); const AppModule = NgModule({ declarations: [AppComponentInstance], imports: [BrowserModule], bootstrap: [AppComponentInstance], schemas: [CUSTOM_ELEMENTS_SCHEMA], })(class {}); return platformBrowserDynamic().bootstrapModule(AppModule); }; const AngularComponent = ({ component }: { component: any }) => { const node = useRef(); useEffect(() => { if (!node || !node.current || !component) { return; } let module; bootstrapAngularApp(node.current, component).then((m) => (module = m)); return () => { while (!module) { continue; } module.destroy(); }; }, [node, component]); return

; }; export const getAngularStory = ({ component }) => { return () => ;; }; ```

../angular/Button.tsx

```tsx import { Component } from '@angular/core'; import { action } from '@storybook/addon-actions'; import { SELECTOR } from '../utils/AngularComponent'; @Component({ selector: SELECTOR, template: ` Hello World `, }) export class NgButton { onChange = (e) => { action('click')(e); }; } ```

package.json

```json { "devDependencies": { "@angular/common": "8.2.14", "@angular/compiler": "8.2.14", "@angular/core": "8.2.14", "@angular/platform-browser": "8.2.14", "@angular/platform-browser-dynamic": "8.2.14", "reflect-metadata": "0.1.13", "zone.js": "0.10.3" } } ```

[krankur]

Does #9210 address this issue? If yes, then it looks like this feature has already been added. Correct me if I am wrong.

[shilman]

@krankur yeah #9210 should support this. however, until there are good examples of multi-framework storybooks and the workflows are well-documented, i'd like to leave this open.

[krankur]

@shilman thanks. I am working on a project that is using both angularjs and angular as we are in process of migrating. I was considering storybook for this project. A documentation for this would be very helpful.

[jakobsen9]

Is there any status update on examples and/or docs for this feature?

[shilman]

@jakobsen9 YES https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/composition/index.md

[adamchenwei]

@shilman link broken

[shilman]

https://storybook.js.org/docs/react/workflows/storybook-composition

[shilman]

Until we come up with something better, composition is the officially supported way to do multi-framework Storybook. Moving this to 7.0 unless somebody wants to work on it earlier.

[kairos2109]

@littlefengers shared a (probably easier) custom implementation of multiple Source tabs:

Perhaps in the roadmap too? @shilman

[fenilli]

@littlefengers shared a (probably easier) custom implementation of multiple Source tabs:

Perhaps in the roadmap too? @shilman

With this approach they used the controls still stays as react props, how about an option to disable/enable top level roots so we can use the toolbars & globals to toggle between certain frameworks when using composition?

[fenilli]

Would it be possible for 7.0 instead of using composition to get other running instances of storybook, to instead also be able to use a top level storybook that compiles other storybooks used in refs and embedding them in a single running instance?

If there are multiple frameworks, it could detected automatically based on the root of the config file being used and the package.json, or It could be something similar on how builders are being implemented { framework: 'react' }, and It would embed to the main storybook how to handle react components, when you use a story that is made using react ( it could know because the main.js from that file is using stories only for react ), it would use those framework handlers to show those specific addons for react, if other framework, same idea, use handlers for vue3/svelte and so on.

[vic1707]

Any updates ? I'd like to get React and SolidJs (I know it's not officially supported yet) on the same storybook

[shilman]

At this time, composition is still the way to go.

https://storybook.js.org/docs/react/sharing/storybook-composition/

The reason we're not investing more in getting multiple frameworks running in a single instance is because we get an insane number of support requests about webpack/babel configuration, and supporting multiple frameworks will increase configuration complexity.

Once we've fixed the performance and configuration issues with single-framework storybook, we might have an appetite to try to tackle this again. In the meantime, we'll continue to make composition better.

[oranmis]

@shilman Is there any update or example for how to do multiple FE frameworks with storybook and tabs like shown above?

I'm creating a design system that should support vue2 and vue3. I'm using a lerna monorepo with two components packages. one for vue2 and the other for vue3. Thanks

[herrKlein]

If you want to develop react within a storybook setup for webcomponents. You can use this decorator to render stories.

const meta = {
  title: 'react-in-wc-storybook',
  decorators: [(Story) => {
    const domNode = document.createElement('div');
    createRoot(domNode).render(<Story />);
    return domNode;
  }],
};

We have a storybook with webcomponents and react wrappers around those webcomponents. To test these wrappers we can now just render the react components within the storybook webcomponent instance.

[babipal]

const meta = {
  title: 'react-in-wc-storybook',
  decorators: [(Story) => {
    const domNode = document.createElement('div');
    createRoot(domNode).render(<Story />);
    return domNode;
  }],
};

Hi, I'm trying to do exactly this. Building components in web components, and have React wrappers of them, and want to demo them in Storybook. Do you have a full example of a story like that? For example, where is document declared? And createRoot?

[bildungsroman]

Now that version 8 is out, is there an update one this? I have a React app that is the wrapper for a Pixi canvas app, and I'd like to use Storybook with both the React app and the individual Pixi components via the pixijs/storybook framework.

[Hanawa02]

I'm also wondering if there are any updates for this. I have an Astro project where we have both Vue and React components, and would like to have both in the same storybook setup.