Any plans to support libraries other than React?

[nlfurniss]

Storybook has broad support; any plans for allowing plugins for other libraries like Vue, etc?

[tajo]

Yes, I would like to add Vue and Svelte at some point, ideally with a help from the community.

[moQuez]

What about React Native?

[tajo]

What about React Native?

Similar to Vue and Svelte (would love to have it but don't currently use it). Although I imagine it would be easier to add.

For now, the priority is to make it great for React which should later translate into other flavors too.

[jrock2004]

Would like to see EmberJS support as well. Will look at source code to see how hard it would be to add other languages

[calvinf]

One of the benefits of this repo is its focus on React and the limited bloat. While you could add support for other libraries (and more easily for things like React Native for Web), I would argue that it may run counter to the stated benefits for this library and add to the long-term maintenance costs and support challenges.

i.e., I would be really happy to see React be the focus with great support for TypeScript and MDX and leave everything else for Storybook or other future story libraries.

[tajo]

@calvinf is not wrong. I could see extracting some of the Ladle's core functionality into library (story processing/parsing, configuration, vite setup...) so other frameworks can built the UI around it. So there would be

• @ladle/core - the backend of Ladle
• @ladle/react built completely with React (including Ladle's UI), using @ladle/core
• @ladle/vue built completely with Vue (including Ladle's UI), using @ladle/core
• @ladle/svelte build completely with Svelte (including Ladle's UI), using @ladle/core

I definitely want to avoid the two apps (iframe) approach that Storybook uses since it makes the build process more complicated and it means you are always dependent on React which is not the best if you use a different framework for your components.

[kaushalyap]

@tajo Please consider supporting Solidjs too.

[pdesoyres-cc]

@tajo It would be great to support LitElement too.

[JijiyaT]

Hi Team,

Is Ladle supports Angular components currently.

We have already using storybook and thought of using ladle for better performance, But in ladle I see the stories list is loading on the right panel but not loading the story in left panel.

Is there any open issue already.

I am using Angular 13

Thanks.

[muhrizqiardi]

Support for Astro would be great too!

[yasserhennawi]

+1 for astro 🙏

[everflux]

Angular support would be really cool!

[viridia]

@calvinf is not wrong. I could see extracting some of the Ladle's core functionality into library (story processing/parsing, configuration, vite setup...) so other frameworks can built the UI around it. So there would be

• @ladle/core - the backend of Ladle
• @ladle/react built completely with React (including Ladle's UI), using @ladle/core
• @ladle/vue built completely with Vue (including Ladle's UI), using @ladle/core
• @ladle/svelte build completely with Svelte (including Ladle's UI), using @ladle/core

I definitely want to avoid the two apps (iframe) approach that Storybook uses since it makes the build process more complicated and it means you are always dependent on React which is not the best if you use a different framework for your components.

As a user of Solid.js, I'm not so concerned about having a dependency on React. I like the simplicity and speed of Ladle, and I don't like the complexity of Storybook. Unfortunately, right now Storybook is the only option available for Solid/Vite projects.

As a user, I also don't mind writing a bit of code to adapt the two world together as long as it's not a major project with a huge learning curve. I could see, for example, wrapping the component root in the React-to-Solid bridge if that's what it takes.

The biggest difficulty, however, is the difference in Vite build options. Solid.js requires using the vite-solid plugin instead of vite-react. Also, the jsx and jsxFactory options in tsconfig are different.

[tajo]

The biggest difficulty, however, is the difference in Vite build options. Solid.js requires using the vite-solid plugin instead of vite-react. Also, the jsx and jsxFactory options in tsconfig are different.

It should be pretty easy to work around those, also vite.config.js is fully accessible.

[viridia]

It should be pretty easy to work around those, also vite.config.js is fully accessible.

Beyond my skill unfortunately. I spent about a day trying to solve this, and ran into a number of problems. Biggest one is that apparently Vite always uses 'tsconfig.json' - there's no way, that I can tell, to get Vite to use an alternate tsconfig. As a result, you either set "jsx": "react-jsx", in which case your stories don't compile because they need a different jsx settings; or you set it to "jsx": "preserve", in which case ladle won't run because it needs to be set to react.

Similarly, the vite-react plugin supports an "include" option, but that only determines whether fast-refresh is enabled for those files - it doesn't affect which files get transformed. The solid plugin also lacks an "include" option, but it can be hacked by patching the 'transform' property of the plugin.

I have seriously considered writing my own storybook-like app based on Solid, but that's a lot of work - and even if I did, it wouldn't be as nice as what you've created. :)

[tajo]

Not planning to support or even maintain more frameworks. For Svelte and Vue, there's a similar Vite based project https://histoire.dev so I would recommend to try that.