Support for Astro components

[mgielda]

Is your feature request related to a problem? Please describe
Astro is a new framework focusing on mostly static sites. It has its own template syntax, very much like jsx.

Describe the solution you'd like
Add ability to include .astro components in your Storybook.

Are you able to assist to bring the feature to reality?
I don't believe I will have the bandwidth / ability to do that - but flagging since I assume more people may be interested.

Additional context
https://astro.build

[PeteJStewart]

I'd also love to see this! Would it be down to Storybook core team to develop this, or the Astro team / community?

[DD10654]

I was just trying out Astro, and I just realized that it does not have support for storybook, which is something I use in next.js, although I think for react components inside astro (using @astro/react) it could work

[danko-nobre]

It would be awesome to use storybook with astro pages.

[germanz]

I wonder whether v7.0 being on Vite makes it easier to integrate Astro components 🤔

[dubem-design]

I have not had any serious issues yet using Storybook with Astrojs. My observations thou

1. Install storybook using vite as a builder: npx sb init --builder @storybook/builder-vite (It will depect your framework - Vue 3)
2. Install tailwindcss Seperately: yarn add tailwindcss & postcss
3. Add this plugin: @storybook/addon-postcss
4. Include it into: /.storybook/main.js under addons
5. Import your styles into /.storybook/preview.js
6. Import Astro vue components from your /src/components folder to make stories
7. Use this: mv ./dist/design-system/assets/* ./dist/assets/ if you have trouble seeing the contents of the iframe

That's all

[markpinero]

I have not had any serious issues yet using Storybook with Astrojs. My observations thou

1. Install storybook using vite as a builder: npx sb init --builder @storybook/builder-vite (It will depect your framework - Vue 3)
2. Install tailwindcss Seperately: yarn add tailwindcss & postcss
3. Add this plugin: @storybook/addon-postcss
4. Include it into: /.storybook/main.js under addons
5. Import your styles into /.storybook/preview.js
6. Import Astro vue components from your /src/components folder to make stories
7. Use this: mv ./dist/design-system/assets/* ./dist/assets/ if you have trouble seeing the contents of the iframe

That's all

This ticket's in reference to rendering .astro components

[dubem-design]

Oh, understood. Support for .astro components would be great

[wireless25]

Is there anything happening soon regarding this topic? Somebody knows, if this is discussed among Storybook/Astro Teams?

[prodkt]

This is one of those open tickets I've checked back in on 20 time or so. Excessively you might say. It's safe to say Astro isn't going to be tossed from our bag of tools anytime soon. In fact it's quickly become the favorite faster than I've personally ever seen. Therefore I'm leaving sentiment finally with a +1 to this.

[sam-moreton]

I need this so badly!

[egriff38]

Astro uses vite and vite-node together to monitor SSR changes. Storybook works by bootstrapping the UI rendering on top of the existing storybook platform so that it can render the stories in iframes. I get the feeling that trying to bootstrap everything Astro does on top of storybook isn't a simple task, especially for a framework that's still finding its footing.

What may be possible is to leverage the UI of Storybook and bootstrap story creation through Astro itself. I actually think it would be very nice if Storybook switched its underlying rendering to Astro across the board, since Astro is already setting itself up to be the defacto framework for island architecture, which complements storybook's test-in-isolation philosophy very nicely.

[michael-andreuzza]

+1

[JReinhold]

We're collaborating closely with the Astro team on this, but it's not an easy feat. The main obstacle right now is that Astro doesn't expose a programatic way to render an Astro component, the only way to render a .astro file right now is through the Astro CLI in an Astro application.

But I know the Astro team is currently hard at work on this exact issue. It remains to be seen whether or not the first iteration of it will be compatible with Storybook's current way of rendering components - mainly that we always do client-side rendering - but it's at least a step in the right direction.

[raremiroir]

Also in deep need of this integration! +1

[peter-rosal-the-bean-counter]

Eagerly anticipating this arrival

[chasm]

Yes, please.

[tysonhummel]

Also waiting for this.

[ziriuz84]

It will be awesome!

[cashewna]

Yes please!

[Natetronn]

This would be awesome! Following...

[chanwoong528]

Hoping to be integrated with AstroJS.

[isaquedev]

Still hoping that integration can happen in the future

[gtabuada]

I would love to have this integration. Astro is currently most used web tooling, and is unlikely to go away soon.

[james2doyle]

There is an issue on the Astro repo to track the feature in Astro that would enable support for systems like Storybook.

Basically you can't just render an Astro component on its own right now. You need the entire context of the Astro system. This API would allow you to do that outside the context of an Astro "app".

[shilman]

It's definitely on our radar. We'll reach out the Astro team to try and expedite withastro/roadmap#533 once we've committed to supporting it on the Storybook side!

[westtrade]

Still waiting!)

[silveltman]

+1

[MaximSavin]

+1

[flavianh]

@shilman how can we contribute to help?

[rxlxnd]

+1 hope this can be worked out

[Ayfri]

Any update ?

[xkeshav]

this is great. is someone woking on it?
aal the way search storybook and it takes us to storyblok :D

[rburgst]

I have an astro project with preact components. I am linking in my preact components into storybook, however, the image loading within astro is different from storybook (in astro importing an svg icon produces an object with width, height, src while in storybook I just get a string with the value that is in the src in astro).

[marekbrze]

Astro finally released a way to render components in isolation ❤️🚀 hopefully it will enable moving this Storybook feature ❤️🙌

https://github.com/withastro/astro/releases/tag/astro%404.9.0

[abiriadev]

It's still in the early stages, and as far as I know, they don't support props yet (though I might be wrong).

• https://github.com/withastro/astro/blob/daae1b8735d6791b97d11ca3cfde0e0650cc1823/packages/astro/src/container/index.ts#L26-L73
• Container APIs withastro/roadmap#916

[marekbrze]

@abiriadev yup, but I am super happy that something finally started to happen in this area 🙌

[abiriadev]

@marekbrze Of course, I'm excited about this update too! However, it isn't as straightforward as it seems.

I did an experiment(repo) and realized that Storybook can't render Astro components on the client(you would probably see a "externalized for browser" warning from vite).

Perhaps the ideal renderer should use techniques similar to RSC support?

[Gold240sx]

Following

[marekbrze]

I found this fresh project that can be useful until Storybook supports Astro components:

https://github.com/ocavue/astrobook

Edit: the downside is that it needs to be a separate instance than the Astro project, but hopefully it will change in the future

[marekbrze]

Astrobook added option to run it only on dev env and on selected subpath 🙌❤️

ocavue/astrobook#51 (comment)

[mseibert]

Would love to see this implemented.

[spokospace]

+1

[badekan]

+1

[michaelangeloio]

+1!

[LaurieGami]

+1

[luisorbaiceta]

for all the "+1" and "following" comments, there is a magnificient reaction function you can use in each issue. This kind of comments only polute the thread and distract from what's been debated

[slawekkolodziej]

I started working on a POC yesterday: https://github.com/slawekkolodziej/storybook-astro

However, as I have limited experience with the internals of Vite, Astro, and Storybook, I would appreciate any help! Below you can see what I have so far:

storybook-astro.mp4